本文實例講述了js防止DIV布局滾動時閃動的方法，分享給大家供大家參考。具體方法如下：
最近接觸頁面性能的東西，有很多細(xì)微又原始的內(nèi)容，比如瀏覽器渲染。資料非常多，所以選一些做節(jié)譯，備忘。
JavaScript多次寫、讀DOM就會發(fā)生「布局顛簸」，引起文檔重排(reflow – the process of constructing a render tree
// 讀
var h1 = element1.clientHeight;
// 寫 (布局作廢)
element1.style.height = (h1 * 2) + 'px';
// 讀 (觸發(fā)布局)
var h2 = element2.clientHeight;
// 寫 (布局作廢)
element2.style.height = (h2 * 2) + 'px';
// 讀 (觸發(fā)布局)
var h3 = element3.clientHeight;
// 寫 (布局作廢)
element3.style.height = (h3 * 2) + 'px';
DOM被寫時，布局就作廢了，需要在某個時間點重排。但瀏覽器很懶，它想等到當(dāng)前操作(或說幀)結(jié)束前再來重排。
不過，如果我們在當(dāng)前操作(或說幀)結(jié)束前從DOM中讀取幾何數(shù)值，那么我們就強制瀏覽器提前重排布局，這就是所謂的「強制同步布局」(forced synchonous layout)，它會要了性能的命。
在現(xiàn)代的桌面瀏覽器上，布局顛簸的副作用可能并不明顯；但放到低端移動設(shè)備上，問題就很嚴(yán)重了。
快速解決辦法
在一個理想世界里，我們只要簡單地重新排列代碼執(zhí)行順序，就可以批量讀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';
// 文檔在幀末重排
現(xiàn)實世界又如何？
現(xiàn)實中可就沒那么簡單。大型程序中，代碼散播各處，個個都存在這類危險的DOM。我們沒法輕松(顯然也不應(yīng)該)把我們漂亮的、解藕的代碼揉合一塊，就只是為了控制住執(zhí)行順序。那么為了優(yōu)化性能，我們怎樣把讀和寫做批量處理？
來認(rèn)識requestAnimationFrame
window.requestAnimationFrame安排一個函數(shù)在下一幀執(zhí)行，類似于setTimout(fn, 0)。這非常有用，因為我們可以用它來排定所有的DOM寫操作在下一幀一同執(zhí)行，DOM讀操作就按現(xiàn)在的順序同步執(zhí)行。
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程序設(shè)計有所幫助。
