一七扰、認(rèn)識(shí)瀏覽器內(nèi)核
Trident（IE）
Gecko（火狐）
Blink（Chrome、Opera）
Webkit（Safari）

二特碳、頁(yè)面如何加載

• 瀏覽器根據(jù)DNS 服務(wù)器得到域名的IP 地址
• 向這個(gè) IP 的機(jī)器發(fā)送HTTP請(qǐng)求
• 服務(wù)器收到话浇、處理并返回 HTTP 請(qǐng)求（HMTL 格式的字符串）
• [圖片上傳中...(瀏覽器的渲染機(jī)制.png-43fc77-1575345132986-0)]
  瀏覽器得到返回內(nèi)容（其實(shí)就是一堆 HMTL 格式的字符串牵署，因?yàn)橹挥?HTML 格式瀏覽器才能正確解析，這是 W3C 標(biāo)準(zhǔn)的要求）

例如：在瀏覽器輸入https://juejin.im狈孔，然后經(jīng)過(guò) DNS 解析信认，juejin.im對(duì)應(yīng)的 IP 是36.248.217.149（不同時(shí)間、地點(diǎn)對(duì)應(yīng)的 IP 可能會(huì)不同）锭汛。然后瀏覽器向該 IP 發(fā)送 HTTP 請(qǐng)求饼灿。
服務(wù)端接收到 HTTP 請(qǐng)求价认，然后經(jīng)過(guò)計(jì)算（向不同的用戶推送不同的內(nèi)容），返回 HTTP 請(qǐng)求潦蝇，返回的內(nèi)容如下：

image.png

image.png

三、瀏覽器渲染過(guò)程

1. 瀏覽器解析三個(gè)東西

• 一是HTML/SVG/XHTML深寥，HTML字符串描述了一個(gè)頁(yè)面的結(jié)構(gòu)护蝶，瀏覽器會(huì)把HTML結(jié)構(gòu)字符串解析轉(zhuǎn)換DOM樹(shù)形結(jié)構(gòu)。
• 二是CSS翩迈，解析CSS會(huì)產(chǎn)生CSS規(guī)則樹(shù)持灰，它和DOM結(jié)構(gòu)比較像。
• 三是Javascript腳本负饲，等到Javascript 腳本文件加載后堤魁， 通過(guò) DOM API 和 CSSOM API 來(lái)操作 DOM樹(shù)和 CSS規(guī)則樹(shù)喂链。

2. 解析完成后，瀏覽器引擎會(huì)通過(guò)DOM Tree 和 CSS Rule Tree 來(lái)構(gòu)造 Rendering Tree妥泉。

Rendering Tree 渲染樹(shù)并不等同于DOM樹(shù)椭微，渲染樹(shù)只會(huì)包括需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式信息。
CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個(gè)Element（也就是每個(gè)Frame）盲链。
然后蝇率，計(jì)算每個(gè)Frame 的位置，這又叫l(wèi)ayout和reflow過(guò)程刽沾。

3. 最后通過(guò)調(diào)用操作系統(tǒng)Native GUI的API繪制

1）構(gòu)建DOM 樹(shù)：瀏覽器會(huì)遵守一套步驟將HTML 文件轉(zhuǎn)換為 DOM 樹(shù)（字節(jié)數(shù)據(jù) => 字符串 => Token => Node => DOM）

瀏覽器從磁盤(pán)或網(wǎng)絡(luò)讀取HTML的原始字節(jié)(0和1)本慕，并根據(jù)文件的指定編碼（例如 UTF-8）將它們轉(zhuǎn)換成字符串（我們寫(xiě)的代碼）
將字符串轉(zhuǎn)換成Token，例如：侧漓、等锅尘。Token中會(huì)標(biāo)識(shí)出當(dāng)前Token是“開(kāi)始標(biāo)簽”或是“結(jié)束標(biāo)簽”亦或是“文本”等信息。
生成節(jié)點(diǎn)對(duì)象并構(gòu)建DOM

