js防止DIV版面滾動時閃爍的解決方法_javascript技巧

本文實例講述了js防止DIV版面滾動時閃爍的方法，分享給大家供大家參考。具體方法如下：

最近接觸頁面效能的東西，有很多細微又原始的內容，像是瀏覽器渲染。資料非常多，所以選一些做節譯，備忘。
JavaScript多次寫、讀DOM就會發生「佈局顛簸」，引起文件重排(reflow – the process of constructing a render tree

複製程式碼 程式碼如下:

from a DOM tree1)。
// 讀
var h1 = element1.clientHeight;
// 寫入 (版面作廢)
element1.style.height = (h1 * 2) 'px';
// 讀 (觸發版面)
var h2 = element2.clientHeight;
// 寫入 (版面作廢)
element2.style.height = (h2 * 2) 'px';
// 讀 (觸發版面)
var h3 = element3.clientHeight;
// 寫入 (版面作廢)
element3.style.height = (h3 * 2) 'px';

DOM被寫時，版面就作廢了，需要在某個時間點重排。但瀏覽器很懶，它想等到目前操作(或說幀)結束前再來重排。
不過，如果我們在當前操作(或說幀)結束前從DOM中讀取幾何數值，那麼我們就強制瀏覽器提前重排佈局，這就是所謂的「強制同步佈局」(forced synchonous layout)，它會要了性能的命。
在現代的桌面瀏覽器上，佈局顛簸的副作用可能並不明顯；但放到低端行動裝置上，問題就很嚴重了。

快速解決方法

在一個理想世界裡，我們只要簡單地重新排列程式碼執行順序，就可以批次讀DOM、批次寫DOM。這意味著，文件只需一次重排。

複製程式碼 程式碼如下:

// 讀取
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// 寫入 (版面作廢)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// 文檔在幀末重排

現實世界又如何？

現實中可就沒那麼簡單。大型程式中，程式碼散播各處，個個都存在這類危險的DOM。我們沒辦法輕鬆(顯然也不應該)把我們漂亮的、解藕的程式碼揉合一塊，就只是為了控制住執行順序。那麼為了優化效能，我們怎麼把讀和寫做批量處理？

來認識requestAnimationFrame

window.requestAnimationFrame安排一個函數在下一幀執行，類似setTimout(fn, 0)。這非常有用，因為我們可以用它來排定所有的DOM寫操作在下一幀一同執行，DOM讀取操作就按現在的順序同步執行。

複製程式碼 程式碼如下:

// 讀取
var h1 = element1.clientHeight;
// 寫
requestAnimationFrame(function() {
  element1.style.height = (h1 * 2) 'px';
});
// 讀
var h2 = element2.clientHeight;
// 寫
requestAnimationFrame(function() {
  element2.style.height = (h2 * 2) 'px';
});
……

希望本文所述對大家基於javascript的web程式設計有所幫助。