本文目錄結(jié)構(gòu)

問題

瀏覽器渲染原理

渲染過程

1. 瀏覽器接收到 HTML ?件并轉(zhuǎn)換為 DOM 樹

當(dāng)我們打開?個??時，瀏覽器都會去請求對應(yīng)的 HTML ?件。雖然平時我 們寫代碼時都會分為 JS 、 CSS 、 HTML ?件，也就是字符串，但是計算機(jī) 硬件是不理解這些字符串的，所以在?絡(luò)中傳輸?shù)膬?nèi)容其實都是 0 和 1 這些字節(jié)數(shù)據(jù)。當(dāng)瀏覽器接收到這些字節(jié)數(shù)據(jù)以后，它會將這些字節(jié)數(shù)據(jù)轉(zhuǎn)換為 字符串，也就是我們寫的代碼。

當(dāng)數(shù)據(jù)轉(zhuǎn)換為字符串以后，瀏覽器會先將這些字符串通過詞法分析轉(zhuǎn)換為標(biāo)記 ( token )，這?過程在詞法分析中叫做標(biāo)記化( tokenization )

那么什么是標(biāo)記呢？這其實屬于編譯原理這?塊的內(nèi)容了。簡單來說，標(biāo)記還 是字符串，是構(gòu)成代碼的最?單位。這?過程會將代碼分拆成?塊塊，并給這 些內(nèi)容打上標(biāo)記，便于理解這些最?單位的代碼是什么意思

當(dāng)結(jié)束標(biāo)記化后，這些標(biāo)記會緊接著轉(zhuǎn)換為 Node ，最后這些 Node 會根據(jù) 不同 Node 之前的聯(lián)系構(gòu)建為?顆 DOM 樹

以上就是瀏覽器從?絡(luò)中接收到 HTML ?件然后?系列的轉(zhuǎn)換過程 當(dāng)然，在解析 HTML ?件的時候，瀏覽器還會遇到 CSS 和 JS ?件，這時 候瀏覽器也會去下載并解析這些?件，接下來就讓我們先來學(xué)習(xí)瀏覽器如何解 析 CSS ?件

2. 將 CSS ?件轉(zhuǎn)換為 CSSOM 樹

其實轉(zhuǎn)換 CSS 到 CSSOM 樹的過程和上??節(jié)的過程是極其類似的

在這?過程中，瀏覽器會確定下每?個節(jié)點的樣式到底是什么，并且這?過程其實是很消 耗資源的。因為樣式你可以??設(shè)置給某個節(jié)點，也可以通過繼承獲得。在這?過程中， 瀏覽器得遞歸 CSSOM 樹，然后確定具體的元素到底是什么樣式。

如果你有點不理解為什么會消耗資源的話，我這?舉個例?

span {

color: red;

}

div > a > span {

color: red;

}

對于第?種設(shè)置樣式的?式來說，瀏覽器只需要找到??中所有的 span 標(biāo) 簽然后設(shè)置顏?，但是對于第?種設(shè)置樣式的?式來說，瀏覽器?先需要找到 所有的 span 標(biāo)簽，然后找到 span 標(biāo)簽上的 a 標(biāo)簽，最后再去找到 div 標(biāo)簽，然后給符合這種條件的 span 標(biāo)簽設(shè)置顏?，這樣的遞歸過程 就很復(fù)雜。所以我們應(yīng)該盡可能的避免寫過于具體的 CSS 選擇器，然后對于 HTML 來說也盡量少的添加?意義標(biāo)簽，保證層級扁平

3. ?成渲染樹

當(dāng)我們?成 DOM 樹和 CSSOM 樹以后，就需要將這兩棵樹組合為渲染樹

在這?過程中，不是簡單的將兩者合并就?了。渲染樹只會包括需要顯示的節(jié)點和這些節(jié) 點的樣式信息，如果某個節(jié)點是 display: none 的，那么就不會在渲染樹中顯示。

當(dāng)瀏覽器?成渲染樹以后，就會根據(jù)渲染樹來進(jìn)?布局(也可以叫做回流)，然后調(diào)? GPU 繪制，合成圖層，顯示在屏幕上。對于這?部分的內(nèi)容因為過于底層，還涉及到了硬 件相關(guān)的知識，這?就不再繼續(xù)展開內(nèi)容了。

21.2 為什么操作 DOM 慢

想必?家都聽過操作 DOM 性能很差，但是這其中的原因是什么呢？

因為 DOM 是屬于渲染引擎中的東?，? JS ?是 JS 引擎中的東?。當(dāng)我們通過 JS 操作 DOM 的時候，其實這個操作涉及到了兩個線程之間的通信，那么勢必會帶來?些性 能上的損耗。操作 DOM 次數(shù)?多，也就等同于?直在進(jìn)?線程之間的通信，并且操作 DOM 可能還會帶來重繪回流的情況，所以也就導(dǎo)致了性能上的問題。

經(jīng)典?試題：插??萬個 DOM，如何實現(xiàn)??不卡頓？

對于這道題?來說，?先我們肯定不能?次性把?萬個 DOM 全部插?，這樣肯定會造成 卡頓，所以解決問題的重點應(yīng)該是如何分批次部分渲染 DOM 。?部分?應(yīng)該可以想到通 過 requestAnimationFrame 的?式去循環(huán)的插? DOM ，其實還有種?式去解決這個問 題：虛擬滾動( virtualized scroller )。

