前端面试系列-浏览器渲染原理

HTML（CSS）文件转换为DOM（CSSDOM）树

平时的代码都是字符串，但在网络传输中都是0或者1的字节数据，浏览器收到这些字节数据会转换为字符串。然后将这些字符串通过词法分析转换为标记（token），这一过程在词法分析中叫做标记化（tokenization）。标记化这一过程会将代码分拆成一块块，并给这些内容打上标记，便于理解这些最小单位的代码是什么意思.标记之后转换为node，最终生成dom树

生成渲染树

当我们生成 DOM 树和 CSSOM 树以后，就需要将这两棵树组合为渲染树

插入几万个 DOM，如何实现页面不卡顿？

• 使用requestAnimationFrame循环的插入dom
• 虚拟滚动（这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容）react-virtualized

重绘（Repaint）和回流（Reflow）

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流。
• 回流必定会发生重绘，重绘不一定会引发回流。

减少重绘和回流

• 使用 transform 替代 top
• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
• 不要把节点的属性值放在一个循环里当成循环里的变量

    for(let i = 0; i < 1000; i++) {
        // 获取 offsetTop 会导致回流，因为需要去获取正确的值
        console.log(document.querySelector('.test').style.offsetTop)
    }
复制代码

• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
• CSS 选择符从右往左匹配查找，避免节点层级过多