快捷導(dǎo)航

js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法

更新時(shí)間：2014年10月30日 09:37:33 投稿：shichen2014

這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過(guò)js的window.requestAnimationFrame來(lái)解決這一問(wèn)題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的方法，分享給大家供大家參考。具體方法如下：

最近接觸頁(yè)面性能的東西，有很多細(xì)微又原始的內(nèi)容，比如瀏覽器渲染。資料非常多，所以選一些做節(jié)譯，備忘。
JavaScript多次寫(xiě)、讀DOM就會(huì)發(fā)生「布局顛簸」，引起文檔重排(reflow – the process of constructing a render tree

復(fù)制代碼代碼如下:

from a DOM tree1)。

// 讀

var h1 = element1.clientHeight;

// 寫(xiě) (布局作廢)

element1.style.height = (h1 * 2) + 'px';

// 讀 (觸發(fā)布局)

var h2 = element2.clientHeight;

// 寫(xiě) (布局作廢)

element2.style.height = (h2 * 2) + 'px';

// 讀 (觸發(fā)布局)

var h3 = element3.clientHeight;

// 寫(xiě) (布局作廢)

element3.style.height = (h3 * 2) + 'px';

DOM被寫(xiě)時(shí)，布局就作廢了，需要在某個(gè)時(shí)間點(diǎn)重排。但瀏覽器很懶，它想等到當(dāng)前操作(或說(shuō)幀)結(jié)束前再來(lái)重排。
不過(guò)，如果我們?cè)诋?dāng)前操作(或說(shuō)幀)結(jié)束前從DOM中讀取幾何數(shù)值，那么我們就強(qiáng)制瀏覽器提前重排布局，這就是所謂的「強(qiáng)制同步布局」(forced synchonous layout)，它會(huì)要了性能的命。
在現(xiàn)代的桌面瀏覽器上，布局顛簸的副作用可能并不明顯；但放到低端移動(dòng)設(shè)備上，問(wèn)題就很?chē)?yán)重了。

快速解決辦法

在一個(gè)理想世界里，我們只要簡(jiǎn)單地重新排列代碼執(zhí)行順序，就可以批量讀DOM、批量寫(xiě)DOM。這意味著，文檔只需一次重排。

復(fù)制代碼代碼如下:

// 讀

var h1 = element1.clientHeight;

var h2 = element2.clientHeight;

var h3 = element3.clientHeight;

// 寫(xiě) (布局作廢)

element1.style.height = (h1 * 2) + 'px';

element2.style.height = (h2 * 2) + 'px';

element3.style.height = (h3 * 2) + 'px';

// 文檔在幀末重排

現(xiàn)實(shí)世界又如何？

現(xiàn)實(shí)中可就沒(méi)那么簡(jiǎn)單。大型程序中，代碼散播各處，個(gè)個(gè)都存在這類(lèi)危險(xiǎn)的DOM。我們沒(méi)法輕松(顯然也不應(yīng)該)把我們漂亮的、解藕的代碼揉合一塊，就只是為了控制住執(zhí)行順序。那么為了優(yōu)化性能，我們?cè)鯓影炎x和寫(xiě)做批量處理？

來(lái)認(rèn)識(shí)requestAnimationFrame

window.requestAnimationFrame安排一個(gè)函數(shù)在下一幀執(zhí)行，類(lèi)似于setTimout(fn, 0)。這非常有用，因?yàn)槲覀兛梢杂盟鼇?lái)排定所有的DOM寫(xiě)操作在下一幀一同執(zhí)行，DOM讀操作就按現(xiàn)在的順序同步執(zhí)行。

復(fù)制代碼代碼如下:

// 讀

var h1 = element1.clientHeight;

// 寫(xiě)

requestAnimationFrame(function() {

  element1.style.height = (h1 * 2) + 'px';

});

// 讀

var h2 = element2.clientHeight;

// 寫(xiě)

requestAnimationFrame(function() {

  element2.style.height = (h2 * 2) + 'px';

});

……

希望本文所述對(duì)大家基于javascript的web程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: