js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
本文實(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
// 讀
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)題就很嚴(yán)重了。
快速解決辦法
在一個(gè)理想世界里，我們只要簡(jiǎn)單地重新排列代碼執(zhí)行順序，就可以批量讀DOM、批量寫(xiě)DOM。這意味著，文檔只需一次重排。
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è)都存在這類危險(xiǎn)的DOM。我們沒(méi)法輕松(顯然也不應(yīng)該)把我們漂亮的、解藕的代碼揉合一塊，就只是為了控制住執(zhí)行順序。那么為了優(yōu)化性能，我們?cè)鯓影炎x和寫(xiě)做批量處理？
來(lái)認(rèn)識(shí)requestAnimationFrame
window.requestAnimationFrame安排一個(gè)函數(shù)在下一幀執(zhí)行，類似于setTimout(fn, 0)。這非常有用，因?yàn)槲覀兛梢杂盟鼇?lái)排定所有的DOM寫(xiě)操作在下一幀一同執(zhí)行，DOM讀操作就按現(xiàn)在的順序同步執(zhí)行。
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ì)有所幫助。
- div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼
- div+css+js實(shí)現(xiàn)無(wú)縫滾動(dòng)類似marquee無(wú)縫滾動(dòng)兼容firefox
- js DIV滾動(dòng)條隨機(jī)位置的設(shè)置技巧
- JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
- DIV+CSS+JS不間斷橫向滾動(dòng)實(shí)現(xiàn)代碼
- 分別用marquee和div+js實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果，僅3行代碼
- javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
- Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
- js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
- js固定DIV高度,超出部分自動(dòng)添加滾動(dòng)條的簡(jiǎn)單方法
- js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
- 基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)
- JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果示例
相關(guān)文章
JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(yīng)用場(chǎng)景,x需要的可以參考下2023-11-11
在本文中,我試圖以最簡(jiǎn)潔的方式來(lái)闡明JavaScript編程原理中對(duì)象類型賦值和原生類型賦值之間的區(qū)別,以及它們各自是如何工作的,感興趣的朋友跟隨小編一起看看吧2023-09-09
本文給大家詳細(xì)介紹了JavaScript中的六種錯(cuò)誤類型,需要的朋友可以參考下2017-09-09
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當(dāng)原理也比較簡(jiǎn)單。2010-04-04
ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)對(duì)象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04
javascript利用控件對(duì)windows的操作實(shí)現(xiàn)原理與應(yīng)用
假如要發(fā)送漢字的聊天框的內(nèi)容的話，我們也要從windows消息機(jī)制下手，先找到聊天消息的句柄（可以利用findwindow函數(shù)或者用spy工具哈），然后在找到上面的聊天框的句柄，接著我們就可以想這個(gè)句柄發(fā)送WM_SETTEXT的消息了2012-12-12
js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法(可桌面通知)
這篇文章主要介紹了javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法,涉及javascript倒計(jì)時(shí)效果及桌面提示效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值2015-07-07
解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問(wèn)題
今天小編就為大家分享一篇解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JSLint提高JS代碼質(zhì)量的方法，有需要的朋友可以參考一下2013-12-12