千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何避免回流與重繪?

如何避免回流與重繪?

來源:千鋒教育
發布人:wjy
時間: 2022-09-07 16:58:01 1662541081

減少回流與重繪的措施:

操作DOM時,盡量在低層級的DOM節點進行操作不要使用table布局, 一個小的改動可能會使整個table進行重新布局使用CSS的表達式不要頻繁操作元素的樣式,對于靜態頁面,可以修改類名,而不是樣式。使用absolute或者fixed,使元素脫離文檔流,這樣他們發生變化就不會影響其他元素避免頻繁操作DOM,可以創建一個文檔片段documentFragment,在它上面應用所有DOM操作,最后再把它添加到文檔中將元素先設置display: none,操作結束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發回流和重繪。將DOM的多個讀操作(或者寫操作)放在一起,而不是讀寫操作穿插著寫。這得益于瀏覽器的渲染隊列機制。

瀏覽器針對頁面的回流與重繪,進行了自身的優化——渲染隊列

瀏覽器會將所有的回流、重繪的操作放在一個隊列中,當隊列中的操作到了一定的數量或者到了一定的時間間隔,瀏覽器就會對隊列進行批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

上面,將多個讀操作(或者寫操作)放在一起,就會等所有的讀操作進入隊列之后執行,這樣,原本應該是觸發多次回流,變成了只觸發一次回流。

如何避免回流與重繪?

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
亚洲欧美人成在线 | 中文字幕在线免费观看一区 | 亚洲尤物在线精品一区 | 在线免费激情视频 | 中文字幕无线观看中文字幕 | 中国人手机在线观看 |