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

三、浏览器优化

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

1. 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; 

每次读取的渲染图：

 

 

 

最后读取的渲染图： 

 

 

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

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

  

【本文首发于： 百度互联网技术官方博客】 http://blog.csdn.net/baiduforum/article/details/5416337

【 关注百度技术沙龙】

本文转自百度技术51CTO博客，原文链接：http://blog.51cto.com/baidutech/744793 ，如需转载请自行联系原作者