如何减少浏览器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;

每次读取的渲染图：

 

 

最后读取的渲染图：

 

 

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

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