重绘与回流

理解渲染树与重绘回流

最新推荐文章于 2025-03-26 15:06:52 发布

转载最新推荐文章于 2025-03-26 15:06:52 发布 · 81 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c890514e51d4560fd3eacb2

本文深入探讨了网页渲染过程中的关键概念——渲染树的生成，以及重绘与回流的区别和联系。详细解释了如何通过DOM树和CSS树生成渲染树，并提出了减少重绘与回流的方法，包括使用DOM离线操作、复杂动画效果的绝对定位等技巧。

元素做了一些不影响页面的重新排版操作，例如： 背景色的改变，添加删除下滑线等等
复制代码

元素大小， 尺寸，位置发生了变化导致重新计算渲染树，页面重新排版
复制代码

回流一定是重绘， 重绘不一定是回流
复制代码

将要修改多个样式，定义成一个class类
使用dom离线操作：在documentfragment对象内存里操作dom;在把dom display:none进行隐藏，改完以后进行操作，clone一个dom到节点内存里，改完之后进行在线交换
对于复杂的动画效果，进行绝对定位，或者absolute定位

转载于:https://juejin.im/post/5c890514e51d4560fd3eacb2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。