亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

從輸入U(xiǎn)RL地址到顯示完整的頁面Webkit都做了哪些事情

468122151 / 3148人閱讀

摘要:從輸入地址到顯示完整的頁面都做了哪些事情從輸入地址到獲取到數(shù)據(jù)的流程輸入地址如。從獲取到數(shù)據(jù)到顯示最終完整頁面的流程在輸入之后,依賴網(wǎng)絡(luò)模塊,資源加載器加載網(wǎng)頁只要是能夠解析的,都會(huì)把輸入的地址資源當(dāng)成解析。

從輸入U(xiǎn)RL地址到顯示完整的頁面Webkit都做了哪些事情 從輸入地址到獲取到數(shù)據(jù)的流程

1、輸入U(xiǎn)RL地址,如:http://www.yejm16361.com/demo...。

2、DNS解析URL地址中的域名返回IP地址(如果是主機(jī)名是IP地址就跳過該步驟)。

3、 建立TCP連接,這就是經(jīng)典的TCP連接中的三次握手,總的來說作用就是為了在不可靠信道上能夠可靠的傳輸。

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í)跳過該步驟,超時(shí)仍然會(huì)關(guān)閉TCP連接,超時(shí)時(shí)間一般是5秒或15秒)。

從獲取到數(shù)據(jù)到顯示最終完整頁面的流程

1、在輸入U(xiǎn)RL之后,依賴網(wǎng)絡(luò)模塊,webkit資源加載器加載HTML網(wǎng)頁(只要是webkit能夠解析的,都會(huì)把輸入的URL地址資源當(dāng)成HTML解析)。

2、加載完HTML網(wǎng)頁之后,就會(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ī)則樹)。

4、解析期間如果遇到script節(jié)點(diǎn),就調(diào)用javascript解析器解析并執(zhí)行,這里注意的是如果是src腳本,那么在設(shè)置了H5新加的async屬性的時(shí)候會(huì)異步加載加載并執(zhí)行,否則會(huì)同步加載解析并執(zhí)行,且阻塞dom樹的創(chuàng)建;如果是行內(nèi)腳本,那么無論怎么設(shè)置都會(huì)立即解析并執(zhí)行,且阻塞dom樹的創(chuàng)建。這里Javascript腳本執(zhí)行主要是通過DOM API和CSSOM API來操作DOM樹和CSS規(guī)則樹。

5、解析期間如果遇到節(jié)點(diǎn)會(huì)依賴其他資源,如:圖片,視屏,語音等,webkit會(huì)調(diào)用相應(yīng)的加載器利用網(wǎng)絡(luò)模塊,去異步加載解析。

6、等到所有的同步和異步資源解析完成之后,瀏覽器引擎會(huì)把DOM樹中無需渲染的節(jié)點(diǎn)(如display:none修飾的節(jié)點(diǎn))不放進(jìn)Rendering Tree(渲染樹)中,并把CSS規(guī)則樹中的樣式附加給渲染樹相應(yīng)的dom節(jié)點(diǎn),然后計(jì)算每一個(gè)dom節(jié)點(diǎn)的位置,這也就是layout(布局)和reflow(重排,回流)過程。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/84712.html

相關(guān)文章

  • 【前端】輸入頁面地址展示頁面信息 瀏覽器和服務(wù)器做了什么

    摘要:很久以前理解過一個(gè)從在瀏覽器地址欄輸入,經(jīng)常建站但是不明白原理,總結(jié)一下。瀏覽器地址欄輸入瀏覽器會(huì)先查看瀏覽器緩存系統(tǒng)緩存路由緩存,如有存在緩存,就直接顯示。 很久以前理解過一個(gè)URL從在瀏覽器地址欄輸入,經(jīng)常建站但是不明白原理,總結(jié)一下。 showImg(https://segmentfault.com/img/bVbj2Rv?w=512&h=502); 1、瀏覽器地址欄輸入url ...

    Atom 評(píng)論0 收藏0
  • 輸入 url 頁面展現(xiàn)短短幾秒內(nèi)瀏覽器究竟做了什么?

    摘要:在上述過程再細(xì)化為瀏覽器搜索自己的緩存。至此,瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過程如下在中這一過程如下首先是字節(jié)流,經(jīng)過解碼之后是字符流,然后通過詞法分析器會(huì)被解釋成詞語,之后經(jīng)過語法分析器構(gòu)建成節(jié)點(diǎn),最后這些節(jié)點(diǎn)被組建成一棵樹。 面試的時(shí)候,我們經(jīng)常會(huì)被問從在瀏覽器地址欄中輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么?那么瀏覽器到底做了啥? 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...

    dackel 評(píng)論0 收藏0
  • 輸入 url 頁面展現(xiàn)短短幾秒內(nèi)瀏覽器究竟做了什么?

    摘要:在上述過程再細(xì)化為瀏覽器搜索自己的緩存。至此,瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過程如下在中這一過程如下首先是字節(jié)流,經(jīng)過解碼之后是字符流,然后通過詞法分析器會(huì)被解釋成詞語,之后經(jīng)過語法分析器構(gòu)建成節(jié)點(diǎn),最后這些節(jié)點(diǎn)被組建成一棵樹。 面試的時(shí)候,我們經(jīng)常會(huì)被問從在瀏覽器地址欄中輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么?那么瀏覽器到底做了啥? 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...

    2json 評(píng)論0 收藏0
  • 輸入 url 頁面展現(xiàn)短短幾秒內(nèi)瀏覽器究竟做了什么?

    摘要:在上述過程再細(xì)化為瀏覽器搜索自己的緩存。至此,瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過程如下在中這一過程如下首先是字節(jié)流,經(jīng)過解碼之后是字符流,然后通過詞法分析器會(huì)被解釋成詞語,之后經(jīng)過語法分析器構(gòu)建成節(jié)點(diǎn),最后這些節(jié)點(diǎn)被組建成一棵樹。 面試的時(shí)候,我們經(jīng)常會(huì)被問從在瀏覽器地址欄中輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么?那么瀏覽器到底做了啥? 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...

    tigerZH 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<