事實(shí)上布蔗，構(gòu)建DOM的過(guò)程中藤违，不是等所有Token都轉(zhuǎn)換完成后再去生成節(jié)點(diǎn)對(duì)象，而是一邊生成Token一邊消耗Token來(lái)生成節(jié)點(diǎn)對(duì)象纵揍。換句話說(shuō)顿乒，每個(gè)Token被生成后，會(huì)立刻消耗這個(gè)Token創(chuàng)建出節(jié)點(diǎn)對(duì)象泽谨。注意：帶有結(jié)束標(biāo)簽標(biāo)識(shí)的Token不會(huì)馬上創(chuàng)建節(jié)點(diǎn)對(duì)象淆游。

2）構(gòu)建CSSOM：構(gòu)建CSSOM的過(guò)程與構(gòu)建DOM的過(guò)程非常相似（字節(jié)數(shù)據(jù) => 字符串 => Token => Node => CSSOM）

在這一過(guò)程中，瀏覽器會(huì)確定下每一個(gè)節(jié)點(diǎn)的樣式到底是什么隔盛，并且這一過(guò)程其實(shí)是很消耗資源的犹菱。因?yàn)闃邮侥憧梢宰孕性O(shè)置給某個(gè)節(jié)點(diǎn)，也可以通過(guò)繼承獲得吮炕。在這一過(guò)程中腊脱，瀏覽器得遞歸 CSSOM 樹(shù)，然后確定具體的元素到底是什么樣式龙亲。
注意：CSS匹配HTML元素是一個(gè)相當(dāng)復(fù)雜和有性能問(wèn)題的事情陕凹。所以，DOM樹(shù)要小鳄炉，CSS盡量用id和class杜耙，千萬(wàn)不要過(guò)渡層疊下去。

3）構(gòu)建渲染樹(shù)

當(dāng)我們生成 DOM 樹(shù)和 CSSOM 樹(shù)以后拂盯，就需要將這兩棵樹(shù)組合為渲染樹(shù)佑女。渲染樹(shù)只會(huì)包括需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式信息，如果某個(gè)節(jié)點(diǎn)是 display: none 的，那么就不會(huì)在渲染樹(shù)中顯示团驱。

4. 布局與繪制

• 當(dāng)瀏覽器生成渲染樹(shù)以后摸吠，就會(huì)根據(jù)渲染樹(shù)來(lái)進(jìn)行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個(gè)節(jié)點(diǎn)在頁(yè)面中的確切位置和大小嚎花。通常這一行為也被稱為“自動(dòng)重排”寸痢。
• 布局流程的輸出是一個(gè)“盒模型”，它會(huì)精確地捕獲每個(gè)元素在視口內(nèi)的確切位置和尺寸紊选，所有相對(duì)測(cè)量值都將轉(zhuǎn)換為屏幕上的絕對(duì)像素啼止。
• 布局完成后，瀏覽器會(huì)立即發(fā)出“Paint Setup”和“Paint”事件兵罢，將渲染樹(shù)轉(zhuǎn)換成屏幕上的像素献烦。

注意：回流和重繪：1.計(jì)算CSS樣式 2.構(gòu)建Render Tree 3.Layout – 定位坐標(biāo)和大小 4.正式開(kāi)畫(huà)

提問(wèn)1：瀏覽器如果渲染過(guò)程中遇到JS文件怎么處理？

渲染過(guò)程中趣些，如果遇到 < script > 就停止渲染，執(zhí)行 JS 代碼贰您。因?yàn)闉g覽器有GUI渲染線程與JS引擎線程坏平，為了防止渲染出現(xiàn)不可預(yù)期的結(jié)果，這兩個(gè)線程是互斥的關(guān)系锦亦。JavaScript的加載舶替、解析與執(zhí)行會(huì)阻塞DOM的構(gòu)建，也就是說(shuō)杠园，在構(gòu)建DOM時(shí)顾瞪，HTML解析器若遇到了JavaScript，那么它會(huì)暫停構(gòu)建DOM抛蚁，將控制權(quán)移交給JavaScript引擎陈醒，等JavaScript引擎運(yùn)行完畢，瀏覽器再?gòu)闹袛嗟牡胤交謴?fù)DOM構(gòu)建瞧甩。

也就是說(shuō)钉跷，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件肚逸，這也是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因爷辙。當(dāng)然在當(dāng)下，并不是說(shuō) script 標(biāo)簽必須放在底部朦促，因?yàn)槟憧梢越o script 標(biāo)簽添加 defer 或者 async 屬性（下文會(huì)介紹這兩者的區(qū)別）膝晾。

