瀏覽器打開(kāi)頁(yè)面的過(guò)程
- 解析 URL
- DNS 解析
<link rel="dns-prefetch" >
瀏定覽器并不保證一會(huì)去解析域名，可能會(huì)根據(jù)當(dāng)前的網(wǎng)絡(luò)抗斤、負(fù)載等狀況做決定 - 建立 TCP/IP 鏈接
<link rel="preconnect" > 或跨域 <link rel="preconnect" crossorigin>
- HTTP 請(qǐng)求和響應(yīng)
緩存：
- service worker 緩存
- 強(qiáng)緩存/協(xié)商緩存
- http/2 push 緩存
- 頁(yè)面渲染
頁(yè)面渲染的步驟
- 解析 HTML 標(biāo)簽并構(gòu)建 DOM 樹(shù)
- 解析 CSS 標(biāo)簽并構(gòu)建 CSSOM 樹(shù)
- 將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)
- 根據(jù)渲染樹(shù)來(lái)布局禽篱，計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息
- 將各個(gè)節(jié)點(diǎn)繪制到屏幕上
HTML 解析畜伐、JavaScript 加載與執(zhí)行、CSS 加載與使用
HTML 解析的過(guò)程：
HTML 解析過(guò)程中的 CSS
- 遇到外鏈的 css 時(shí)躺率，網(wǎng)絡(luò)進(jìn)程會(huì)請(qǐng)求對(duì)應(yīng)的資源玛界，渲染進(jìn)程繼續(xù)解析 html
- 遇到內(nèi)聯(lián)的 css 時(shí)？
HTML 解析過(guò)程中的 Javascript
當(dāng)解析過(guò)程中遇到內(nèi)聯(lián)腳本或者 js 資源悼吱，渲染進(jìn)程會(huì)被掛起慎框，等待 js 資源加載并執(zhí)行完畢后，再繼續(xù)進(jìn)行解析后添；
將 script 標(biāo)簽放在 body 底部笨枯；defer、async
根據(jù)標(biāo)準(zhǔn)規(guī)范遇西，在 JavaScript 中可以訪(fǎng)問(wèn) DOM馅精。因此當(dāng)遇到 JavaScript 后會(huì)阻塞 DOM 的解析。于此同時(shí)粱檀，為避免 CSS 與 JavaScript 之間的競(jìng)態(tài)洲敢，CSSOM 的構(gòu)建會(huì)阻塞 JavaScript 的腳本執(zhí)行∏羊牵總結(jié)起來(lái)就是 —— JavaScript 會(huì)阻塞 DOM 構(gòu)建压彭，而 CSSOM 的構(gòu)建又回阻塞 JavaScript 的執(zhí)行睦优。
JavaScript 會(huì)阻塞 DOM 構(gòu)建，而 CSSOM 的構(gòu)建又回阻塞 JavaScript 的執(zhí)行壮不。
- 構(gòu)建 CSSOM 的時(shí)機(jī)汗盘？再構(gòu)建的過(guò)程中會(huì)不會(huì)阻塞？
- 是否是等待 js 加載并執(zhí)行完之后再繼續(xù)解析询一？如果是立即執(zhí)行的衡未，那么遇到
document.getElementById()這樣的代碼該怎么辦？ - 服務(wù)器返回優(yōu)化：stream response家凯？無(wú)刷新缓醋、無(wú) JavaScript 的頁(yè)面更新？BFF绊诲？
display: none 并非是刪除 DOM 送粱，改變 DOM 樹(shù)，而是改變渲染樹(shù)掂之；
資源加載和 readyState
readyState：loading ---> interactive(解析 html 完成抗俄，但依然在加載資源) -----> complete（資源加載完畢）
DOMContentLoaded：事件在 interactive 之后 complete 之前觸發(fā)，即除異步腳本之外的資源都已加載完畢
JavaScript 運(yùn)行優(yōu)化
-
requestAnimationFrame：下一次重繪之前執(zhí)行 -
requestIdleCallback：瀏覽器渲染線(xiàn)程空閑時(shí)的回調(diào) - Passive event listeners：
{passive: true}不需要等待事件處理回調(diào)代碼運(yùn)行完世舰，直接在觸發(fā)時(shí)就渲染相應(yīng)的 DOM 操作
