重绘和回流

最新推荐文章于 2024-10-05 03:51:51 发布

努力学习前端的77

最新推荐文章于 2024-10-05 03:51:51 发布

阅读量394

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_36545813/article/details/109642787

版权

重绘和回流是浏览器渲染过程中的关键步骤。重绘仅更新元素的样式，而回流涉及元素布局的改变，两者都会影响性能。回流必然引起重绘，但重绘不一定导致回流。为了优化，可以使用前端框架、分离读写操作、批量处理DOM变更、利用缓存、使用文档碎片以及利用GPU加速如transform属性来避免不必要的回流和重绘。

摘要由CSDN通过智能技术生成

重绘：

元素样式的改变【元素的宽高，大小，位置不变】会引发浏览器重绘渲染树；

回流：

元素的大小或位置发生改变，会触发重新布局，导致渲染树重新计算布局和重新渲染。

回流一定会触发重绘，重绘不一定会触发回流。

重绘和回流会影响性能，因为会增加浏览器负担。所以性能优化考虑，应尽量减少或者避免重绘和回流，所以要尽量减少操作DOM。

具体的方法可以是：
1，使用vue/react等框架，
2，分离读写：
需要注意的是，offsetTop，clientTop,scrollTop,getComputedStyle,currentStyle等，会强制终止浏览器的样式判断。即将以上样式的操作处理代码写在多行样式处理代码之内也会打断浏览器的合并处理，引发多次回流/重绘

//操作
a.style.width = '' ;//浏览器渲染样式时，会停顿一下以判断下一行是否还是处理样式。
//此处连续三行都是处理样式，所以浏览器判断后只会在第三行执行后一起来处理样式。
//所以只会触发一次回流。
//----如果把console插在第一行后面，浏览器判断发现下一行是console，就会触发一次回流。
//再继续往下执行，遇到下面两行处理样式的代码，再合并触发一次回流