前端进击笔记

浏览器是如何渲染的

渲染过程

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)排序更后，所以成本更大。

如何进行渲染优化

渲染优化其实就是减少重排次数，提高性能

  • 将多次改变样式属性的操作合并成一次操作，对元素的类进行增删改，而不是对 style 进行增删改

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

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

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