這種技術(shù)的原理就是只渲染可視區(qū)域內(nèi)的內(nèi)容，?可?區(qū)域的那就完全不渲染了，當(dāng)?戶 在滾動的時候就實時去替換渲染的內(nèi)容

從上圖中我們可以發(fā)現(xiàn)，即使列表很?，但是渲染的 DOM 元素永遠(yuǎn)只有那么 ?個，當(dāng)我們滾動??的時候就會實時去更新 DOM ，這個技術(shù)就能順利解決 這道經(jīng)典?試題

21.3 什么情況阻塞渲染

?先渲染的前提是?成渲染樹，所以 HTML 和 CSS 肯定會阻塞渲染。如果你想渲染的越 快，你越應(yīng)該降低?開始需要渲染的?件??，并且扁平層級，優(yōu)化選擇器。

然后當(dāng)瀏覽器在解析到 script 標(biāo)簽時，會暫停構(gòu)建 DOM ，完成后才會從暫停的地?重 新開始。也就是說，如果你想?屏渲染的越快，就越不應(yīng)該在?屏就加載 JS ?件，這也 是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因。

當(dāng)然在當(dāng)下，并不是說 script 標(biāo)簽必須放在底部，因為你可以給 script 標(biāo)簽添加 defer 或者 async 屬性。

當(dāng) script 標(biāo)簽加上 defer 屬性以后，表示該 JS ?件會并?下載，但是會放到 HTML 解析完成后順序執(zhí)?，所以對于這種情況你可以把 script 標(biāo)簽放在任意位置。

對于沒有任何依賴的 JS ?件可以加上 async 屬性，表示 JS ?件下載和解析不會阻 塞渲染。

21.4 重繪(Repaint)和回流(Reflow)

重繪和回流會在我們設(shè)置節(jié)點樣式時頻繁出現(xiàn)，同時也會很?程度上影響性 能。重繪是當(dāng)節(jié)點需要更改外觀?不會影響布局的，?如改變 color 就叫稱為重繪

回流是布局或者?何屬性需要改變就稱為回流。

回流必定會發(fā)?重繪，重繪不?定會引發(fā)回流。回流所需的成本?重繪?的多，改變?節(jié)點?的?節(jié)點很可能會導(dǎo)致?節(jié)點的?系列回流。

以下?個動作可能會導(dǎo)致性能問題：改變 window ??

改變字體

添加或刪除樣式

?字改變

定位或者浮動

盒模型

并且很多?不知道的是，重繪和回流其實也和 Eventloop 有關(guān)。當(dāng) Eventloop 執(zhí)?完 Microtasks 后，會判斷 document 是否需要更新，因為瀏覽器是 60Hz 的刷新率，每 16.6ms 才會更新?次。

然后判斷是否有 resize 或者 scroll 事件，有的話會去觸發(fā)事件，所以 resize 和scroll 事件也是?少 16ms 才會觸發(fā)?次，并且?帶節(jié)流功能。

判斷是否觸發(fā)了 media query

更新動畫并且發(fā)送事件

判斷是否有全屏操作事件

執(zhí)? requestAnimationFrame 回調(diào)

執(zhí)? IntersectionObserver 回調(diào)，該?法?于判斷元素是否可?，可以?于懶加載上，但是兼容性不好 更新界?

以上就是?幀中可能會做的事情。如果在?幀中有空閑時間，就會去執(zhí)?requestIdleCallback 回調(diào)

21.5 減少重繪和回流使? transform 替代 top

.test {

position: absolute;

top: 10px;

width: 100px;

height: 100px;

background: red;

}

setTimeout(() => {

// 引起回流

document.querySelector('.test').style.top = '100px'

}, 1000)

使? visibility 替換 display: none ，因為前者只會引起重繪，后者會引發(fā)回流 (改變了布局)

不要把節(jié)點的屬性值放在?個循環(huán)?當(dāng)成循環(huán)?的變量for(let i = 0; i < 1000; i++) {

// 獲取 offsetTop 會導(dǎo)致回流，因為需要去獲取正確的值

console.log(document.querySelector('.test').style.offsetTop)

}

不要使? table 布局，可能很?的?個?改動會造成整個 table 的重新布局

動畫實現(xiàn)的速度的選擇，動畫速度越快，回流次數(shù)越多，也可以選擇使?requestAnimationFrame

CSS 選擇符從右往左匹配查找，避免節(jié)點層級過多

將頻繁重繪或者回流的節(jié)點設(shè)置為圖層，圖層能夠阻?該節(jié)點的渲染?為影響別的節(jié)點。?如對于 video 標(biāo)簽來說，瀏覽器會?動將該節(jié)點變?yōu)閳D層。

設(shè)置節(jié)點為圖層的?式有很多，我們可以通過以下?個常?屬性可以?成新圖層

will-change

video 、 iframe 標(biāo)簽

更多面試題

如果你想了解更多的前端面試題，請點擊下面進(jìn)行選擇,這里基本包涵了市場上的所有前端方面的面試題，讓你面試更加順利。

這些題庫還在更新中，如果你有不錯的面試題庫歡迎分享給我，我整理后放上來；人人為我，我為人人，互幫互助，共同提高，祝大家都拿到心儀的Offer！

總結(jié)

以上是生活随笔為你收集整理的浏览器渲染机制面试_浏览器渲染原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。