提問(wèn)2：JS文件不只是阻塞DOM的構(gòu)建，它會(huì)導(dǎo)致CSSOM也阻塞DOM的構(gòu)建嗎务冕？

是的血当。原本DOM和CSSOM的構(gòu)建是互不影響，井水不犯河水，但是一旦引入了JavaScript歹颓，CSSOM也開(kāi)始阻塞DOM的構(gòu)建坯屿，只有CSSOM構(gòu)建完畢后，DOM再恢復(fù)DOM構(gòu)建巍扛。

這是因?yàn)镴avaScript不只是可以改DOM领跛，它還可以更改樣式，也就是它可以更改CSSOM撤奸。因?yàn)椴煌暾腃SSOM是無(wú)法使用的吠昭，如果JavaScript想訪問(wèn)CSSOM并更改它，那么在執(zhí)行JavaScript時(shí)胧瓜，必須要能拿到完整的CSSOM矢棚。所以就導(dǎo)致了一個(gè)現(xiàn)象，如果瀏覽器尚未完成CSSOM的下載和構(gòu)建府喳，而我們卻想在此時(shí)運(yùn)行腳本蒲肋，那么瀏覽器將延遲腳本執(zhí)行和DOM構(gòu)建，直至其完成CSSOM的下載和構(gòu)建钝满。也就是說(shuō)兜粘，在這種情況下，瀏覽器會(huì)先下載和構(gòu)建CSSOM弯蚜，然后再執(zhí)行JavaScript孔轴，最后在繼續(xù)構(gòu)建DOM。

3.async和defer的作用是什么碎捺？有什么區(qū)別?

image.png

<script src="script.js"></script>

沒(méi)有 defer 或 async晋柱，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，也就是說(shuō)不等待后續(xù)載入的文檔元素诵叁，讀到就加載并執(zhí)行趣斤。

<script async src="script.js"></script> (異步下載)

async 屬性表示異步執(zhí)行引入的 JavaScript，與 defer 的區(qū)別在于黎休，如果已經(jīng)加載好浓领，就會(huì)開(kāi)始執(zhí)行——無(wú)論此刻是 HTML 解析階段還是 DOMContentLoaded 觸發(fā)之后。需要注意的是势腮，這種方式加載的 JavaScript 依然會(huì)阻塞 load 事件联贩。換句話說(shuō)，async-script 可能在 DOMContentLoaded 觸發(fā)之前或之后執(zhí)行捎拯，但一定在 load 觸發(fā)之前執(zhí)行泪幌。

<script defer src="script.js"></script>(延遲執(zhí)行)

defer 屬性表示延遲執(zhí)行引入的 JavaScript，即這段 JavaScript 加載時(shí) HTML 并未停止解析，這兩個(gè)過(guò)程是并行的祸泪。整個(gè) document 解析完畢且 defer-script 也加載完成之后（這兩件事情的順序無(wú)關(guān)）吗浩，會(huì)執(zhí)行所有由 defer-script 加載的 JavaScript 代碼，然后觸發(fā) DOMContentLoaded 事件没隘。

defer 與相比普通 script懂扼，有兩點(diǎn)區(qū)別：

載入 JavaScript 文件時(shí)不阻塞 HTML 的解析，執(zhí)行階段被放到 HTML 標(biāo)簽解析完成之后右蒲。
在加載多個(gè)JS腳本的時(shí)候阀湿，async是無(wú)順序的加載，而defer是有順序的加載瑰妄。

2.你真的了解回流和重繪嗎陷嘴？
Javascript動(dòng)態(tài)修改了DOM屬性或是CSS屬性會(huì)導(dǎo)致重新Layout，但有些改變不會(huì)重新Layout间坐，就是上圖中那些指到天上的箭頭灾挨，比如修改后的CSS rule沒(méi)有被匹配到元素。
這里重要要說(shuō)兩個(gè)概念竹宋，一個(gè)是Reflow劳澄，另一個(gè)是Repaint

重繪：

當(dāng)我們對(duì) DOM 的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)逝撬，瀏覽器不需重新計(jì)算元素的幾何屬性浴骂、直接為該元素繪制新的樣式（跳過(guò)了上圖所示的回流環(huán)節(jié)）乓土。

