update: 浏览器的渲染过程
This commit is contained in:
qianguyihao
parent
b80ee60568
commit
0c3df74022
@ -86,32 +86,68 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
|||||||
面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是`<!DOCTYPE html>`。
|
面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是`<!DOCTYPE html>`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 浏览器的渲染过程
|
## 浏览器的渲染过程
|
||||||
|
|
||||||
|
|
||||||
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
|
### 渲染树
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 上方图片的来源：[Google 官方 | 渲染树构建、布局及绘制](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)
|
||||||
|
|
||||||
|
**渲染树**包含了网页中有哪些节点、各个节点的CSS样式（大小、颜色等）、以及他们的从属关系。
|
||||||
|
|
||||||
|
我们写完前端代码之后，计算机通过解释器把代码文本翻译成机器能理解的数据结构。比如说，html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。
|
||||||
|
|
||||||
|
### 渲染过程（重要）
|
||||||
|
|
||||||
|
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。来看看下面这张图。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
这里先解释一下几个概念，方便大家理解：
|
这里解释一下几个概念，方便大家理解：
|
||||||
|
|
||||||
- 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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 上方图片的来源：<https://developers.google.com/web/fundamentals/performance/rendering>
|
||||||
|
|
||||||
|
关键渲染路径描述的是渲染从触发到绘制的全过程，一共经历了五个阶段：
|
||||||
|
|
||||||
|
（1）通过JS、CSS代码来**触发**页面上的视觉变化。
|
||||||
|
|
||||||
|
（2）Style：浏览器要重新对样式进行计算。
|
||||||
|
|
||||||
|
（3）layout：同上一段。
|
||||||
|
|
||||||
|
（4）painting：同上一段。
|
||||||
|
|
||||||
|
（5）conmposite：同上一段。
|
||||||
|
|
||||||
|
理论上，上面的五个步骤都是必须要经历的。但是，有些样式并不会影响布局，也不会影响绘制。所以，浏览器对这方面的性能进行了优化，并不一定要经历布局和绘制这两个过程。这就需要我们先了解一下「重排」和「重绘」这两个概念。详见下一段。
|
||||||
|
|
||||||
## Reflow：重排
|
## Reflow：重排
|
||||||
|
|
||||||
@ -141,11 +177,10 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
|||||||
|
|
||||||
### 定义
|
### 定义
|
||||||
|
|
||||||
**Repaint重绘制：**当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
|
**Repaint重绘制**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
|
||||||
|
|
||||||
说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。
|
说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。
|
||||||
|
|
||||||
|
|
||||||
### 什么时候触发 Repaint
|
### 什么时候触发 Repaint
|
||||||
|
|
||||||
- DOM改动
|
- DOM改动
|
||||||
@ -169,28 +204,3 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
|||||||
参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889)
|
参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -529,7 +529,7 @@ Chrome DevTools能够检测各种性能参数，其实也是调用了一些性
|
|||||||
|
|
||||||
- SSL 安全连接耗时: connectEnd - secureConnectionStart
|
- SSL 安全连接耗时: connectEnd - secureConnectionStart
|
||||||
|
|
||||||
- 网络请求耗时 (TTFB): responseStart - requestStart。
|
- 网络请求耗时 (TTFB): responseStart - requestStart
|
||||||
|
|
||||||
- 数据传输耗时: responseEnd - responseStart
|
- 数据传输耗时: responseEnd - responseStart
|
||||||
|
|
||||||
|
|||||||
13
13-前端面试/02-前端性能优化/02-渲染优化.md
Normal file
13
13-前端面试/02-前端性能优化/02-渲染优化.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## 浏览器的渲染机制
|
||||||
|
|
||||||
|
我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。
|
||||||
|
|
||||||
|
掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。
|
||||||
|
|
||||||
|
有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。
|
||||||
|
|
||||||
|
关于浏览器的渲染机制，可以看本教程的另外一篇文章：
|
||||||
|
|
||||||
|
> 《前端面试/面试必看/浏览器渲染机制.md》
|
||||||
Loading…
Reference in New Issue
Block a user