浏览器是如何渲染的

渲染过程

1.解析 HTML 文件,创建 DOM 树
浏览器解析 html 源码,然后创建一个 DOM 树。并行请求 css/image/js 在 DOM 树中,每一个 HTML 标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM 树的根节点就是 documentElement,对应的是 html 标签。

2.解析 CSS,形成 CSS 对象模型
浏览器解析 CSS 代码,计算出最终的样式数据。构建 CSSOM 树。对 CSS 代码中非法的语法它会直接忽略掉。解析 CSS 的时候会按照如下顺序来定义优先级:
浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html 中的 style。

3.将 CSS 与 DOM 合并,构建渲染树(renderingtree)
DOM Tree + CSSOM –> 渲染树(rendering tree)。渲染树和 DOM 树有点像,但是是有区别的。DOM 树完全和 html 标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如 head、display:none 的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的 css 属性。

重绘和重排

重绘:元素颜色、字体颜色、透明度发生改变会发生重绘。
重排:元素大小、位置改变会发生重排,重排一定会发生重绘,重排的成本比重绘大。

如何记忆呢?排(pai) 比 绘(hui)排序更后,所以成本更大。

如何进行渲染优化

  • 将多次改变样式属性的操作合并成一次操作

  • 将需要多次重排的元素,position 属性设为 absolute 或 fixed,
    这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

  • 将元素 display 属性先设置为 none
    由于 display 属性为 none 的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。

    如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发 2 次重排。