前端性能优化第二篇-回流和重绘

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_39457740/article/details/80697345

前端性能优化第二篇-回流和重绘

先给自己持续更新的专栏打个广告,欢迎大家读一读专栏中的其他文章,戳一戳->前端性能优化

浏览器渲染过程

先请今天的主角“回流”和“重绘”在后台等一下,我们先来看看浏览器渲染页面的过程,不要跳过这个重要的部分啊~

当浏览器得到页面的时候,就开始了它的渲染过程:
1. 解析HTML,构建DOM树(包括了发起http请求来获取链接的内容)
2. 解析CSS
3. 合并DOM树和CSS规则树,生成reader树
4. 布局render树(Layout/reflow),计算元素的位置,大小
5. 绘制render树,绘制页面像素信息

上面就是大致的流程了,进行一点简单的解释

构建DOM树

  • 单个节点的构建经过了Bytes -> characters -> tokens -> nodes -> object model的过程
  • 整个树的构建利用了栈结构,当一个元素的所有子节点构建完成后才去构建下一个兄弟节点(类似深度优先遍历树)

构建CSSOM树

当计算每个节点样式的时候,浏览器会根据优先级从低到高的顺序设置这个节点的属性,从全局属性开始,一直寻找到这个节点的具体属性。这个CSSOM会部分替换浏览器自己的默认样式表。

生成render树

这个渲染的过程是从DOM的根节点开始进行render过程,在这个过程中会跳过不占据空间的节点,比如设置了display:none的元素,不包括那些有大小但设置了visibility:hidden; opacity:0;的元素。

reflow的触发

  • 页面第一次渲染
  • DOM树发生变化(添加DOM节点、添加内容)
  • 元素位置或大小变化
  • 浏览器窗口大小变化
  • 获取属性(这个影响不在于改变了页面,而是破坏了浏览器的进行的批处理回流优化)

一些属性和方法

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

repaint的触发

  • 回流必定会引起重绘
  • 颜色,透明度,字体等属性的改变会引起重绘

一个明显的结论:回流比重绘代价更高

优化方法

浏览器本身是有一定的优化策略的,比如维护一个引起回流 / 重绘的队列,将所有引起回流重绘的操作放入队列,进行批处理。这样就能让多次操作变成一次操作,从而提升效率。同时,如果某些页面内容的改变很重要,想要第一时间完成,也可以写代码强行提前队列操作。

日常注意点:

  • 将多次页面样式改变合并成一次操作
  • 将需要多次重排的元素,设置为absolute或者fixed,元素脱离了文档流,不会影响别的元素
  • 对一个有多个层次的dom节点,构建完成之后再插入页面中,而不要一步一步添加
  • 可以先把元素display:none,改变内容完成之后再diaplay:block
阅读更多

没有更多推荐了,返回首页