https://blog.csdn.net/Newbie___/article/details/107212575
https://juejin.cn/post/6869279683230629896
- 瀏覽器欄輸入url地址
- 檢查瀏覽器緩存，如果有緩存且緩存結(jié)果生效茵瘾，直接取緩存數(shù)據(jù)，沒(méi)有則進(jìn)行下一步
- dns解析獲取ip地址
- 三次握手建立tcp連接抄瓦，發(fā)送http請(qǐng)求
- 服務(wù)器接收并解析請(qǐng)求，返回響應(yīng)數(shù)據(jù)
- 瀏覽器接收相應(yīng)數(shù)據(jù)丽猬，判斷是否需要進(jìn)行緩存
- 瀏覽器解析數(shù)據(jù)包，處理html生成dom樹(shù)和 處理css生成css規(guī)則樹(shù)，將兩者合并成render樹(shù)院仿，根據(jù)renders樹(shù)計(jì)算各節(jié)點(diǎn)位置
- 頁(yè)面是一層層疊加在一起生成的，渲染引擎會(huì)生成對(duì)應(yīng)的分層樹(shù)
- 合成線程（渲染進(jìn)程中的）會(huì)把分層樹(shù)的圖層變成圖塊
- 調(diào)用Gpu繪制（Gpu柵格化崔赌，將視窗附近的圖塊變成位圖「又名比特圖意蛀，是像素點(diǎn)構(gòu)成的矩陣圖像」耸别，然后保存在gpu進(jìn)程中健芭。柵格化完成，瀏覽器從gpu進(jìn)程中取也面內(nèi)容）
image.png
瀏覽器tab頁(yè)左上角的圖標(biāo)icon秀姐，在頁(yè)面加載的時(shí)候會(huì)loading慈迈，逆時(shí)針轉(zhuǎn)動(dòng)則表示正在做網(wǎng)絡(luò)請(qǐng)求，網(wǎng)絡(luò)進(jìn)程正在起作用；順時(shí)針轉(zhuǎn)動(dòng)痒留，則表示正在渲染谴麦，渲染進(jìn)程起作用
頁(yè)面渲染過(guò)程
- 瀏覽器無(wú)法直接讀取html，需要先構(gòu)建Dom樹(shù)伸头。
- 把讀取到的css匾效，變成瀏覽器可以理解的cssom樹(shù)。
轉(zhuǎn)換樣式表中的屬性值恤磷，使其標(biāo)準(zhǔn)化面哼。2em 被解析成了 32px，red 被解析成了 rgb(255,0,0)扫步，bold 被解析成了 700……
計(jì)算出 DOM 樹(shù)中每個(gè)節(jié)點(diǎn)的具體樣式魔策。利用css繼承、css優(yōu)先級(jí)河胎、css層疊規(guī)則等計(jì)算出來(lái)闯袒。 - 瀏覽器會(huì)先從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)，并把這些節(jié)點(diǎn)添加到渲染樹(shù)中游岳。不可見(jiàn)的節(jié)點(diǎn)不會(huì)添加到渲染樹(shù)政敢，比如css設(shè)置了display為none 屬性的節(jié)點(diǎn)。
- 根據(jù)生成的渲染樹(shù)吭历，進(jìn)行布局（也可以叫做回流）堕仔，得到各個(gè)節(jié)點(diǎn)在頁(yè)面中的確切位置和大小。（自動(dòng)重排）晌区。布局階段的輸出是一個(gè)盒子模型摩骨，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小，所有相對(duì)的測(cè)量值也都會(huì)被轉(zhuǎn)換為屏幕內(nèi)的絕對(duì)像素值（重繪）朗若。
- 生成分層樹(shù)恼五，頁(yè)面都是一層一層疊加在一起形成的。比如一些復(fù)雜的css動(dòng)畫哭懈，z-index等灾馒，渲染引擎會(huì)為他們生成專用的圖層，并生成對(duì)應(yīng)的圖層樹(shù)遣总。
- 構(gòu)建完圖層之后睬罗，渲染引擎會(huì)對(duì)圖層樹(shù)中的每個(gè)元素進(jìn)行繪制。合成線程會(huì)把分層樹(shù)的圖層變成圖塊旭斥。
- GPU的柵格化把視窗附近的圖塊變成位圖容达，然后保存在GPU的進(jìn)程中。（因?yàn)橐粋€(gè)頁(yè)面可能很大垂券，而用戶只能看到視口中頁(yè)面的一部分花盐，如果全部繪制開(kāi)銷會(huì)很大，所以合成線程會(huì)按照視口附近的圖塊來(lái)優(yōu)先生成位圖）
- 柵格化完成之后，瀏覽器進(jìn)去GPU進(jìn)程里取出頁(yè)面內(nèi)容顯示在屏幕上算芯，這就完成了渲染階段
瀏覽器的性能優(yōu)化機(jī)制
- 瀏覽器自身會(huì)有一個(gè)優(yōu)化機(jī)制柒昏，會(huì)有一個(gè)隊(duì)列，然后類似于批處理的形式熙揍，當(dāng)隊(duì)列中的任務(wù)或者時(shí)間間隔達(dá)到一定的閾值時(shí)职祷，清空隊(duì)列，然后這樣會(huì)把多次重排和重繪變成一次
- 但是届囚，如果觸發(fā)了同步布局事件堪旧，則會(huì)立刻清空隊(duì)列，執(zhí)行繪制操作
getBoundingClientRect奖亚、getComputedStyle()淳梦、offsetTop、scrollWidth昔字、clientWidth爆袍、
