1.用户输入
- 判断输入的关键字：内容/URL
- 内容：使用默认搜索引擎
- URL: 添加协议合成完整URL
- 然后进入加载状态
2.URL请求过程
- 浏览器进程通过进程间通信（IPC）把URL请求发送至网络进程
- 网络进程收到URL请求后，发起真正的URL请求流程
- 网络进程查找本地缓存是否缓存了该资源，如果有缓存资源，则直接返回资源给浏览器进程
- 没有缓存，直接进入网络请求流程
- DNS解析->获取请求域名的服务器IP地址。如果是HTTPS，还需要建立TLS链接。
- 利用IP地址和服务器建立TCP连接
- 构建请求行、请求头等信息，和该域名相关cookie等数据附加到请求头中，向服务器发送构建的请求信息
- 服务器收到请求信息，根据请求信息生成响应数据（响应行、响应头、响应体），发给网络进程
- 网络进程接收响应头和响应行之后，开始解析响应头（响应头+响应行）
重定向
- 响应头状态码：301、302
- 从响应头的Location字段中读取重定向的地址
- 然后发起新的HTTP或HTTPS请求，从头开始响应数据类型处理
- Content-Type：告诉浏览器服务器返回的响应体数据类型
- Content-Type：text/html,application/octet-stream ...
- 浏览器根据Content-Type的值决定如何显示响应体内容
- 如果是下载类型，请求提交给浏览器的下载管理器，url请求的导航流程就此结束
- 如果是HTML，浏览器继续进行导航流程3.准备渲染进程
- 默认情况：每个页面分配一个渲染进程
- 同一站点：根域名 + 协议；包含所有子域名和不同端口
- chrome默认策略：每个标签对应一个渲染进程。但如果从一个页面打开另一个新页面，新页面和当前页面属于同一站点的话，新页面会复用父页面的渲染进程
4.提交文档
- 文档：URL请求的响应体数据
- “提交文档”的消息由浏览器进程发出
- 渲染进程接收到“提交文档”消息后，和网络进程建立传出数据的“管道”
- 文档数据传输完成之后，渲染进程返回“确认提交”的消息给浏览器进程
- 浏览器接收到“确认提交”的消息，更新浏览器界面状态（安全状态、地址栏URL、前进后退历史状态、更新web页面）
5.渲染阶段
构建DOM树
- 浏览器无法直接理解和使用HTML，需要将HTML转换为浏览器能够理解的结构->DOM树
- 输入HTML -> HTML Parser -> DOM树
样式计算
-
把CSS转换为浏览器能够理解的结构
- 渲染引擎接收到CSS文本时，执行一个转换操作，将CSS文本转换为浏览器可以理解的结构->styleSheets
- 该结构具备了查询和修改功能，为后面样式操作提供基础
-
转换样式表中的属性值，使其标准化
- body{font-size: 2em} -> body{font-size: 32px}
- p{color: blue} -> p{color: rgb(0, 0, 255)}
-
计算出DOM树中每个节点的具体样式
- 继承
- 层叠
-
布局阶段
-
计算出DOM树中可见元素的几何位置，这个计算过程叫做布局
-
创建布局树
- DOM树中包含很多不可见元素，如head标签，display:none元素
- 在显示之前，还要额外的构建一颗只包含可见元素布局树
- 为了构建布局树，浏览器大体上完成了如下工作
- 遍历DOM树中所有可见节点，并把这些节点添加到布局中
- 不可见的节点会被布局树忽略掉，如head标签下全部内容，display:none元素
-
布局计算
- 现在已经有了一颗完整的布局树，接下来要计算布局节点的坐标位置
- 执行布局操作时，会把布局运算的结果重新写回到布局树中，布局树既是输入内容也是输出内容
-