資訊專欄INFORMATION COLUMN
摘要：從輸入地址到顯示完整的頁(yè)面都做了哪些事情從輸入地址到獲取到數(shù)據(jù)的流程輸入地址如。從獲取到數(shù)據(jù)到顯示最終完整頁(yè)面的流程在輸入之后，依賴網(wǎng)絡(luò)模塊，資源加載器加載網(wǎng)頁(yè)只要是能夠解析的，都會(huì)把輸入的地址資源當(dāng)成解析。
從輸入U(xiǎn)RL地址到顯示完整的頁(yè)面Webkit都做了哪些事情 從輸入地址到獲取到數(shù)據(jù)的流程
1、輸入U(xiǎn)RL地址,如：http://www.yejm16361.com/demo...。
2、DNS解析URL地址中的域名返回IP地址（如果是主機(jī)名是IP地址就跳過(guò)該步驟）。
3、 建立TCP連接，這就是經(jīng)典的TCP連接中的三次握手，總的來(lái)說(shuō)作用就是為了在不可靠信道上能夠可靠的傳輸。
4、瀏覽器向 web 服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求命令，如：GET/demo/index.html HTTP/1.1。
5、瀏覽器向 web 服務(wù)器發(fā)送請(qǐng)求頭信息。
6、Web服務(wù)器應(yīng)答，如：HTTP/1.1 200 OK，包含應(yīng)答協(xié)議版本號(hào)和狀態(tài)碼。
7、Web服務(wù)器發(fā)送應(yīng)答頭信息。
8、Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)。
9、Web服務(wù)器關(guān)閉TCP連接（如果瀏覽器或者服務(wù)器在其頭信息加入了這行代碼：Connection:keep-alive就延時(shí)跳過(guò)該步驟，超時(shí)仍然會(huì)關(guān)閉TCP連接，超時(shí)時(shí)間一般是5秒或15秒）。
從獲取到數(shù)據(jù)到顯示最終完整頁(yè)面的流程1、在輸入U(xiǎn)RL之后，依賴網(wǎng)絡(luò)模塊，webkit資源加載器加載HTML網(wǎng)頁(yè)（只要是webkit能夠解析的，都會(huì)把輸入的URL地址資源當(dāng)成HTML解析）。
2、加載完HTML網(wǎng)頁(yè)之后，就會(huì)調(diào)動(dòng)HTML解析器去解析構(gòu)建節(jié)點(diǎn)。
3、解析期間如果遇到link節(jié)點(diǎn)，就會(huì)調(diào)用資源加載器去異步加載，完成之后用css解析器解析執(zhí)行；如果是行內(nèi)樣式，會(huì)立即交給CSS解析器解析執(zhí)行。這里CSS解析器，解析結(jié)果會(huì)生成一個(gè)css rule tree（css規(guī)則樹(shù)）。
4、解析期間如果遇到script節(jié)點(diǎn)，就調(diào)用javascript解析器去解析并執(zhí)行，這里注意的是如果是src腳本，那么在設(shè)置了H5新加的async屬性的時(shí)候會(huì)異步加載加載并執(zhí)行，否則會(huì)同步加載解析并執(zhí)行，且阻塞dom樹(shù)的創(chuàng)建；如果是行內(nèi)腳本，那么無(wú)論怎么設(shè)置都會(huì)立即解析并執(zhí)行，且阻塞dom樹(shù)的創(chuàng)建。這里Javascript腳本執(zhí)行主要是通過(guò)DOM API和CSSOM API來(lái)操作DOM樹(shù)和CSS規(guī)則樹(shù)。
5、解析期間如果遇到節(jié)點(diǎn)會(huì)依賴其他資源，如：圖片，視屏，語(yǔ)音等，webkit會(huì)調(diào)用相應(yīng)的加載器利用網(wǎng)絡(luò)模塊，去異步加載解析。
6、等到所有的同步和異步資源解析完成之后，瀏覽器引擎會(huì)把DOM樹(shù)中無(wú)需渲染的節(jié)點(diǎn)（如display:none修飾的節(jié)點(diǎn)）不放進(jìn)Rendering Tree（渲染樹(shù)）中，并把CSS規(guī)則樹(shù)中的樣式附加給渲染樹(shù)相應(yīng)的dom節(jié)點(diǎn)，然后計(jì)算每一個(gè)dom節(jié)點(diǎn)的位置，這也就是layout（布局）和reflow（重排，回流）過(guò)程。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84712.html
摘要：很久以前理解過(guò)一個(gè)從在瀏覽器地址欄輸入，經(jīng)常建站但是不明白原理，總結(jié)一下。瀏覽器地址欄輸入瀏覽器會(huì)先查看瀏覽器緩存系統(tǒng)緩存路由緩存，如有存在緩存，就直接顯示。 很久以前理解過(guò)一個(gè)URL從在瀏覽器地址欄輸入，經(jīng)常建站但是不明白原理，總結(jié)一下。 showImg(https://segmentfault.com/img/bVbj2Rv?w=512&h=502); 1、瀏覽器地址欄輸入url ...
摘要：在上述過(guò)程再細(xì)化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過(guò)程如下在中這一過(guò)程如下首先是字節(jié)流，經(jīng)過(guò)解碼之后是字符流，然后通過(guò)詞法分析器會(huì)被解釋成詞語(yǔ)，之后經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一棵樹(shù)。 面試的時(shí)候，我們經(jīng)常會(huì)被問(wèn)從在瀏覽器地址欄中輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？ 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...
摘要：在上述過(guò)程再細(xì)化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過(guò)程如下在中這一過(guò)程如下首先是字節(jié)流，經(jīng)過(guò)解碼之后是字符流，然后通過(guò)詞法分析器會(huì)被解釋成詞語(yǔ)，之后經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一棵樹(shù)。 面試的時(shí)候，我們經(jīng)常會(huì)被問(wèn)從在瀏覽器地址欄中輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？ 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...
摘要：在上述過(guò)程再細(xì)化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過(guò)程如下在中這一過(guò)程如下首先是字節(jié)流，經(jīng)過(guò)解碼之后是字符流，然后通過(guò)詞法分析器會(huì)被解釋成詞語(yǔ)，之后經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一棵樹(shù)。 面試的時(shí)候，我們經(jīng)常會(huì)被問(wèn)從在瀏覽器地址欄中輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？ 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...
閱讀 1708·2023-04-26 01:02
閱讀 4870·2021-11-24 09:39
閱讀 1807·2019-08-30 15:44
閱讀 2891·2019-08-30 11:10
閱讀 1787·2019-08-30 10:49
閱讀 988·2019-08-29 17:06
閱讀 611·2019-08-29 16:15
閱讀 908·2019-08-29 15:17
