前端进阶-浏览器2

1.8 浏览器如何渲染页面的？

参考答案：

所以可以分析出基本过程：

​ 1. HTML 被 HTML 解析器解析成 DOM 树；

​ 2. CSS 被 CSS 解析器解析成 CSSOM 树；

3. 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；

4. 生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；

5. 将布局绘制(paint)在屏幕上，显示出整个页面。

   不同的浏览器内核不同，所以渲染过程不太一样。

​ WebKit 主流程

​ Mozilla 的 Gecko 呈现引擎主流程

​ 由上面两张图可以看出，虽然主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。
​ Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它 由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。

1.9 重绘、重排区别如何避免

参考答案：

1. 重排(Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

2. 重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

3. 区别：重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

4. 引发重排

   4.1 添加、删除可见的dom

   4.2 元素的位置改变

   4.3 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

   4.4 页面渲染初始化

   4.5 浏览器窗口尺寸改变

   4.6 获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会导致队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in I