重绘和回流可能会导致哪些性能问题？【web前端】

重绘(Repaint)和回流(Reflow)是我们在页面优化的过程中需要着重关注的问题，重绘和回流渲染步骤中的一小节，但是这两个步骤对于性能影响很大。本节我们来看看重绘和回流过程中可能会导致性能问题。

重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘回流是布局或者几何属性需要改变就称为回流。回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

改变 window 大小改变字体添加或删除样式文字改变定位或者浮动盒模型很多人不知道的是，重绘和回流其实和 Event loop 有关。

当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。然后判断是否有 resize或者 scroll，有的话会去触发事件，所以 resize和 scroll事件也是至少 16ms 才会触发一次，并且自带节流功能。判断是否触发了 media query更新动画并且发送事件判断是否有全屏操作事件执行 requestAnimationFrame回调执行 IntersectionObserver回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好更新界面以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调。

猜你喜欢：

Cookie、sessionStorage、localStorage的区别

网页性能优化方法有哪些？

前端开发工程师：优化图片加载和提升用户体验

黑马程序员前端与移动开发工程师培训