HTML頁(yè)面的組成部分
HTML本身翠储，JS和CSS等靜態(tài)文件绘雁，圖片，JSON接口等援所。這些資源一般都是通過(guò)HTTP或HTTPS發(fā)送請(qǐng)求庐舟。然后從瀏覽器返回?cái)?shù)據(jù)，瀏覽器解析住拭。
資源加載過(guò)程
- 資源加載過(guò)程：
對(duì)于請(qǐng)求來(lái)說(shuō)挪略，無(wú)論是地址欄輸入還是代碼里加載的，都會(huì)有一個(gè)URL滔岳，通過(guò)這個(gè)URL杠娱，會(huì)發(fā)起HTTP或https請(qǐng)求，請(qǐng)求過(guò)程：查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存谱煤，如果緩存中有摊求，直接在屏幕顯示頁(yè)面，如果沒(méi)有則進(jìn)行一下步驟：網(wǎng)絡(luò)服務(wù)器解析URL趴俘，提取出里面的信息睹簇，取到解析后的域名奏赘，通過(guò)DNS服務(wù)器查詢寥闪，得到對(duì)應(yīng)的域名的IP地址， 三次握手建立TCP連接磨淌，瀏覽器通過(guò)GET/POST發(fā)動(dòng)HTTP請(qǐng)求數(shù)據(jù)疲憋，服務(wù)器返回HTTP響應(yīng)，返回資源梁只，瀏覽器針對(duì)資源的類型進(jìn)行解析渲染埃脏。四次揮手?jǐn)嚅_(kāi)連接
URL解析 ---> DNS查詢 ---> 資源請(qǐng)求 ---> 瀏覽器解析 ---> 斷開(kāi)連接 - 三次握手和四次揮手
- URL結(jié)構(gòu)
http://www.baidu.com:80/get_data_do?productld=1#title
http:// 協(xié)議名
www.baidu.com:80 域名+端口號(hào)，域名是查找服務(wù)器的位置堵幽，
http協(xié)議的默認(rèn)端口號(hào)是80，HTTPS默認(rèn)端口號(hào)是43殴胧，默認(rèn)端口號(hào)可以不寫(xiě)。
/get_data_do 路徑惫撰，服務(wù)器接到請(qǐng)求后厨钻，用這個(gè)路徑在服務(wù)器上定義自愿的位置首繁。
?productld=1 請(qǐng)求參數(shù) 用來(lái)傳遞請(qǐng)求資源的特點(diǎn)
#title 哈希，前端頁(yè)面的錨點(diǎn),用來(lái)標(biāo)記頁(yè)面的位置（對(duì)于后端來(lái)說(shuō)，這個(gè)字段一般沒(méi)啥用）
- DNS查詢
- 什么是DNS?
域名系統(tǒng)（DNS）將人類可讀的域名（例如：www.lala.com）轉(zhuǎn)換成機(jī)器可讀的IP地址，（例如：192.0.0.1)谊惭，管理名稱和數(shù)字之間的映射關(guān)系圈盔。 - 查詢
DNS服務(wù)器可以將名稱請(qǐng)求轉(zhuǎn)換為IP地址铁蹈，從而控制最終用戶在web瀏覽器中輸入域名時(shí)所訪問(wèn)的服務(wù)器，成為查詢我碟。請(qǐng)求域名 ---> IP地址
在互聯(lián)網(wǎng)上矫俺，所有的資源都是通過(guò)IP地址來(lái)定位的。 - DNS查詢
DNS緩存：用來(lái)減少在DNS服務(wù)器上的查詢量（緩存有時(shí)間限制）铅匹。DNS緩存并不是一個(gè)包斑，而是很多罗丰，瀏覽器上有萌抵，DNS服務(wù)器上也有绍填，而且根據(jù)不同的網(wǎng)絡(luò)層，緩存的事件也不太一樣住闯。越靠近用戶的節(jié)點(diǎn)，緩存的時(shí)間越短量窘，DNS根服務(wù)器上的緩存事件最多可達(dá)10分鐘蚌铜，瀏覽器的緩存時(shí)間一般在1分鐘或30s。 - DNS緩存可以用來(lái)減少DNS解析這個(gè)過(guò)程的耗時(shí)审葬，DNS解析可能會(huì)增加請(qǐng)求的延遲官册，對(duì)于那些需要請(qǐng)求許多第三方的資源的網(wǎng)站而言，DNS解析的耗時(shí)延遲可能會(huì)大大降低網(wǎng)頁(yè)加載性能根吁。
- DNS服務(wù)器 + DNS緩存 組成了DNS系統(tǒng)昆汹。
- DNS 解析的過(guò)程
瀏覽器-------（發(fā)送域名） DNS緩存 + DNS服務(wù)器
DNS緩存 + DNS服務(wù)器 ------- （返回IP地址）瀏覽器
- dns-prefetch
dns-prefetch可幫助開(kāi)發(fā)人員處理DNS解析延遲問(wèn)題。
dns-prefetch僅對(duì)跨域域上的DNS查找有效
dns-prefetch的MDN文檔
<link rel = "dns-prefetch" >
對(duì)DNS做優(yōu)化（前端方面）婴栽。原理：就是在頁(yè)面一加載的時(shí)候满粗，就會(huì)立即把href指定的域名做DNS查詢，并且緩存起來(lái)愚争，當(dāng)真正做域名解析時(shí)映皆，就可以省去DNS查詢的時(shí)間，可提高頁(yè)面加載的請(qǐng)求速度轰枝。
資源請(qǐng)求的過(guò)程
資源可以是html,css,js捅彻，請(qǐng)求接口等“霸桑可以通過(guò)HTTP請(qǐng)求得到的響應(yīng)的任何內(nèi)容步淹。
瀏覽器---> (Request-header + 參數(shù)（Url或body）)后端服務(wù)器
后端服務(wù)器 ----> (status + Response-header)瀏覽器
瀏覽器解析資源
瀏覽器對(duì)于頁(yè)面的解析是至上而下的从隆，通過(guò)解析html來(lái)構(gòu)建DOM樹(shù)，當(dāng)解析到<link>標(biāo)簽或@import時(shí)缭裆，就會(huì)請(qǐng)求服務(wù)器獲取css文件键闺，在下載的同時(shí)瀏覽器還是會(huì)繼續(xù)向下解析的，但當(dāng)下載js文件和執(zhí)行它時(shí)澈驼，解析器便會(huì)停止手頭的工作辛燥，等待js的操作完成后再向下解析，這便是js的阻塞問(wèn)題缝其，也是為什么<link>標(biāo)簽可以放在<head>中挎塌，而引入的js文件最好放在</body>前面的原因，這樣可以避免js阻塞了html的解析而導(dǎo)致頁(yè)面短時(shí)間內(nèi)無(wú)法呈現(xiàn)在用戶面前的尷尬情況内边。
html5中提供了defer和async來(lái)實(shí)現(xiàn)js外聯(lián)的無(wú)阻塞加載
<link>和@imoprt的區(qū)別：
link是XHTML標(biāo)簽榴都，除了加載CSS外，還可以定義RSS等其他事務(wù)漠其；@import屬于CSS范疇缭贡，只能加載CSS
link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載辉懒；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載
link是XHTML標(biāo)簽阳惹，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的眶俩，低版本的瀏覽器不支持
link支持使用Javascript控制DOM去改變樣式莹汤；而@import不支持
瀏覽器渲染頁(yè)面
- 解析html的時(shí)候會(huì)生成DOM樹(shù)，而解析css則會(huì)生成CSSOM樹(shù)颠印，前者描述內(nèi)容纲岭，后者描述應(yīng)用與內(nèi)容的樣式規(guī)則。
- DOM樹(shù)和CSSOM結(jié)合在一起會(huì)構(gòu)成一棵渲染樹(shù)线罕，渲染樹(shù)既包含了頁(yè)面上所有的可視DOM節(jié)點(diǎn)止潮，又包含了CSSOM中每個(gè)節(jié)點(diǎn)的樣式信息。
- 渲染樹(shù)的構(gòu)建步驟：
- 從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始钞楼，遍歷所有的可視節(jié)點(diǎn)喇闸，不可視節(jié)點(diǎn)有：
a 腳本標(biāo)簽，元數(shù)據(jù)標(biāo)簽
b 應(yīng)用display：none的元素 - 對(duì)于可視節(jié)點(diǎn)询件，從CSSOM中找到對(duì)應(yīng)的樣式規(guī)則燃乍，附加在節(jié)點(diǎn)上
- 輸出可視節(jié)點(diǎn)以及每個(gè)節(jié)點(diǎn)計(jì)算出來(lái)的樣式
布局
通過(guò)渲染樹(shù)，瀏覽器已經(jīng)能知道可視內(nèi)容的樣式信息了宛琅，但是真正要渲染時(shí)刻蟹，我們還需要獲取節(jié)點(diǎn)的位置和尺寸，這是布局階段要做的工作嘿辟，也成為“回流”（reflow）.
布局階段的輸出結(jié)果成為“盒模型”（box model）舆瘪，盒模型精確表達(dá)了窗口中元素的位置和大小片效，所有相對(duì)的度量單位都會(huì)被轉(zhuǎn)化為屏幕上的絕對(duì)像素位置。
當(dāng)以上步驟都完成后英古，瀏覽器就能把節(jié)點(diǎn)繪制成屏幕上每個(gè)真實(shí)的像素點(diǎn)了淀衣，此階段為“繪制”或者“重繪”（resterizing）
