進(jìn)程
- 申請(qǐng)和擁有計(jì)算機(jī)資源
- 不同進(jìn)程間通信通過進(jìn)程間通信管道IPC
線程
- 一個(gè)進(jìn)程多個(gè)線程，每個(gè)線程執(zhí)行不同的任務(wù)
瀏覽器一般可以分為以下幾個(gè)部分
- 用戶界面
- 瀏覽器引擎
- 渲染引擎 (內(nèi)核)
- 進(jìn)程
瀏覽器引擎
數(shù)據(jù)持久層
渲染引擎 (內(nèi)核)
- 網(wǎng)絡(luò)
- js解析器
進(jìn)程
- 瀏覽器進(jìn)程
- 網(wǎng)絡(luò)進(jìn)程
- GPU進(jìn)程
- 插件進(jìn)程
- 渲染器進(jìn)程
- 緩存進(jìn)程
瀏覽器地址欄輸入地址時(shí)
一、瀏覽器進(jìn)程的UI線程會(huì)撲捉你的輸入內(nèi)容
二、如果是網(wǎng)址，UI線程會(huì)啟動(dòng)一個(gè)網(wǎng)絡(luò)線程請(qǐng)求DNS進(jìn)行域名解析，連接服務(wù)器獲取數(shù)據(jù)
1、safeBrowsing 檢查站點(diǎn)是否是惡意站點(diǎn)
2、網(wǎng)絡(luò)線程通知UI線程準(zhǔn)備好了
3、UI線程會(huì)創(chuàng)建一個(gè)渲染器進(jìn)程渲染頁面
4、瀏覽器進(jìn)程會(huì)通過IPC管道將數(shù)據(jù)傳遞給渲染器進(jìn)程，進(jìn)入渲染流程
- 4.1 渲染器進(jìn)程獲取到數(shù)據(jù)就是html, 將html, css，JS, image 渲染成用戶可交互的web頁面
- 4.2 渲染器進(jìn)程 主線程將html 進(jìn)行解析，構(gòu)造DOM數(shù)據(jù)結(jié)構(gòu)
4.2.1、html首先經(jīng)過tokeniser 標(biāo)記化，通過詞法分析將輸入的html內(nèi)容解析成多個(gè)標(biāo)記，根據(jù)識(shí)別后的標(biāo)記進(jìn)行DOM樹構(gòu)造，在DOM樹構(gòu)建過程中會(huì)創(chuàng)建document對(duì)象，然后以document為根結(jié)點(diǎn)的DOM樹不斷進(jìn)行修改，向其中添加各種元素
4.2.2、圖片和css這些資源需要網(wǎng)絡(luò)下載，或者從緩存中直接加載，這些資源不會(huì)阻塞html的解析，因?yàn)樗麄儾粫?huì)影響DOM的生成，但當(dāng)html解析過程中遇到script標(biāo)簽，就會(huì)停止html的解析流程，轉(zhuǎn)而去加載解析并執(zhí)行js, (因?yàn)闉g覽器并不知道js執(zhí)行是否會(huì)改變當(dāng)前頁面html結(jié)構(gòu)，如果就是代碼里調(diào)用了document.wirte 來修改html，那之前解析就沒有意義了，這就是為什么把script 放在合適的位置，或者使用async 和 defer 屬性 異步加載js)
4.2.3、解析完成后我們會(huì)獲取一個(gè)DOM Tree, 但我們不知道每個(gè)節(jié)點(diǎn)長(zhǎng)什么樣子，主線程需要解析css并確定每個(gè)DOM節(jié)點(diǎn)計(jì)算樣式，即使沒有寫樣式，瀏覽器也有默認(rèn)樣式
4.2.4、需要知道每個(gè)節(jié)點(diǎn)放在頁面哪個(gè)位置，也就是節(jié)點(diǎn)坐標(biāo)該占用多大區(qū)域，這就layout布局，主線程通過遍歷DOM和計(jì)算好的樣式來生成layout Tree
4.2.5、需要知道繪制順序來繪制節(jié)點(diǎn)，為保證正確層級(jí)，主線程遍歷layout Tree創(chuàng)建一個(gè)繪制記錄表（Print Record）記錄繪制順序，這個(gè)階段叫做繪制
4.2.6、把信息轉(zhuǎn)化為像素點(diǎn)顯示在屏幕上，這種行為叫做刪格化，將頁面各個(gè)部分分成多個(gè)圖層分別刪格化并在合成器線程中 單獨(dú)進(jìn)行合成頁面，詳細(xì)過程 - 主線程遍歷layout Tree 生成 layer Tree, 生成完畢和繪制順序確定后，主線程把信息傳遞給合成器線程，合成器線程把每個(gè)圖層刪格化，并把他們切分成很多圖塊，然后將每個(gè)圖塊發(fā)送給刪格線程，刪格線程刪格化每個(gè)圖塊，將它們存儲(chǔ)在GPU內(nèi)存中，當(dāng)圖塊刪格化完成后，合成器線程根據(jù)這些信息生成一個(gè)合成器幀，通過IPC傳遞給瀏覽器進(jìn)程，瀏覽器進(jìn)程傳給GPU 渲染到屏幕上
5、重排：當(dāng)我們改變?cè)爻叽缥恢茫瑫?huì)重新進(jìn)行樣式計(jì)算，布局、繪制
6、重繪：修改顏色屬性，不會(huì)觸發(fā)布局，還是會(huì)樣式計(jì)算和繪制
7、優(yōu)化：重排、重繪，js 也在主線程，多次觸發(fā)重排、重繪，js 還沒執(zhí)行完畢主線程還沒歸還，會(huì)造成程卡頓。1、requestAnimationFrame，每一幀被調(diào)用 2、transform 不會(huì)經(jīng)過布局和繪制，直接運(yùn)行在合成器線程和刪格線程，不會(huì)收到主線程js的影響
