如何減少瀏覽器的reflow和repaint
1.避免在document上直接進(jìn)行頻繁的DOM操作，如果確實(shí)需要可以采用off-document的方式進(jìn)行，具體的方法包括但不完全包括以下幾種：
(1). 先將元素從document中刪除，完成修改后再把元素放回原來(lái)的位置
(2). 將元素的display設(shè)置為”none”，完成修改后再把display修改為原來(lái)的值
(3). 如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)，可以使用DocumentFragment創(chuàng)建完后一次性的加入document
2.集中修改樣式
(1). 盡可能少的修改元素style上的屬性
(2). 盡量通過(guò)修改className來(lái)修改樣式
(3). 通過(guò)cssText屬性來(lái)設(shè)置樣式值
3. 緩存Layout屬性值
對(duì)于Layout屬性中非引用類(lèi)型的值（數(shù)字型），如果需要多次訪問(wèn)則可以在一次訪問(wèn)時(shí)先存儲(chǔ)到局部變量中，之后都使用局部變量，這樣可以避免每次讀取屬性時(shí)造成瀏覽器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4.設(shè)置元素的position為absolute或fixed
在元素的position為static和relative時(shí)，元素處于DOM樹(shù)結(jié)構(gòu)當(dāng)中，當(dāng)對(duì)元素的某個(gè)操作需要重新渲染時(shí)，瀏覽器會(huì)渲染整個(gè)頁(yè)面。將元素的position設(shè)置為absolute和fixed可以使元素從DOM樹(shù)結(jié)構(gòu)中脫離出來(lái)獨(dú)立的存在，而瀏覽器在需要渲染時(shí)只需要渲染該元素以及位于該元素下方的元素，從而在某種程度上縮短瀏覽器渲染時(shí)間，這在當(dāng)今越來(lái)越多的Javascript動(dòng)畫(huà)方面尤其值得考慮。
以上就是個(gè)人總結(jié)的一些關(guān)于減少瀏覽器reflow和repaint的事項(xiàng)，希望大家能夠喜歡。
相關(guān)文章
JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12
Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例
這篇文章主要介紹了Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例,本文給出3種實(shí)現(xiàn)版本代碼,同時(shí)給出了Jquery實(shí)現(xiàn)版本,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作,涉及javascript使用sort方法針對(duì)json數(shù)組的遍歷與排序相關(guān)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
本文主要分享了利用canvas畫(huà)多邊形的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js 取時(shí)間差去掉周六周日實(shí)現(xiàn)代碼
js 求時(shí)間差在生活中經(jīng)常會(huì)觸及到，本文整理了一些，希望可以幫助有需求的朋友可以,而起還可以實(shí)現(xiàn)去掉周六周日這些東東，廢話不多說(shuō)，進(jìn)入正題2012-12-12
?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板
這篇文章主要介紹了?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板，利用openHarmony內(nèi)置的API?cnavas組件實(shí)現(xiàn)，具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-07-07
uniapp微信小程序訂閱消息發(fā)送服務(wù)通知超詳細(xì)教程
在使用或開(kāi)發(fā)小程序過(guò)程中,我們會(huì)發(fā)現(xiàn)消息通知是非常重要的一個(gè)環(huán)節(jié),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的相關(guān)資料,需要的朋友可以參考下2023-06-06
JS獲取當(dāng)前時(shí)間的實(shí)例代碼(昨天、今天、明天)
這篇文章主要介紹了JS獲取當(dāng)前時(shí)間的實(shí)例代碼(昨天、今天、明天) ,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了JS+Vue實(shí)現(xiàn)三級(jí)全選單選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例
今天小編就為大家分享一篇layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09