距離上次自己學(xué)習(xí)從url輸入到頁面展示發(fā)生什么到現(xiàn)在也有段時(shí)間了溢十，感覺記憶又開始漸漸變淡了垮刹，所以趕緊跑來擼篇文章強(qiáng)化一下。

簡化版：

1. 瀏覽器通過DNS(domain name system)解析獲得IP地址
2. 通過與服務(wù)器進(jìn)行三次握手進(jìn)而建立連接
3. 瀏覽器發(fā)送http請(qǐng)求報(bào)文
4. 服務(wù)器接受服務(wù)器的請(qǐng)求進(jìn)行相應(yīng)的處理张弛，并將瀏覽器求情的資源返回給瀏覽器
5. 瀏覽器接收服務(wù)器返回的資源荒典，如HTML，CSS吞鸭，JavaScript等
6. 對(duì)HTML,CSS,JavaScript文件進(jìn)行解析寺董，構(gòu)建DOM Tree，Style Rule,Reder Tree,然后進(jìn)行計(jì)算布局刻剥，將頁面展現(xiàn)給用戶

然后詳細(xì)那么一點(diǎn)點(diǎn)：

當(dāng)我們要訪問某個(gè)網(wǎng)站的時(shí)候遮咖，我們會(huì)在瀏覽器的導(dǎo)航條上開始輸入網(wǎng)站的地址，這個(gè)時(shí)候造虏，瀏覽器也開始了它的工作御吞，當(dāng)用戶輸入第一個(gè)字符的時(shí)候?yàn)g覽器便會(huì)開始去猜測(cè)你將會(huì)訪問的地址，并開始與相應(yīng)的服務(wù)器建立TCP鏈接漓藕。

當(dāng)我們輸入完要訪問的網(wǎng)站的網(wǎng)址按下回車之后陶珠，瀏覽器就該去找DNS敘敘舊了。我們知道計(jì)算機(jī)是根據(jù)IP地址來尋找相應(yīng)的瀏覽器的享钞，而我們輸入的url地址(便于人記憶)計(jì)算機(jī)是不能識(shí)別揍诽，所以瀏覽器需要DNS的幫忙，而這又是一個(gè)繁雜的過程栗竖。具體如下：

瀏覽器首先會(huì)去查自身的緩存中是否有該url地址所對(duì)應(yīng)的iIP地址寝姿，如果找不到就會(huì)到計(jì)算機(jī)的DNS緩存中去查找，還沒有划滋，便會(huì)到主機(jī)所連網(wǎng)絡(luò)的高速緩存中去尋找饵筑，如果還是沒找到。這個(gè)時(shí)候便會(huì)通過遞歸查詢的方式到本地域名服務(wù)器去查詢处坪，如果本地域名服務(wù)器中有改url地址對(duì)應(yīng)的IP地址便將其返回給主機(jī)根资，如果沒有的話架专，就會(huì)采用迭代查詢的方式代替主機(jī)去詢問根域名服務(wù)器，如果根域名服務(wù)器也不知道玄帕，它就會(huì)告訴本地域名服務(wù)器部脚，接下來該去那臺(tái)頂級(jí)域名服務(wù)器查詢，如果該頂級(jí)域名服務(wù)器也不知道裤纹，就會(huì)告訴本地域名服務(wù)器接下來改去哪臺(tái)權(quán)限域名服務(wù)器查詢委刘，于是費(fèi)了九牛二虎之力，本地域名服務(wù)器終于拿到了該url地址所對(duì)應(yīng)的IP地址鹰椒，然后它會(huì)自己先緩存一份锡移，免得下次又得跑一趟，然后再告訴本地主機(jī)你想查詢的url地址對(duì)應(yīng)的ip地址是220.235.152.52,我替你問到了漆际。

dns-procedure.gif