回流：

當(dāng)我們對(duì) DOM 的修改引發(fā)了 DOM 幾何尺寸的變化（比如修改元素的寬宪潮、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響）趣苏，然后再將計(jì)算的結(jié)果繪制出來(lái)狡相。這個(gè)過(guò)程就是回流（也叫重排）

我們知道，當(dāng)網(wǎng)頁(yè)生成的時(shí)候食磕，至少會(huì)渲染一次尽棕。在用戶訪問(wèn)的過(guò)程中，還會(huì)不斷重新渲染彬伦。重新渲染會(huì)重復(fù)回流+重繪或者只有重繪滔悉。
注：回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流

重繪和回流會(huì)在我們?cè)O(shè)置節(jié)點(diǎn)樣式時(shí)頻繁出現(xiàn)单绑，同時(shí)也會(huì)很大程度上影響性能回官。回流所需的成本比重繪高的多搂橙，改變父節(jié)點(diǎn)里的子節(jié)點(diǎn)很可能會(huì)導(dǎo)致父節(jié)點(diǎn)的一系列回流歉提。

1）常見(jiàn)引起回流屬性和方法
任何會(huì)改變?cè)貛缀涡畔?元素的位置和尺寸大小)的操作，都會(huì)觸發(fā)回流。

添加或者刪除可見(jiàn)的DOM元素苔巨；
元素尺寸改變——邊距版扩、填充、邊框侄泽、寬度和高度
內(nèi)容變化礁芦，比如用戶在input框中輸入文字
瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)
計(jì)算 offsetWidth 和 offsetHeight 屬性
設(shè)置 style 屬性的值

2）常見(jiàn)引起重繪屬性和方法

image.png

3）如何減少回流、重繪

使用 transform 替代 top

使用 visibility 替換 display: none 蔬顾，因?yàn)榍罢咧粫?huì)引起重繪宴偿，后者會(huì)引發(fā)回流（改變了布局）

不要把節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。

for(let i = 0; i < 1000; i++) {
  // 獲取 offsetTop 會(huì)導(dǎo)致回流诀豁，因?yàn)樾枰カ@取正確的值
  console.log(document.querySelector('.test').style.offsetTop)
}

不要使用 table 布局窄刘，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局

動(dòng)畫(huà)實(shí)現(xiàn)的速度的選擇，動(dòng)畫(huà)速度越快舷胜，回流次數(shù)越多娩践，也可以選擇使用 requestAnimationFrame

CSS 選擇符從右往左匹配查找，避免節(jié)點(diǎn)層級(jí)過(guò)多

將頻繁重繪或者回流的節(jié)點(diǎn)設(shè)置為圖層烹骨，圖層能夠阻止該節(jié)點(diǎn)的渲染行為影響別的節(jié)點(diǎn)翻伺。比如對(duì)于 video 標(biāo)簽來(lái)說(shuō)，瀏覽器會(huì)自動(dòng)將該節(jié)點(diǎn)變?yōu)閳D層沮焕。

五吨岭、性能優(yōu)化策略
基于上面介紹的瀏覽器渲染原理，DOM 和 CSSOM 結(jié)構(gòu)構(gòu)建順序峦树，初始化可以對(duì)頁(yè)面渲染做些優(yōu)化辣辫，提升頁(yè)面性能。

JS優(yōu)化： < script > 標(biāo)簽加上 defer屬性 和 async屬性 用于在不阻塞頁(yè)面文檔解析的前提下魁巩，控制腳本的下載和執(zhí)行急灭。

defer屬性： 用于開(kāi)啟新的線程下載腳本文件，并使腳本在文檔解析完成后執(zhí)行谷遂。

async屬性： HTML5新增屬性葬馋，用于異步下載腳本文件，下載完畢立即解釋執(zhí)行代碼肾扰。

CSS優(yōu)化： 標(biāo)簽的 rel屬性 中的屬性值設(shè)置為 preload 能夠讓你在你的HTML頁(yè)面中可以指明哪些資源是在頁(yè)面加載完成后即刻需要的,最優(yōu)的配置加載順序畴嘶，提高渲染性能

image.png

image.png

image.png