重繪: 由于節點的幾何屬性發生改變或樣式改變,例如元素背景元素,表現為某些元素的外觀被改變
重繪不定導致重排,但重排定繪導致重繪
如何觸發重繪和重排?
任何改變用來構建渲染樹的信息都會導致次重排或重繪:
添加、刪除、更DOM節點
通過display: none隱藏個DOM節點-觸發重排和重繪
通過visibility: hidden隱藏個DOM節點-只觸發重繪,因為沒有幾何變化


移動或者給頁面中的DOM節點添加動畫
添加個樣式表,調整樣式屬性
用戶行為,例如調整窗口大小,改變字號,或者滾動。
如何避免重繪或重排?
集中改變樣式:比如使用class的方式來集中改變樣式
使用document.createDocumentFragment():我們可以通過createDocumentFragment創建個游離于DOM樹之外的節點,然在此節點上批量操作,插入DOM樹中,因此只觸發次重排
提升為合成層
將元素提升為合成層有以下優點:
合成層的位圖,會交由 GPU 合成,比 CPU 處理要快
當需要repaint 時,只需要 repaint 本身,不會影響到其他的層
對于 transform 和 opacity 效果,不會觸發 layout 和 paint
本文的內容是由濟南網絡公司給您提供,我們專注客戶需求,不斷的發展,為客戶提供更多的服務,詳情可參考我們的網站:http://www.44666.com.cn
本文的內容是由濟南網絡公司給您提供,我們專注客戶需求,不斷的發展,為客戶提供更多的服務,詳情可參考我們的網站:http://www.44666.com.cn
魯公網安備37010202000892號