瀏覽器在得到了相應(yīng)的IP地址了之后淆珊，瀏覽器便要開啟它的發(fā)送報(bào)文之旅了，整個(gè)發(fā)送的過程從上到下會(huì)依次經(jīng)過互聯(lián)網(wǎng)的五層奸汇，應(yīng)用層（DNS施符，http協(xié)議），傳輸層(TCP,UDP協(xié)議)擂找，網(wǎng)絡(luò)層(IP協(xié)議)戳吝，數(shù)據(jù)鏈路層(以太網(wǎng)協(xié)議，MAC地址)贯涎，物理層(物理設(shè)備骨坑，雙絞線等)，每經(jīng)過一層都會(huì)加入在層相應(yīng)協(xié)議的head柬采，到物理層之后會(huì)通過信號(hào)進(jìn)行過傳播欢唾，將數(shù)據(jù)傳送到相應(yīng)的服務(wù)器所在，有從下到上依次經(jīng)過物聯(lián)網(wǎng)的五層粉捻，在沒經(jīng)過一層都會(huì)對(duì)數(shù)據(jù)報(bào)進(jìn)行解析礁遣，去掉相應(yīng)的head。最后達(dá)到服務(wù)器由服務(wù)器相應(yīng)的程序?qū)ζ溥M(jìn)行處理肩刃。

服務(wù)器程序在處理完瀏覽器發(fā)來的請(qǐng)求以及數(shù)據(jù)之后祟霍，便會(huì)返回相應(yīng)的響應(yīng)報(bào)文，以及將請(qǐng)求的資源發(fā)送給瀏覽器器盈包，瀏覽器在接受到相應(yīng)的資源后便會(huì)開始解析沸呐，常見的便是HTML,CSS,JavaScript文件。

頁面渲染過程：

html_render_icon.png

在進(jìn)行HTML解析的時(shí)候，瀏覽器會(huì)將對(duì)應(yīng)的HTML標(biāo)簽解析成為一棵DOM tree屁置，同時(shí)也會(huì)對(duì)<style>中樣式和外部樣式進(jìn)行解析得到相應(yīng)的Style Rule焊夸，然后通過DOM tree和Style Rule構(gòu)建出一個(gè)Render Tree,緊接著進(jìn)行布局計(jì)算(主要用于計(jì)算每個(gè)元素的位置，以及大小等等)蓝角，最后便是將頁面呈現(xiàn)出來展現(xiàn)給用戶阱穗。
另外需要著重指出的是，parse HTML => reder tree construction =>layout of the reder tree => painting the reder tree是一個(gè)漸進(jìn)的過程使鹅。為了達(dá)到更好的用戶體驗(yàn)揪阶，呈現(xiàn)引擎會(huì)力求盡快將內(nèi)容顯示在屏幕上，它不必等到整個(gè)HTML文檔解析完畢之后并徘，就會(huì)開始構(gòu)建呈現(xiàn)樹和設(shè)置布局遣钳。在不斷接受和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)扰魂，呈現(xiàn)引擎會(huì)將部分內(nèi)解析并顯示出來麦乞。
在上面的講述中，為了方便講解劝评，并沒有涉及的js對(duì)這個(gè)頁面的解析渲染的影響〗阒保現(xiàn)在已我們加入這一部分。首先是js源文件的解析蒋畜，解析的過程需要經(jīng)過詞法分析(Lexical Analysis)以及語法分析(Syntax Analysis)声畏，詞法說明語言所具有的詞匯以及詞匯的含義(就像我們所熟悉的單詞一樣)，而語法則是關(guān)于如何組織詞匯的一些規(guī)則和定義姻成，規(guī)定了什么樣的詞匯按照是什么樣的規(guī)則表達(dá)了什么樣的含義插龄，而詞法分析器，以及語法分析器則是根據(jù)最初的定義的規(guī)則對(duì)字符數(shù)據(jù)進(jìn)行解析科展，從而理解數(shù)據(jù)所傳達(dá)的含義均牢。js源代碼在進(jìn)過詞法分析，語法分析之后才睹，邊會(huì)構(gòu)建成一顆解析樹徘跪，解析樹會(huì)進(jìn)一步進(jìn)行轉(zhuǎn)換成為機(jī)器碼。機(jī)器碼對(duì)頁面的影響主要有repaint 和reflow兩種方式琅攘】迓可能會(huì)影響到DOM Tree，也可能是影響頁面的Style Rules進(jìn)而影響到Reder Tree的構(gòu)建坞琴，當(dāng)然和可能是直接影響到Reder Tree的布局計(jì)算哨查。

