update docs

.vitepress/config.ts

@@ -14,11 +14,15 @@ export default withMermaid({
   lastUpdated: true,
   head,
   themeConfig: {
-    outline: { label: '文章导航' },
+    outline: { label: '文章导航', previous: '上一篇', next: '下一篇' },
     nav,
     sidebar,
     socialLinks: [{ icon: 'github', link: 'https://github.com/hojas' }],
     lastUpdatedText: '最后更新',
+    docFooter: {
+      prev: '上一篇',
+      next: '下一篇',
+    },
     footer: {
       copyright: 'Copyright © 2023-present FrontendGuide',
     },

.vitepress/head.ts

@@ -8,15 +8,6 @@ export const head: HeadConfig[] = [
       content: '前端开发,前端博客,Node.js开发',
     },
   ],
-  [
-    'script',
-    { src: 'https://hm.baidu.com/hm.js?5f54051a64b08ac3d89526db54df136f' },
-  ],
-  [
-    'script',
-    {},
-    'var _hmt = _hmt || [];'
-  ],
   [
     'script',
     { id: 'LA_COLLECT', src: 'https://sdk.51.la/js-sdk-pro.min.js' },

.vitepress/sidebar.ts

@@ -31,8 +31,7 @@ export const sidebar: DefaultTheme.Sidebar = {
       items: [
         { text: '进程和线程', link: '/browser/process-and-thread.html' },
         { text: '事件循环', link: '/browser/event-loop.html' },
-        // { text: 'blink 渲染引擎', link: '/browser/blink.html' },
-        // { text: 'v8 引擎简介', link: '/browser/v8.html' },
+        { text: '页面渲染原理', link: '/browser/rendering.html' },
       ],
     },
   ],

package.json

@@ -10,9 +10,9 @@
     "serve": "vitepress serve --host 0.0.0.0 --port 3000"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.0",
+    "@antfu/eslint-config": "^2.6.1",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "eslint": "^8.56.0",
     "mermaid": "^10.6.1",
     "typescript": "^5.3.3",

src/docs/browser/event-loop.md

@@ -1,5 +1,5 @@
 ---
-title: 浏览器事件循环
+title: 浏览器事件循环原理
 ---
 
 <script setup>
@@ -9,7 +9,7 @@ import img2 from './event-loop/2.png'
 import img3 from './event-loop/3.png'
 </script>
 
-# 浏览器事件循环
+# 浏览器事件循环原理
 
 ## 浏览器的进程
 

src/docs/browser/rendering.md

@@ -0,0 +1,167 @@
+---
+title: 浏览器页面渲染原理
+---
+
+# 浏览器页面渲染原理
+
+## 渲染时间点
+
+当浏览器的网络线程收到 HTML 文档之后，会产生一个渲染任务，并将渲染任务传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程会从消息队列中取出渲染任务并执行任务，开启渲染流程。
+
+![rendering-time](./rendering/rendering-time.png)
+
+## 渲染流程
+
+整个渲染流程分为多个阶段，分别是：HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个阶段有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
+
+![render-flow](./rendering/render-flow.png)
+
+## HTML 解析
+
+解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。
+
+这一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。
+
+![parse HTML](./rendering/parse-html.jpg)
+
+解析出 DOM 树：
+
+![parse HTML DOM](./rendering/parse-html-dom.jpg)
+
+解析出 CSSOM 树：
+
+![parse HTML CSSOM](./rendering/parse-html-cssom.jpg)
+
+如果主线程解析到 `link` 位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。
+
+![parse HTML CSS](./rendering/parse-html-css.jpg)
+
+如果主线程解析到 `script` 位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。
+
+![parse HTML js](./rendering/parse-html-js.jpg)
+
+## 样式计算
+
+主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。
+
+在这一过程中，很多预设值会变成绝对值，比如 `red` 会变成 `rgb(255,0,0)` ，相对单位会变成绝对单位，比如 `em` 会变成 `px` 。
+
+这一步完成后，会得到一棵带有样式的 DOM 树。
+
+![style-compute](./rendering/style-compute.jpg)
+
+## 布局
+
+接下来是**布局**，布局完成后会得到布局树。
+
+布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。
+
+![layout](./rendering/layout.jpg)
+
+大部分时候，DOM 树和布局树并非一一对应。
+
+比如 `display:none` 的节点没有几何信息，因此不会生成到布局树。又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。
+
+![layout](./rendering/layout-1.jpg)
+
+![layout](./rendering/layout-2.jpg)
+
+![layout](./rendering/layout-3.jpg)
+
+文本内容只能放在行盒中，因此在布局阶段，浏览器会将块盒中的内容放在一个匿名行盒中。
+
+参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Visual_formatting_model
+
+## 分层
+
+主线程会使用一套复杂的策略对整个布局树中进行分层。
+
+分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。
+
+滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过 `will-change` 属性更大程度的影响分层结果。
+
+![layer](./rendering/layer.jpg)
+
+## 绘制
+
+主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。
+
+![paint](./rendering/paint.jpg)
+
+渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成。
+
+![paint](./rendering/paint-1.jpg)
+
+## 分块
+
+完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。
+
+![tiling](./rendering/tiling.jpg)
+
+合成线程首先对每个图层进行分块，将其划分为更多的小区域。
+
+它会从线程池中拿取多个线程来完成分块工作。
+
+![tiling](./rendering/tiling-1.jpg)
+
+## 光栅化
+
+合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。
+
+GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。
+
+![raster](./rendering/raster-1.jpg)
+
+光栅化的结果，就是一块一块的位图。
+
+![raster](./rendering/raster.jpg)
+
+## 画
+
+合成线程拿到每个层、每个块的位图后，生成一个个「指引（quad）」信息。
+
+指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。
+
+变形发生在合成线程，与渲染主线程无关，这就是`transform`效率高的本质原因。
+
+合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。
+
+![draw](./rendering/draw.jpg)
+
+## 完整过程
+
+![render flow](./rendering/render-flow.jpg)
+
+## 什么是 reflow？
+
+reflow 的本质就是重新计算 layout 树。
+
+当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。
+
+为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。
+
+也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。
+
+浏览器在反复权衡下，最终决定获取属性立即 reflow。
+
+![reflow](./rendering/reflow.jpg)
+
+## 什么是 repaint？
+
+repaint 的本质就是重新根据分层信息计算了绘制指令。
+
+当改动了可见样式后，就需要重新计算，会引发 repaint。
+
+由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。
+
+![repaint](./rendering/repaint.jpg)
+
+## 为什么 transform 的效率高？
+
+因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段。
+
+由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。
+
+![transform](./rendering/transform-1.jpg)
+
+![transform](./rendering/transform-2.jpg)

yarn.lock

@@ -138,22 +138,22 @@
     "@algolia/logger-common" "4.20.0"
     "@algolia/requester-common" "4.20.0"
 
-"@antfu/eslint-config@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.npmmirror.com/@antfu/eslint-config/-/eslint-config-2.6.0.tgz#5318a97c46889a527e3a9d4b74ae39725b0b4809"
-  integrity sha512-OSRD/5KarXbzEhiVBWu8NcRTW7aDsuvwvBBMbpGAtCTJDS97wATT2Xx+t2T26HGNuwz0TZDi5mNTwWCm7vJORQ==
+"@antfu/eslint-config@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.npmmirror.com/@antfu/eslint-config/-/eslint-config-2.6.1.tgz#0aaadd13d09ed6695abe360bf7e75658f55dfd44"
+  integrity sha512-hj7TTLXLLyk4YHp6SC0G3NTpGyn+5v9EHX3K8JMwz8qIQZnOSzpU8xQ4PcJW3wD3qePVoGDa1Q9QvYCKplIStQ==
   dependencies:
     "@antfu/eslint-define-config" "^1.23.0-2"
     "@antfu/install-pkg" "^0.3.1"
     "@eslint-types/jsdoc" "46.8.2-1"
-    "@eslint-types/typescript-eslint" "^6.12.0"
-    "@eslint-types/unicorn" "^49.0.0"
+    "@eslint-types/typescript-eslint" "^6.16.0"
+    "@eslint-types/unicorn" "^50.0.1"
     "@stylistic/eslint-plugin" "^1.5.1"
-    "@typescript-eslint/eslint-plugin" "^6.15.0"
-    "@typescript-eslint/parser" "^6.15.0"
+    "@typescript-eslint/eslint-plugin" "^6.16.0"
+    "@typescript-eslint/parser" "^6.16.0"
     eslint-config-flat-gitignore "^0.1.2"
     eslint-merge-processors "^0.1.0"
-    eslint-plugin-antfu "^2.1.0"
+    eslint-plugin-antfu "^2.1.1"
     eslint-plugin-eslint-comments "^3.2.0"
     eslint-plugin-i "^2.29.1"
     eslint-plugin-jsdoc "^46.9.1"
@@ -383,15 +383,15 @@
   resolved "https://registry.npmmirror.com/@eslint-types/jsdoc/-/jsdoc-46.8.2-1.tgz#c1d9ec9ce032f0ad3a943613c346a648bcad9063"
   integrity sha512-FwD7V0xX0jyaqj8Ul5ZY+TAAPohDfVqtbuXJNHb+OIv1aTIqZi5+Zn3F2UwQ5O3BnQd2mTduyK0+HjGx3/AMFg==
 
-"@eslint-types/typescript-eslint@^6.12.0":
-  version "6.12.0"
-  resolved "https://registry.npmmirror.com/@eslint-types/typescript-eslint/-/typescript-eslint-6.12.0.tgz#627fa63eb84ad6fc9279210fccf379599e4f53fb"
-  integrity sha512-N8cbOYjyFl2BFgDhDgHhTGpgiMkFg0CoITG5hdBm9ZGmcEgUvFBnHvHG7qJl3qVEmFnoKUdfSAcr7MRb2/Jxvw==
+"@eslint-types/typescript-eslint@^6.16.0":
+  version "6.16.0"
+  resolved "https://registry.npmmirror.com/@eslint-types/typescript-eslint/-/typescript-eslint-6.16.0.tgz#c0eebf2b81eb09f6560f7f11bcddff5f39f2c6c9"
+  integrity sha512-gLmHCSeeNtHfWJtAO5pBr4hD0aV60GyPDKJQm2JxlBJBoytJoKezan4Ak7FE9BsewaB+W3JQwsllspirHbHKLw==
 
-"@eslint-types/unicorn@^49.0.0":
-  version "49.0.0"
-  resolved "https://registry.npmmirror.com/@eslint-types/unicorn/-/unicorn-49.0.0.tgz#54a236ba569d3f4ff0d3c57466cd81269b18a342"
-  integrity sha512-NfXSZIsPFRD2fwTDZQj8SaXqS/rXjB5foxMraLovyrYGXiQK2y0780drDKYYSVbqvco29QIYoZNmnKTUkzZMvQ==
+"@eslint-types/unicorn@^50.0.1":
+  version "50.0.1"
+  resolved "https://registry.npmmirror.com/@eslint-types/unicorn/-/unicorn-50.0.1.tgz#f11633d6355e61cb249c74a0d88818153314b7c3"
+  integrity sha512-nuJuipTNcg9f+oxZ+3QZw4tuDLmir4RJOPfM/oujgToiy1s+tePDZhwg5jUGc3q8OzTtPbVpsFSYX7QApjO3EA==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
@@ -652,10 +652,10 @@
   resolved "https://registry.npmmirror.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/node@^20.10.5":
-  version "20.10.5"
-  resolved "https://registry.npmmirror.com/@types/node/-/node-20.10.5.tgz#47ad460b514096b7ed63a1dae26fad0914ed3ab2"
-  integrity sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==
+"@types/node@^20.10.6":
+  version "20.10.6"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-20.10.6.tgz#a3ec84c22965802bf763da55b2394424f22bfbb5"
+  integrity sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==
   dependencies:
     undici-types "~5.26.4"
 
@@ -684,7 +684,7 @@
   resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
   integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
-"@typescript-eslint/eslint-plugin@^6.15.0":
+"@typescript-eslint/eslint-plugin@^6.16.0":
   version "6.16.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz#cc29fbd208ea976de3db7feb07755bba0ce8d8bc"
   integrity sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==
@@ -701,7 +701,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.15.0":
+"@typescript-eslint/parser@^6.16.0":
   version "6.16.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.16.0.tgz#36f39f63b126aa25af2ad2df13d9891e9fd5b40c"
   integrity sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==
@@ -1688,7 +1688,7 @@ eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-antfu@^2.1.0:
+eslint-plugin-antfu@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/eslint-plugin-antfu/-/eslint-plugin-antfu-2.1.1.tgz#361fa6bda30b0e5c93add6e4614df552e4c8afca"
   integrity sha512-HCPo3IP15/gOaruIb1ce6R4LUv/MKBZCmWzqYiLGDFW43WW4juPURnjaQIE3AgWNSoCURqD3wxerXYKzokKTgA==