浏览器重绘域重排有什么不样的展示？

来源：https://www.chinanovo.net   发布时间：2021-11-04 14:31:26      

重排： 部分渲染树或整个渲染树需要重分析且节点尺寸需要重计算，表现为重生成布局，重排列元素

重绘： 由于节点的几何属性发生改变或样式改变，例如元素背景元素，表现为某些元素的外观被改变

重绘不定导致重排，但重排定绘导致重绘

如何触发重绘和重排？

任何改变用来构建渲染树的信息都会导致次重排或重绘：

添加、删除、更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

上一篇： 企业建站福利,让您的网站形成多功能化使用
下一篇： 移动搜索引擎对于用户的体验更严格！