重绘: 由于节点的几何属性发生改变或样式改变,例如元素背景元素,表现为某些元素的外观被改变
重绘不定导致重排,但重排定绘导致重绘
如何触发重绘和重排?
任何改变用来构建渲染树的信息都会导致次重排或重绘:
添加、删除、更DOM节点
通过display: none隐藏个DOM节点-触发重排和重绘
通过visibility: hidden隐藏个DOM节点-只触发重绘,因为没有几何变化
移动或者给页面中的DOM节点添加动画
添加个样式表,调整样式属性
用户行为,例如调整窗口大小,改变字号,或者滚动。
如何避免重绘或重排?
集中改变样式:比如使用class的方式来集中改变样式
使用document.createDocumentFragment():我们可以通过createDocumentFragment创建个游离于DOM树之外的节点,然在此节点上批量操作,插入DOM树中,因此只触发次重排
提升为合成层
将元素提升为合成层有以下优点:
合成层的位图,会交由 GPU 合成,比 CPU 处理要快
当需要repaint 时,只需要 repaint 本身,不会影响到其他的层
对于 transform 和 opacity 效果,不会触发 layout 和 paint
本文的内容是由济南网络公司给您提供,我们专注客户需求,不断的发展,为客户提供更多的服务,详情可参考我们的网站:https://www.chinanovo.net
本文的内容是由济南网络公司给您提供,我们专注客户需求,不断的发展,为客户提供更多的服务,详情可参考我们的网站:https://www.chinanovo.net