读书笔记 --- 再次阅读回流与重绘
參考 - 強(qiáng)烈推薦看看,這個(gè)作者寫了很多特別好的文章.
瀏覽器渲染過程
生成渲染樹
為了構(gòu)建渲染樹,瀏覽器主要完成了以下工作:
【不可見的節(jié)點(diǎn)】:
- 一些不會(huì)渲染輸出的節(jié)點(diǎn): 比如script、meta、link等
- 一些通過css進(jìn)行隱藏的節(jié)點(diǎn)。比如display: none。注意,利用visibility和opacity隱藏的節(jié)點(diǎn),還是會(huì)顯示在渲染樹上的。只有display:none的節(jié)點(diǎn)才不會(huì)顯示在渲染樹上
【注意】: 渲染樹只包括可見的節(jié)點(diǎn)
回流(Layout)
前面將DOM節(jié)點(diǎn)以及它對(duì)應(yīng)的樣式結(jié)合起來,可是我們還需要計(jì)算它們?cè)谠O(shè)備視口(viewport)內(nèi)的確切位置和大小,這個(gè)計(jì)算的階段就是回流。看下面的栗子:
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width,initial-scale=1"><title>Cretical Path: Hello Marron!</title></head><body><div style="width: 50%"><div style="width: 50%">Hi Marron, best wish!</div></div></body> </html>我們可以看到,第一個(gè)div將節(jié)點(diǎn)的顯示尺寸設(shè)置為視口寬度的50%,第二個(gè)div將其尺寸設(shè)置為父節(jié)點(diǎn)的50%.而在回流這個(gè)階段,我們就需要根據(jù)視口具體的寬度,將其轉(zhuǎn)為實(shí)際的像素值。
?
重繪 (Painting)
- 生成渲染樹階段: 我們直到了哪些節(jié)點(diǎn)是可見的以及可見節(jié)點(diǎn)的樣式
- 在回流階段: 我們得到了可見元素的具體幾何信息
我們得到的信息,最終都會(huì)托付給GPU進(jìn)行渲染
GPU的渲染需要具體的像素位置,這就是重繪階段所做的事情： 根據(jù)渲染樹和幾何信息計(jì)算出絕對(duì)像素點(diǎn).
何時(shí)發(fā)生回流重繪
回流主要是計(jì)算節(jié)點(diǎn)的幾何位置和幾何像素大小.那么當(dāng)頁面布局和幾何信息發(fā)生變化的時(shí)候,就需要回流:
- 添加或刪除可見的DOM元素
- 元素的位置發(fā)生變化
- 元素的尺寸發(fā)生變化(內(nèi)/外邊距、邊框大小、高度和寬度等)
- 內(nèi)容發(fā)生: 文本發(fā)生變化或圖片被另一個(gè)不同尺寸的圖片所替代
- 頁面剛開始渲染的時(shí)候
- 瀏覽器的窗口尺寸變化: 回流是根據(jù)視口的大小來計(jì)算元素的位置和大小的
經(jīng)典老話: 回流一定重繪,重繪不一定回流
瀏覽器的優(yōu)化機(jī)制
現(xiàn)代的瀏覽器都是很聰明的,由于每次重排都會(huì)造成造成額外的計(jì)算消耗,因此大多數(shù)瀏覽器都會(huì)通過隊(duì)列修改、批量執(zhí)行來優(yōu)化重排過程。瀏覽器會(huì)將修改操作放在隊(duì)列里,直到過了一段時(shí)間,或者操作達(dá)到一個(gè)閾值,才清空隊(duì)列。
還有一些強(qiáng)制刷新的屬性(避免使用):
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect
- …
前端優(yōu)化
1 -【并多次的DOM和添加樣式】
// 未優(yōu)化前 - 3次 const el = document.getElementById('test') el.style.padding = '5px'; el.style.borderLeft = '1px'; el.style.borderRight = '2px';// 合并樣式 - 1次 const el = document.getElementById('test'); el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px'// 添加樣式 - 1次 const el = document.getElementById('test'); el.calssName += ' active';2 -【脫離文檔流】
當(dāng)元素脫離文檔流后,對(duì)元素的所有操作都不會(huì)引起回流和重繪.因此如果,對(duì)某個(gè)元素進(jìn)行的DOM操作比較多的時(shí)候,可以先將元素脫離文檔流,然后操作,最后在放回文檔流。具體操作如下:
[注] : 上述的1、3會(huì)引起回流和重繪.
【脫離文檔流的方法】
- 隱藏元素,修改應(yīng)用,重新顯示
- 使用文檔片段(document fragment)在使用DOM之外構(gòu)建一個(gè)子樹,再把它拷貝回文檔
- 將原始元素拷貝到一個(gè)脫離文檔的節(jié)點(diǎn)中,修改節(jié)點(diǎn)后,再替換原始的元素。
[隱藏元素]
// 僅在隱藏元素和現(xiàn)實(shí)元素時(shí)產(chǎn)生2次回流和重繪 function appendDataToElement(appendToElement, data) {let li;for(let i =0, len = data.length; i < len; i++){li = document.createElement('li');li.textContent = 'text';appendTOElement.appendChild(li);} }const ul = document.getElementById('list'); ul.style.display = 'none'; appendDataToElement(ul, data); ul.style.display = 'block';[使用文檔片段] - 在當(dāng)前DOM外構(gòu)建一個(gè)子樹,再把它拷貝回文檔
const ul = document.getElementById('list'); const fragment = document.createDocumentFragment(); appendDataToElement(fragment, data); up.appendChild(fragment);[脫離文檔] - 將原始元素拷貝到一個(gè)脫離文檔的節(jié)點(diǎn)中,修改節(jié)點(diǎn),再替換原始的元素。
const ul = document.getElementById('list'); const clone = ul.cloneNode(true); appendDataToElement(clone, data); ul.parentNode.replaceChild(clone, ul);[注] - 現(xiàn)代瀏覽器使用了隊(duì)列來存儲(chǔ)多次修改,因此上述的優(yōu)化可能效果不是很理想.
3 - 【避免觸發(fā)同步布局事件】
// 栗子: 多次使用到 offsetWidth 屬性 function initP(){for(let i = 0; i< paragraph.length; i++){paragraph[i].style.width = box.offsetWidth + 'px'} }上述代碼每次循環(huán),都會(huì)使瀏覽器強(qiáng)制刷新隊(duì)列(box.offsetWidth),造成多次回流和重繪.改進(jìn)如下:
const width = box.offsetWidth; function initP(){for(let i = 0; i < paragraph.length; i++){paragraph[i].style.width = width + 'px'} }4 - 【復(fù)雜動(dòng)畫的優(yōu)化】
對(duì)于復(fù)雜動(dòng)畫效果,由于會(huì)經(jīng)常的引起回流和重繪。因此,我們可以使用絕對(duì)定位,讓它脫離文檔流。否則會(huì)引起父元素以及后續(xù)元素頻繁的回流 - 栗子
總結(jié)
以上是生活随笔為你收集整理的读书笔记 --- 再次阅读回流与重绘的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTTP --- HTTP2小结
- 下一篇： NSGA_2总结梳理附代码按行详细注解