浏览器的渲染机制初探

2017-06-28 本文已影响0人 JokerPeng

1、DTD(document type definition)：文档类型定义，是一系列的语法规则，用来定义XML或(X)HTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

通俗易懂的说就是，DTD告诉浏览器我是什么文档类型，浏览器根据这来判断用什么解析和渲染它。

通俗易懂的解释就是，DOCTYPE通知浏览器当前文档包含的是哪个DTD，即何种文档类型。

严格模式(Strict)：该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素，如font，center，big等
传统模式(Tranditional)：该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素，如font，center，big等

浏览器渲染过程(图片来源网络)

几个概念：
DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree。

Layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

Painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

渲染过程：

(1) 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
(2) 将CSS解析成 CSS Rule Tree 。
(3) 根据DOM树和CSSOM来构造 Render Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
(4) 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
(5) 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就是重排。每个页面至少需要一次回流，就是在页面第一次加载的时候。

任何页面布局和几何属性的改变都会触发重排，比如：

1、页面渲染初始化；(无法避免)
2、添加或删除可见的DOM元素；
3、元素位置的改变，或者使用动画；（position、left、right等）
4、元素尺寸的改变——大小，外边距，边框（margin、padding和margin）；
5、浏览器窗口尺寸的变化（resize事件发生时）；
6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；（font-size、font-weight等）
7、读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

改变元素外观属性。如：color，background-color等

注意：重排必定会引发重绘，但重绘不一定会引发重排。

重排和重绘都会影响网页加载性能。应该尽量避免重排和重绘，特别是重排，常见做法如下：

1、不要一条一条地修改 DOM 的样式，而是通过新增一个类名(classname)，把样式写在这个类名上，去改变元素样式。
2、把 DOM ”离线”后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
3、尽量不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
4、为动画的元素使用绝对定位 absolute / fixed