減少回流與重繪的措施:
操作DOM時,盡量在低層級的DOM節點進行操作不要使用table布局, 一個小的改動可能會使整個table進行重新布局使用CSS的表達式不要頻繁操作元素的樣式,對于靜態頁面,可以修改類名,而不是樣式。使用absolute或者fixed,使元素脫離文檔流,這樣他們發生變化就不會影響其他元素避免頻繁操作DOM,可以創建一個文檔片段documentFragment,在它上面應用所有DOM操作,最后再把它添加到文檔中將元素先設置display: none,操作結束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發回流和重繪。將DOM的多個讀操作(或者寫操作)放在一起,而不是讀寫操作穿插著寫。這得益于瀏覽器的渲染隊列機制。
瀏覽器針對頁面的回流與重繪,進行了自身的優化——渲染隊列
瀏覽器會將所有的回流、重繪的操作放在一個隊列中,當隊列中的操作到了一定的數量或者到了一定的時間間隔,瀏覽器就會對隊列進行批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。
上面,將多個讀操作(或者寫操作)放在一起,就會等所有的讀操作進入隊列之后執行,這樣,原本應該是觸發多次回流,變成了只觸發一次回流。