問(wèn)題：從輸入url到生成頁(yè)面的詳細(xì)過(guò)程

頁(yè)面渲染

1.瀏覽器根據(jù)DNS服務(wù)器得到域名的IP地址

2.向這個(gè)IP的機(jī)器發(fā)送HTTP請(qǐng)求

3.服務(wù)器處理并返回請(qǐng)求

4.瀏覽器得到返回內(nèi)容

5.瀏覽器根據(jù)HTMl結(jié)構(gòu)生成DOM Tree

6.根據(jù)css生成CSSOM

7.將DOM 和? CSSOM整合成RenderTree（渲染樹）

8.根據(jù)RenderTree 開始渲染

9.遇到script標(biāo)簽會(huì)立即執(zhí)行，并阻塞渲染

問(wèn)題：為什么css文件要放在head中？JS文件要放在body下邊？

因?yàn)閏ss可以先定義dom的樣式規(guī)則，然后渲染。如果放在dom后邊，dom會(huì)先按默認(rèn)的樣式渲染一遍，然后在按照css在渲染一遍。

JS文件會(huì)先執(zhí)行，阻塞渲染。JS執(zhí)行完再繼續(xù)渲染下邊的dom。而且js代碼也有可能操作下邊的dom，報(bào)錯(cuò)。

性能優(yōu)化

加載頁(yè)面和靜態(tài)資源入手：

1.靜態(tài)資源合并壓縮（例如js文件）

2.靜態(tài)資源緩存

3.使用CDN讓資源加載更快（CDN會(huì)就近獲取資源）

4.使用SSR后端渲染

頁(yè)面渲染入手：

1.CSS放前邊，JS放后邊

2.懶加載（圖片懶加載，下拉更多）

3.減少dom查詢和操作。緩存dom

4.事件節(jié)流