如何减少浏览器repaint和reflow（中）

最新推荐文章于 2022-11-06 20:43:59 发布

原创最新推荐文章于 2022-11-06 20:43:59 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #任务 #layout #脚本 #优化

前端技术专栏收录该内容

17 篇文章

订阅专栏

本文探讨了浏览器渲染机制，特别是如何通过调整代码逻辑减少不必要的repaint和reflow操作，以此提高网页性能。文中提供了两种不同的代码示例来说明最佳实践。

三、浏览器优化

浏览器对于每一个渲染动作并不是立即执行，而是维护了一个渲染任务队列，浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外，脚本中的某些操作会导致浏览器立即执行渲染任务，例如读取元素的Layout属性。

var bodystyle = document.body.style;
var computed;
if (document.body.currentStyle) {
  computed = document.body.currentStyle;
} else {
  computed = document.defaultView.getComputedStyle(document.body, '');
}

//每次都读取

bodystyle.color = 'red';
bodystyle.padding = '1px';
tmp = computed.backgroundColor;
bodystyle.color = 'white';
bodystyle.padding = '2px';
tmp = computed.backgroundImage;
bodystyle.color = 'green';
bodystyle.padding = '3px';
tmp = computed.backgroundAttachment;

//最后再读取

bodystyle.color = 'yellow';
bodystyle.padding = '4px';
bodystyle.color = 'pink';
bodystyle.padding = '5px';
bodystyle.color = 'blue';
bodystyle.padding = '6px';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;

每次读取的渲染图：