關(guān)于repaint和reflow

repaint主要是由于元素的外觀改變所觸發(fā)的瀏覽器行為，像改變background剧辐，color解恰，visibility等僅僅是影響到元素的外觀而而不影響大小的屬性锋八。針對(duì)這些改變，瀏覽器會(huì)根據(jù)新的屬性值進(jìn)行重新繪制护盈，并展現(xiàn)新的外觀挟纱。
reflow主要是由于元素的大小，或者是位置等的改變(這些改變往往也會(huì)影響到周邊元素的位置)從而使得瀏覽器需要對(duì)reder tree進(jìn)行重新渲染腐宋，并帶來相應(yīng)的元素位置紊服，及元素大小的重新計(jì)算。

由此可知胸竞，reflow對(duì)瀏覽器性能的消耗往往比repaint更大欺嗤，因此減少reflow也是性能優(yōu)化的一個(gè)重要手段，例如需要在文檔中插入多個(gè)dom元素的時(shí)候卫枝，通過將多個(gè)元素先插入DocumentFragment 中煎饼，用innerHTML一次性插入多個(gè)dom元素，都是減少reflow提升瀏覽器性能的方法校赤。

拓展--關(guān)于外部css文件吆玖，以及js文件的加載以及HTML文檔解析的阻塞問題

前面我們講到瀏覽器在解析HTML文檔的時(shí)候，如果遇到link標(biāo)簽马篮，script標(biāo)簽都會(huì)發(fā)送http請(qǐng)求去獲取相應(yīng)的資源沾乘，那么在發(fā)送請(qǐng)求到服務(wù)器返回相應(yīng)資源的這段時(shí)間內(nèi)，瀏覽器是會(huì)在哪里等待還是說會(huì)繼續(xù)解析HTML呢浑测？
外部js文件的架在你戶阻塞HTML的解析翅阵。而css文件的加載并不會(huì)阻塞HTML的解析，當(dāng)然是在css文件后沒有緊跟script的情況下迁央，如果跟了js的話就會(huì)進(jìn)行阻塞掷匠，但其實(shí)是js起到的阻塞作用。
對(duì)于js的阻塞岖圈，想大家都不會(huì)覺得陌生讹语，畢竟剛?cè)腴T的時(shí)候常常會(huì)有將script放在頭部，然后再js代碼中寫了獲取某個(gè)元素的并進(jìn)行相應(yīng)操作的邏輯幅狮，然后出現(xiàn)了各種報(bào)錯(cuò)的情況募强，而且是屢試不爽。所以這里就不在多說了崇摄。
對(duì)于外部css文件的加載擎值，我給出的結(jié)論是不會(huì)阻塞HTML的解析。我曾經(jīng)做過的一個(gè)測(cè)試逐抑，測(cè)試的方式是這樣的鸠儿，材料為我曾經(jīng)做過的一份靜態(tài)網(wǎng)頁，然后分別將link標(biāo)簽放在head中，和緊靠</body>进每，然后通過chrome的performce去看html解析和和布局渲染等的出現(xiàn)的時(shí)間來進(jìn)行分析汹粤，以下是一些截圖

Link放在最后

image.png

image.png

image.png

image.png

image.png

image.png

image.png

總結(jié)：將link放在最后，只在120.8ms的時(shí)候進(jìn)行過一次parse HTML后面出現(xiàn)的parse HTML并沒有時(shí)間值田晚，parse stylesheet則出現(xiàn)再parse HTML之后嘱兼，recalculate style之前，之后的全是recalculate贤徒，layout芹壕，paint

Link放前面

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

結(jié)------------------------------------------------------------------------------------