浏覽器重繪域重排有什麼(me)不樣的展示？

來源：https://www.chinanovo.net   發(fā)布時間：2021-11-04 14:31:26      

重排： 部分渲染樹或整個渲染樹需要重分析且節點尺寸需要重計算，表現爲重生成(chéng)布局，重排列元素

重繪： 由于節點的幾何屬性發(fā)生改變或樣式改變，例如元素背景元素，表現爲某些元素的外觀被改變

重繪不定導緻重排，但重排定繪導緻重繪

如何觸發(fā)重繪和重排？

任何改變用來構建渲染樹的信息都(dōu)會導緻次重排或重繪：

添加、删除、更DOM節點

通過(guò)display: none隐藏個DOM節點-觸發(fā)重排和重繪

通過(guò)visibility: hidden隐藏個DOM節點-隻觸發(fā)重繪，因爲沒(méi)有幾何變化

移動或者給頁面(miàn)中的DOM節點添加動畫

添加個樣式表，調整樣式屬性

用戶行爲，例如調整窗口大小，改變字号，或者滾動。

如何避免重繪或重排？

集中改變樣式：比如使用class的方式來集中改變樣式

使用document.createDocumentFragment()：我們可以通過(guò)createDocumentFragment創建個遊離于DOM樹之外的節點，然在此節點上批量操作，插入DOM樹中，因此隻觸發(fā)次重排

提升爲合成(chéng)層

將(jiāng)元素提升爲合成(chéng)層有以下優點：

合成(chéng)層的位圖，會交由 GPU 合成(chéng)，比 CPU 處理要快

當需要repaint 時，隻需要 repaint 本身，不會影響到其他的層

對(duì)于 transform 和 opacity 效果，不會觸發(fā) layout 和 paint
本文的内容是由濟南網絡公司給您提供，我們專注客戶需求，不斷的發(fā)展，爲客戶提供更多的服務，詳情可參考我們的網站：https://www.chinanovo.net

上一篇： 企業建站福利,讓您的網站形成(chéng)多功能(néng)化使用
下一篇： 移動搜索引擎對(duì)于用戶的體驗更嚴格！