如何減小瀏覽器的reflow與repaint

1.避免在document上直接進行頻繁的DOM操做，若是確實須要能夠採用off-document的方式進行，具體的方法包括但不徹底包括如下幾種： (1). 先將元素從document中刪除，完成修改後再把元素放回原來的位置 (2). 將元素的display設置爲」none」，完成修改後再把display修改成原來的值 (3). 若是須要建立多個DOM節點，可使用DocumentFragment建立完後一次性的加入document 2.集中修改樣式 (1). 儘量少的修改元素style上的屬性 (2). 儘可能經過修改className來修改樣式 (3). 經過cssText屬性來設置樣式值 3. 緩存Layout屬性值 對於Layout屬性中非引用類型的值（數字型），若是須要屢次訪問則能夠在一次訪問時先存儲到局部變量中，以後都使用局部變量，這樣能夠避免每次讀取屬性時形成瀏覽器的渲染。 var width = el.offsetWidth; var scrollLeft = el.scrollLeft; 4.設置元素的position爲absolute或fixed 在元素的position爲static和relative時，元素處於DOM樹結構當中，當對元素的某個操做須要從新渲染時，瀏覽器會渲染整個頁面。將元素的position設置爲absolute和fixed可使元素從DOM樹結構中脫離出來獨立的存在，而瀏覽器在須要渲染時只須要渲染該元素以及位於該元素下方的元素，從而在某種程度上縮短瀏覽器渲染時間，這在當今愈來愈多的Javascript動畫方面尤爲值得考慮。