js防止DIV布局滾動時閃動的解決方法
本文實例講述了js防止DIV布局滾動時閃動的方法,分享給大家供大家參考。具體方法如下:
最近接觸頁面性能的東西,有很多細微又原始的內(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被寫時,布局就作廢了,需要在某個時間點重排。但瀏覽器很懶,它想等到當前操作(或說幀)結(jié)束前再來重排。
不過,如果我們在當前操作(或說幀)結(jié)束前從DOM中讀取幾何數(shù)值,那么我們就強制瀏覽器提前重排布局,這就是所謂的「強制同步布局」(forced synchonous layout),它會要了性能的命。
在現(xiàn)代的桌面瀏覽器上,布局顛簸的副作用可能并不明顯;但放到低端移動設(shè)備上,問題就很嚴重了。
快速解決辦法
在一個理想世界里,我們只要簡單地重新排列代碼執(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)化性能,我們怎樣把讀和寫做批量處理?
來認識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è)計有所幫助。
- div+css布局的圖片連續(xù)滾動js實現(xiàn)代碼
- div+css+js實現(xiàn)無縫滾動類似marquee無縫滾動兼容firefox
- js DIV滾動條隨機位置的設(shè)置技巧
- JS實現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動代碼
- DIV+CSS+JS不間斷橫向滾動實現(xiàn)代碼
- 分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼
- javascript用DIV模擬彈出窗口_窗體滾動跟隨
- Javascript實現(xiàn)DIV滾動自動滾動到底部的代碼
- js+div實現(xiàn)圖片滾動效果代碼
- js固定DIV高度,超出部分自動添加滾動條的簡單方法
- js+div實現(xiàn)文字滾動和圖片切換效果代碼
- 基于JavaScript實現(xiàn)div層跟隨滾動條滑動
- JS實現(xiàn)的DIV塊來回滾動效果示例
相關(guān)文章
JS結(jié)合WebSocket實現(xiàn)實時雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實現(xiàn)實時、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實際應(yīng)用場景,x需要的可以參考下2023-11-11ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構(gòu)應(yīng)用,結(jié)合實例形式分析了ES6函數(shù)對象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04javascript利用控件對windows的操作實現(xiàn)原理與應(yīng)用
假如要發(fā)送漢字的聊天框的內(nèi)容的話,我們也要從windows消息機制下手,先找到聊天消息的句柄(可以利用findwindow函數(shù)或者用spy工具哈),然后在找到上面的聊天框的句柄,接著我們就可以想這個句柄發(fā)送WM_SETTEXT的消息了2012-12-12javascript實現(xiàn)下班倒計時效果的方法(可桌面通知)
這篇文章主要介紹了javascript實現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實現(xiàn)技巧,具有一定參考借鑒價值2015-07-07解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問題
今天小編就為大家分享一篇解決layui-table單元格設(shè)置為百分比在ie8下不能自適應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09