重繪： 由于節(jié)點(diǎn)的幾何屬性發(fā)生改變或樣式改變，例如元素背景元素，表現(xiàn)為某些元素的外觀被改變
重繪不定導(dǎo)致重排，但重排定繪導(dǎo)致重繪
如何觸發(fā)重繪和重排？
任何改變用來(lái)構(gòu)建渲染樹(shù)的信息都會(huì)導(dǎo)致次重排或重繪：
添加、刪除、更DOM節(jié)點(diǎn)
通過(guò)display: none隱藏個(gè)DOM節(jié)點(diǎn)-觸發(fā)重排和重繪
通過(guò)visibility: hidden隱藏個(gè)DOM節(jié)點(diǎn)-只觸發(fā)重繪，因?yàn)闆](méi)有幾何變化
移動(dòng)或者給頁(yè)面中的DOM節(jié)點(diǎn)添加動(dòng)畫(huà)
添加個(gè)樣式表，調(diào)整樣式屬性
用戶行為，例如調(diào)整窗口大小，改變字號(hào)，或者滾動(dòng)。
如何避免重繪或重排？
集中改變樣式：比如使用class的方式來(lái)集中改變樣式
使用document.createDocumentFragment()：我們可以通過(guò)createDocumentFragment創(chuàng)建個(gè)游離于DOM樹(shù)之外的節(jié)點(diǎn)，然在此節(jié)點(diǎn)上批量操作，插入DOM樹(shù)中，因此只觸發(fā)次重排
提升為合成層
將元素提升為合成層有以下優(yōu)點(diǎn)：
合成層的位圖，會(huì)交由 GPU 合成，比 CPU 處理要快
當(dāng)需要repaint 時(shí)，只需要 repaint 本身，不會(huì)影響到其他的層
對(duì)于 transform 和 opacity 效果，不會(huì)觸發(fā) layout 和 paint
本文的內(nèi)容是由濟(jì)南網(wǎng)絡(luò)公司給您提供，我們專注客戶需求，不斷的發(fā)展，為客戶提供更多的服務(wù)，詳情可參考我們的網(wǎng)站：http://m.hfjtr.cn
本文的內(nèi)容是由濟(jì)南網(wǎng)絡(luò)公司給您提供，我們專注客戶需求，不斷的發(fā)展，為客戶提供更多的服務(wù)，詳情可參考我們的網(wǎng)站：http://m.hfjtr.cn
魯公網(wǎng)安備37010202000892號(hào)