浏览器工作流程『从输入 URL 到页面展示』

浏览器工作流程『从输入 URL 到页面展示』学习笔记
导航

用户输入

1. 用户在地址栏按下回车，检查输入（关键字 or 符合 URL 规则），组装完整 URL；
2. 回车前，当前页面执行 onbeforeunload 事件；
3. 浏览器进入加载状态。

URL 请求

1. 浏览器进程通过 IPC 把 URL 请求发送至网络进程；
2. 查找资源缓存（有效期内）；
3. DNS 解析（查询 DNS 缓存）；
4. 进入 TCP 队列（单个域名 TCP 连接数量限制）；
5. 创建 TCP 连接（三次握手）；
6. HTTPS 建立 TLS 连接（client hello, server hello, pre-master key 生成『对话密钥』）；
7. 发送 HTTP 请求（请求行[方法、URL、协议]、请求头 Cookie 等、请求体 POST）；
8. 接受请求（响应行[协议、状态码、状态消息]、响应头、响应体等）； - 状态码 301 / 302，根据响应头中的 Location 重定向； - 状态码 200，根据响应头中的 Content-Type 决定如何响应（下载文件、加载资源、渲染 HTML）。

准备渲染进程

1. 根据是否同一站点（相同的协议和根域名），决定是否复用渲染进程。 提交文档 1. 浏览器进程接受到网路进程的响应头数据，向渲染进程发送『提交文档』消息；
2. 渲染进程收到『提交文档』消息后，与网络进程建立传输数据『管道』；
3. 传输完成后，渲染进程返回『确认提交』消息给浏览器进程；
4. 浏览器接受『确认提交』消息后，移除旧文档、更新界面、地址栏，导航历史状态等；
5. 此时标识浏览器加载状态的小圆圈，从此前 URL 网络请求时的逆时针选择，即将变成顺时针旋转（进入渲染阶段）。

渲染 渲染流水线 构建 DOM 树

1. 输入：HTML 文档；
2. 处理：HTML 解析器解析；
3. 输出：DOM 数据解构。

样式计算

1. 输入：CSS 文本；
2. 处理：属性值标准化，每个节点具体样式（继承、层叠）；
3. 输出：styleSheets(CSSOM)。

布局(DOM 树中元素的计划位置)

1. DOM & CSSOM 合并成渲染树；
2. 布局树（DOM 树中的可见元素）；
3. 布局计算。

分层

1. 特定节点生成专用图层，生成一棵图层树（层叠上下文、Clip，类似 PhotoShop 里的图层）；
2. 拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层；
3. 没有图层的 DOM 节点属于父节点图层；
4. 需要剪裁的地方也会创建图层。

绘制指令

1. 输入：图层树；
2. 渲染引擎对图层树中每个图层进行绘制；
3. 拆分成绘制指令，生成绘制列表，提交到合成线程；
4. 输出：绘制列表。

分块

1. 合成线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。

光栅化（栅格化）

1. 在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
2. 快速栅格化：GPU 加速，生成位图（GPU 进程）。

合成绘制

1. 绘制图块命令——DrawQuad，提交给浏览器进程；
2. 浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。

相关概念 重排

1. 更新了元素的几何属性（如宽、高、边距）；
2. 触发重新布局，解析之后的一系列子阶段；
3. 更新完成的渲染流水线，开销最大。

重绘

1. 更新元素的绘制属性（元素的颜色、背景色、边框等）；
2. 布局阶段不会执行（无几何位置变换），直接进入绘制阶段。

合成

1. 直接进入合成阶段（例如CSS 的 transform 动画）；
2. 直接执行合成阶段，开销最小。

如果你在浏览器地址栏里输入网站的地址会发生什么

1. 浏览器回判断是关键字还是网址
2. 去本地查找是否有缓存 这也是为什么第二次打开页面会快一些，利用了页面缓存和DNS解析（DNS也就是ip与域名对应关系）
3. DNS解析获的ip 建立tcp，如果是https 还需要证书加密
4. 服务器接受到请求，根据请求头生成响应数据，并返回给浏览器
5. 根据服务器返回信息才判断是否重定向，或者交给渲染进程加载页面

详细

1. 用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL
2. 用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得
3. 浏览器进程浏览器构建请求行信息，会通过进程间通信（IPC）将URL请求发送给网络进程 GET /index.html HTTP1.1
4. 网络进程获取到URL，先去本地缓存中查找是否有缓存文件，如果有，拦截请求，直接200返回；否则，进入网络请求过程
5. 网络进程请求DNS返回域名对应的IP和端口号，如果之前DNS数据缓存服务缓存过当前域名信息，就会直接返回缓存信息；否则，发起请求获取根据域名解析出来的IP和端口号，如果没有端口号，http默认80，https默认443。如果是https请求，还需要建立TLS连接。
6. Chrome 有个机制，同一个域名同时最多只能建立 6 个TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。如果当前请求数量少于6个，会直接建立TCP连接。
7. TCP三次握手建立连接，http请求加上TCP头部——包括源端口号、目的程序端口号和用于校验数据完整性的序号，向下传输
8. 网络层在数据包上加上IP头部——包括源IP地址和目的IP地址，继续向下传输到底层
9. 底层通过物理网络传输给目的服务器主机
10. 目的服务器主机网络层接收到数据包，解析出IP头部，识别出数据部分，将解开的数据包向上传输到传输层
11. 目的服务器主机传输层获取到数据包，解析出TCP头部，识别端口，将解开的数据包向上传输到应用层
12. 应用层HTTP解析请求头和请求体，如果需要重定向，HTTP直接返回HTTP响应数据的状态code301或者302，同时在请求头的Location字段中附上重定向地址，浏览器会根据code和Location进行重定向操作；如果不是重定向，首先服务器会根据 请求头中的If-None-Match 的值来判断请求的资源是否被更新，如果没有更新，就返回304状态码，相当于告诉浏览器之前的缓存还可以使用，就不返回新数据了；否则，返回新数据，200的状态码，并且如果想要浏览器缓存数据的话，就在相应头中加入字段： Cache-Control:Max-age=2000 响应数据又顺着应用层——传输层——网络层——网络层——传输层——应用层的顺序返回到网络进程
13. 数据传输完成，TCP四次挥手断开连接。如果，浏览器或者服务器在HTTP头部加上如下信息，TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间，提示资源加载速度 Connection:Keep-Alive
14. 网络进程将获取到的数据包进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器，该导航流程结束，不再进行；如果是text/html类型，就通知浏览器进程获取到文档准备渲染
15. 浏览器进程获取到通知，根据当前页面B是否是从页面A打开的并且和页面A是否是同一个站点（根域名和协议一样就被认为是同一个站点），如果满足上述条件，就复用之前网页的进程，否则，新创建一个单独的渲染进程
16. 浏览器会发出“提交文档”的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程
17. 浏览器收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新web页面，此时的web页面是空白页
18. 渲染进程对文档进行页面解析和子资源加载，HTML 通过HTM 解析器转成DOM Tree（二叉树类似结构的东西），CSS按照CSS 规则和CSS解释器转成CSSOM TREE，两个tree结合，形成render tree（不包含HTML的具体元素和元素要画的具体位置），通过Layout可以计算出每个元素具体的宽高颜色位置，结合起来，开始绘制，最后显示在屏幕中新页面显示出来