update: 浏览器的渲染过程

2021-01-18 20:46:03 +08:00 · 2021-01-18 20:46:03 +08:00 · 0c3df74022
commit 0c3df74022
parent b80ee60568
6 changed files with 60 additions and 37 deletions
--- a/13-前端面试/01-面试必看/09-01.浏览器渲染机制.md
+++ b/13-前端面试/01-面试必看/09-01.浏览器渲染机制.md
@ -86,32 +86,68 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
 面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是`<!DOCTYPE html>`。


+
+
 ## 浏览器的渲染过程


-浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
+### 渲染树

+![](http://img.smyhvae.com/20210118-2005.png)
+
+> 上方图片的来源：[Google 官方 | 渲染树构建、布局及绘制](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)
+
+**渲染树**包含了网页中有哪些节点、各个节点的CSS样式（大小、颜色等）、以及他们的从属关系。
+
+我们写完前端代码之后，计算机通过解释器把代码文本翻译成机器能理解的数据结构。比如说，html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。
+
+### 渲染过程（重要）
+
+浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。来看看下面这张图。

 ![](http://img.smyhvae.com/20180310_1257.png)

-这里先解释一下几个概念，方便大家理解：
+这里解释一下几个概念，方便大家理解：

- DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。
+- DOM树（DOM Tree）：浏览器将HTML标签解析成树形的数据结构。DOM树包含了有哪些节点，以及节点之间的嵌套关系。

- CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
+- CSSOM（CSS Rule Tree）：浏览器将CSS解析成树形的数据结构。CSSOM包含了节点的样式。

- Render Tree: DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout）
+- 渲染树（Render Tree）: DOM 树与 CSSOM 树合并后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。

- layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去**计算出每个节点在屏幕中的位置**(宽高、颜色等)。
+- 布局（Layout）: **通过布局，计算出每个节点在屏幕中的位置**(大小、颜色等)。

- painting：按照算出来的规则，通过显卡，把内容画到屏幕上。
+- 绘制（Painting）：按照算出来的规则，通过显卡，把内容画出来。

- display：打击看到的最终效果。
+- conmposite：合成。浏览器在绘制的时候，不会把所有的内容都画在同一个层上。需要最终把这些层合成到一起，显示在屏幕上。

 参考链接：

- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html)
+- [浏览器渲染原理及流程](http://www.cnblogs.com/slly/p/6640761.html)

+### 关键渲染路径
+
+浏览器渲染分为五个阶段：
+
+> JavaScript/CSS --> Style --> Layout --> Paint --> Composite
+
+![](http://img.smyhvae.com/20210118-1950.jpg)
+
+> 上方图片的来源：<https://developers.google.com/web/fundamentals/performance/rendering>
+
+关键渲染路径描述的是渲染从触发到绘制的全过程，一共经历了五个阶段：
+
+（1）通过JS、CSS代码来**触发**页面上的视觉变化。
+
+（2）Style：浏览器要重新对样式进行计算。
+
+（3）layout：同上一段。
+
+（4）painting：同上一段。
+
+（5）conmposite：同上一段。
+
+理论上，上面的五个步骤都是必须要经历的。但是，有些样式并不会影响布局，也不会影响绘制。所以，浏览器对这方面的性能进行了优化，并不一定要经历布局和绘制这两个过程。这就需要我们先了解一下「重排」和「重绘」这两个概念。详见下一段。

 ## Reflow：重排

@ -141,11 +177,10 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用

 ### 定义

-**Repaint重绘制：**当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
+**Repaint重绘制**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。

 说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。

-
 ### 什么时候触发 Repaint

 - DOM改动
@ -169,28 +204,3 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
 参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889)


-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
--- a/13-前端面试/01-面试必看/09-02.js运行机制：异步和单线程.md
+++ b/13-前端面试/01-面试必看/09-02.js运行机制：异步和单线程.md
--- a/13-前端面试/01-面试必看/10-01.页面性能优化.md
+++ b/13-前端面试/01-面试必看/10-01.页面性能优化.md
--- a/13-前端面试/01-面试必看/10-02.前端错误监控.md
+++ b/13-前端面试/01-面试必看/10-02.前端错误监控.md
--- a/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md
+++ b/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md
@ -529,7 +529,7 @@ Chrome DevTools能够检测各种性能参数，其实也是调用了一些性

 - SSL 安全连接耗时: connectEnd - secureConnectionStart

- 网络请求耗时 (TTFB): responseStart - requestStart。
+- 网络请求耗时 (TTFB): responseStart - requestStart

 - 数据传输耗时: responseEnd - responseStart

--- a/13-前端面试/02-前端性能优化/02-渲染优化.md
+++ b/13-前端面试/02-前端性能优化/02-渲染优化.md
@ -0,0 +1,13 @@
+
+
+## 浏览器的渲染机制
+
+我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。
+
+掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。
+
+有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。
+
+关于浏览器的渲染机制，可以看本教程的另外一篇文章：
+
+> 《前端面试/面试必看/浏览器渲染机制.md》