重排（reflow）：当一个元素的位置、尺寸等发生改变的时候，浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程叫做重排。一般像页面初次渲染、带有动画的元素、添加或删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发重排。重排也叫回流。
重绘（Repaint）：重绘是指浏览器在不改变布局的情况下，更新页面上的元素的外观，例如改变颜色、背景、边框等。重绘不涉及改变元素的位置或大小，仅仅是重新绘制元素的外观。相对于重排，重绘是一项较为轻量的操作。
总之：重排一定会触发重绘，而重绘可以单独发生，不一定伴随重排。
- 使用类名批量修改样式：将要进行样式更改的元素添加/删除CSS类，而不是直接操作样式属性，可以将多个更改合并到一次重排和重绘中。
- 使用文档片段：如果需要频繁地向页面中添加大量DOM节点，可以先将他们添加到文档片段中，最后再统一插入文档中，这样可以减少回流的次数。
- 避免频繁查询布局信息：在JavaScript中避免频繁查询布局信息，如‘offsetWidth'和’offsetHeight
- 使用CSS Grid和Flex布局：使用Grid和Flex布局可以减少对元素位置的频繁调整，从而减少重排
- 使用CSS动画和过渡：在需要实现动画效果时，使用CSS动画和过渡，而不是JavaScript来操作元素样式。
- 使用GPU加速提升网站的动画渲染性能：transform:translateZ(0);或transform：translate3d(0,0,0)
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/20512.html