三、浏览器优化

浏览器对于每一个渲染动作并不是立即执行,而是维护了一个渲染任务队列,浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外,脚本中的某些操作会导致浏览器立即执行渲染任务,例如读取元素的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(中)_如何减少_02

 

如何减少浏览器repaint和reflow(上)

如何减少浏览器repaint和reflow(下)