feat: ✨ 修改文档

docs/guide/浏览器相关/浏览器渲染流程.md

@@ -8,36 +8,42 @@
    - 第三阶段: 等首次加载完成后，页面一点点被渲染
 2. HTML 解析
 3. 生成 CSSOM 树
+
    CSS 不会阻塞 HTML 解析，但是会阻塞页面渲染，因为要生成渲染树
+
 4. 生成布局树
+
    去除不显示的节点，计算样式
+
 5. 分层和合成机制
    - 分层: 分层树在布局树之后，分层树的每一个节点都是图层，如没有，则和父节点同一个图层
    - 绘制阶段: 根据图层在绘制阶段生成绘制指令
    - 光栅化: 根据绘制指令，将每个图层都绘制成一张图片
    - 合成: 合成线程将多张图片合成一张图片，然后显示在屏幕上 (由合成线程完成，不影响主线程)
-          - 优化操作1: 合成线程内会维护一个光栅化线程池，将绘制指令列表提交到 GPU 进行光栅化，生成位图，放在内存中
-          - 优化操作2: 分块，合成线程将图层分块，优先渲染离屏幕最近的图块
-          - ![合成线程](./../../public/assets/浏览器原理/3.png)
+
+      - 优化操作1: 合成线程内会维护一个光栅化线程池，将绘制指令列表提交到 GPU 进行光栅化，生成位图，放在内存中
+      - 优化操作2: 分块，合成线程将图层分块，优先渲染离屏幕最近的图块
+      - ![合成线程](./../../public/assets/浏览器原理/3.png)
+
 6. 页面显示
 
 ## 常见的问题
 
 ### 1 从输入 URL 到页面渲染完成，发生了什么？
-1. 浏览器会根据用户输入的内容判断是关键字还是URL
-2. 如果是关键字，会将其组成成带有搜索关键字的URL，通过IPC进程通信发送给网络进程
-3. 网络进程发起请求前，会判断是否命中强缓存，如命中直接返回存储资源
-4. 否则发起请求，根据 DNS 解析获取域名对应的 IP 地址，进行 TCP、HTTP 连接
-5. 服务端收到请求后，会判断是否命中协商缓存，如命中则返回304状态码
-6. 如返回的是301、302状态码，浏览器会根据响应头返回的location字段，进行重定向
-7. 如是正常返回资源类型，浏览器会根据 content-type 对资源做相对应的操作，如果是下载类型则进行下载，如果是html类型则会提交到渲染进程进行解析
-8. 解析HTML，转换成浏览器能识别的DOM树
-9. 解析CSS，转化成浏览器能识别的CSS样式树
-10. 根据DOM和CSS样式树，通过布局计算生成布局树
-11. 根据布局树上的分层属性（z-index），生成分层树
+1.  浏览器会根据用户输入的内容判断是关键字还是URL
+2.  如果是关键字，会将其组成成带有搜索关键字的URL，通过IPC进程通信发送给网络进程
+3.  网络进程发起请求前，会判断是否命中强缓存，如命中直接返回存储资源
+4.  否则发起请求，根据 DNS 解析获取域名对应的 IP 地址，进行 TCP、HTTP 连接
+5.  服务端收到请求后，会判断是否命中协商缓存，如命中则返回304状态码
+6.  如返回的是301、302状态码，浏览器会根据响应头返回的location字段，进行重定向
+7.  如是正常返回资源类型，浏览器会根据 content-type 对资源做相对应的操作，如果是下载类型则进行下载，如果是html类型则会提交到渲染进程进行解析
+8.  解析 HTML，转换成浏览器能识别的 `DOM 树`
+9.  解析 CSS，转化成浏览器能识别的 `CSS 样式树`
+10. 根据 DOM 和 CSS 样式树，通过 布局计算生成 `布局树`
+11. 根据布局树上的`分层属性（z-index）`，生成`分层树`
 12. 根据分层树，生成绘制指令列表
 13. 渲染主线程会将绘制指令列表提交给合成线程
-14. 合成线程会发送指令给光栅化线程池，将绘制指令列表提交到 GPU 进行光栅化，生成位图，放在内存中
+14. 合成线程会维护一个`光栅化线程池`，将绘制指令列表提交到 `GPU` 进行`光栅化`，生成位图，放在内存中
 15. 合成线程通信浏览器进程，浏览器进程将内存中的数据输出到显卡的后缓存区，在下一帧绘制之前，显卡的后缓冲区与前缓冲区对换，显示屏读取前缓冲区数据，显示到屏幕上