Boaz

关于重绘和回流
重绘和回流重绘:元素样式、风格等改变不影响页面布局回流:布局和几何信息改变需要重新计算渲染树减少回流和重绘、减少对...
扫描右侧二维码阅读全文
30
2021/03

关于重绘和回流

重绘和回流

  • 重绘:元素样式、风格等改变不影响页面布局
  • 回流:布局和几何信息改变需要重新计算渲染树
    减少回流和重绘、减少对渲染树的操作、减少对样式的请求、尽量利用浏览器的优化策略。

1)class替换样式
2)合并多次dom操作
3)display:none隐藏
4)css3硬件加速(GPU加速)

transform
opacity
filters
Will-change

5)缓存会引起浏览器flush队列的属性比如以下属性或方法

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

6)将频繁重绘回流的dom元素单独作为一个独立图层absolute或fixed
7)html不要嵌套太深, 否则会加大对页面布局的计算消耗、尽量不要使用表格布局花销更大

Last modification:March 30th, 2021 at 02:50 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment