update
This commit is contained in:
qianguyihao
@@ -78,7 +78,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
**渲染树**包含了网页中有哪些节点、节点的从属关系、以及节点的CSS样式（大小、颜色等）。
|
||||
|
||||
我们写完前端代码之后，计算机通过解释器把代码文本翻译成机器能理解的数据结构。比如说，html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。
|
||||
浏览器下载完html文档之后，第一步是先将其解析成文本。而html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。
|
||||
|
||||
### 渲染过程（重要）
|
||||
|
||||
@@ -92,13 +92,13 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
- CSSOM（CSS Rule Tree）：浏览器将CSS解析成树形的数据结构。CSSOM包含了节点的CSS样式（大小、颜色等）。
|
||||
|
||||
- 渲染树（Render Tree）: DOM 树与 CSSOM 树合并后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。
|
||||
- 渲染树（Render Tree）: DOM 树与 CSSOM 树**合并**后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。
|
||||
|
||||
- 布局（Layout）: 计算出每个节点在屏幕中的**位置和大小**。
|
||||
|
||||
- 绘制（Painting）：按照算出来的规则，通过显卡，把内容画出来。
|
||||
|
||||
- composite：合成。浏览器在绘制的时候，一开始不会把所有的内容都画在同一层上。需要把这些层合成到一起，最终显示在屏幕上。
|
||||
- composite：合成。浏览器在绘制的时候，一开始不会把所有的内容都画在同一层上。需要把这些内容画在不同的曾上，最终合并到一起，并显示在屏幕上。
|
||||
|
||||
参考链接：
|
||||
|
||||
@@ -106,7 +106,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
### 关键渲染路径
|
||||
|
||||
浏览器渲染分为五个阶段：
|
||||
说到渲染，就不得不提到“关键渲染路径”，它描述的是渲染从触发到绘制的过程。浏览器渲染经历了五个阶段：
|
||||
|
||||
> JavaScript/CSS --> Style --> Layout --> Paint --> Composite
|
||||
|
||||
@@ -116,9 +116,9 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
关键渲染路径描述的是渲染从触发到绘制的全过程，一共经历了五个阶段：
|
||||
|
||||
（1）通过JS、CSS代码来**触发**页面上的视觉变化。
|
||||
（1）**触发视觉的变化：**通过JS、CSS代码来**触发**页面上的视觉变化。比如通过 jQuery添加节点、通过CSS添加动画，都可以触发视觉上的变化。
|
||||
|
||||
（2）Style：浏览器对样式进行计算。
|
||||
（2）Style：浏览器对样式进行计算。匹配选择器，计算哪些CSS受到了影响。
|
||||
|
||||
（3）layout：同上一段。
|
||||
|
||||
@@ -134,15 +134,15 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
|
||||
|
||||
## 重排（回流）：Reflow
|
||||
## 布局/回流/重排
|
||||
|
||||
### 定义
|
||||
|
||||
**重排 Reflow**：
|
||||
布局 layout：
|
||||
|
||||
渲染对象在创建完成并添加到渲染树时，是将DOM节点和它对应的样式结合起来，并不包含位置和大小信息。
|
||||
|
||||
我们还需要通过 `Layout` 布局阶段，来计算它们在设备视口(viewport)内的确切位置和大小，计算这些值的过程称为`回流`、`布局`或`重排`。
|
||||
我们还需要通过 `Layout` 布局阶段，来计算它们在设备视口(viewport)内的确切位置和大小，计算这些值的过程称为`回流`、`布局`或`重排（Reflow）`。
|
||||
|
||||
|
||||
|
||||
@@ -152,11 +152,11 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
- [你真的了解回流和重绘吗](https://github.com/chenjigeng/blog/issues/4)
|
||||
|
||||
### 什么时候会触发 Reflow
|
||||
### 什么时候会触发布局
|
||||
|
||||
> 核心就是围绕DOM元素的**大小**和**位置**。
|
||||
DOM元素的**大小**和**位置**发生变化的时候，会触发布局。
|
||||
|
||||
- 增加、删除DOM节点
|
||||
- 增加、删除DOM元素
|
||||
|
||||
- display: none
|
||||
|
||||
@@ -176,22 +176,21 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
|
||||
|
||||
|
||||
|
||||
|
||||
## 重绘：Repaint
|
||||
## 绘制/重绘
|
||||
|
||||
### 定义
|
||||
|
||||
**重绘制 Repaint**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
|
||||
**绘制 paint**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程也称之为 Repaint（重绘制）。
|
||||
|
||||
说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。
|
||||
|
||||
### 什么时候触发 Repaint
|
||||
### 什么时候触发绘制
|
||||
|
||||
- DOM改动
|
||||
|
||||
- CSS改动
|
||||
|
||||
其实，就是判断当前呈现的内容是否发生变化（无论这个变化是通过DOM改动还是CSS改动）。只要页面显示的内容不一样了，肯定要 Repaint。
|
||||
其实，就是判断当视觉上是否发生变化（无论这个变化是通过DOM改动还是CSS改动）。只要页面显示的内容不一样了，肯定要 Repaint。
|
||||
|
||||
**面试总结：**
|
||||
|
||||
|
||||
@@ -84,7 +84,6 @@ network里的信息挺多，我们可以将其保存下来，留着以后做分
|
||||
|
||||
- Content Download：收到响应后，资源的下载时间。如果值越大，表明下载时间越长。有些同步加载的资源会造成阻塞，导致网页的整体加载时间过长，让用户等待太久。
|
||||
|
||||
|
||||
**TTFB** 是一个很重要的指标，它表示的是：请求发出到响应，到底要经历多久。TTFB 可以给我们一个很直观的感受，我们网站的请求和响应到底是快还是慢，很大程度上是由 TTFB 决定。
|
||||
|
||||
影响 TTFB 的因素是什么呢？比如：
|
||||
@@ -267,7 +266,7 @@ RAIL 模型是Google提出的可以量化性能的测量**标准**。我们做
|
||||
|
||||
|
||||
|
||||
### preformance：性能表现
|
||||
### performance：性能表现
|
||||
|
||||
|
||||
|
||||
@@ -362,7 +361,6 @@ WebPageTest 在世界各地提供了非常多的服务器，在每个服务器
|
||||
|
||||
|
||||
|
||||
|
||||
### WebPageTest 报告分析
|
||||
|
||||
淘宝网站性能测试报告：
|
||||
|
||||
Reference in New Issue
Block a user