Skip to main content

css 性能优化

减少回流​

尽量不进行触发回流的操作

● 页面的首次渲染(避免不了)
● 浏览器的窗口大小发生变化（用户层面，但可以css限制布局不变化）
● 元素的内容发生变化
● 元素的尺寸或者位置发生变化
● 元素的字体大小发生变化
● 激活CSS伪类(避免不了)
● 查询某些属性或者调用某些方法
● 添加或者删除可见的DOM元素

如何避免回流与重绘？​

减少回流与重绘的措施：

  • 操作 DOM 时，尽量在低层级的 DOM 节点进行操作
  • 不要使用 table 布局， 一个小的改动可能会使整个 table 进行重新布局
  • 使用 CSS 的表达式
  • 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。
  • 使用 absolute 或者 fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素
  • 避免频繁操作 DOM，可以创建一个文档片段 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中.因为直接操作 dom 会立即执行，需要整合在一起
  • 将元素先设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。（只会触发两次回流重绘）
  • 将 DOM 的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。

浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列

浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。

上面，将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。