成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

地址欄輸入U(xiǎn)RL之后到底發(fā)生了哪些事情

calx / 1944人閱讀

摘要：此時(shí)樹，樹建好，并渲染完成異步請(qǐng)求開始若有斷開每個(gè)長連接都會(huì)有一定時(shí)限，當(dāng)請(qǐng)求完成之后，斷開連接上面就是整個(gè)請(qǐng)求淘寶頁面到所有數(shù)據(jù)同步異步接收完成并渲染的整個(gè)過程。

地址欄輸入U(xiǎn)RL之后到底發(fā)生了哪些事情？

這個(gè)問題應(yīng)該是前端面試中被問概率較大的知識(shí)點(diǎn)，綜合考察了面試者對(duì)于瀏覽器，計(jì)算機(jī)網(wǎng)絡(luò)，HTTP協(xié)議，服務(wù)器等的基礎(chǔ)。本人學(xué)生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考前人的總結(jié)，前端時(shí)間用Navigation Timing draft實(shí)現(xiàn)了埋點(diǎn)統(tǒng)計(jì)頁面加載時(shí)間，發(fā)現(xiàn)可以從另一個(gè)角度詳解頁面加載的過程。

Navigation Timing API是在HTML 5中新增一個(gè)可被用于準(zhǔn)確測(cè)試頁面性能的API，該API提供一種簡單的獲取頁面被導(dǎo)航或被加載時(shí)的時(shí)間及相關(guān)信息的方法。目前為止，在Internet Explorer 9、Google Chrome以及Firefox nightly Builds瀏覽器中對(duì)該API提供支持，目前處于草案中。

下圖為發(fā)起頁面請(qǐng)求時(shí)所經(jīng)歷的過程：

下面我們以上圖為時(shí)間軸，以淘寶為例，說說地址欄輸入U(xiǎn)RL之后發(fā)生了哪些事情

1 用戶在URL欄輸入 baidu.com（便于說明重定向，采用移動(dòng)端訪問）
2 navigationStart：準(zhǔn)備開始請(qǐng)求新頁面
3 redirectStart~redirectEnd：頁面重定向
由于地址欄輸入的是taobao.com
經(jīng)過302重定向到http://www.taobao.com/,
再經(jīng)過307重定向到https://www.taobao.com/,
再進(jìn)過302重定向到http://m.taobao.com/?sprefer=...
最后經(jīng)過307重定向到https://m.taobao.com/?sprefer...
即，經(jīng)過四次重定向最終訪問移動(dòng)版淘寶首頁
注意，每個(gè)重定向都是在建立各自TCP/IP之后才請(qǐng)求的。也就是說上述重定向每次都經(jīng)過DNS->TCP/IP->REQUEST->RESPONSE

最后URL為：https://m.taobao.com/?sprefer...接著到5
4 fetchStart~domainLookupStart：檢查緩存
此時(shí)，若該資源（https://m.taobao.com/?sprefer...）命中強(qiáng)緩存（Expires/Cache-control），則直接讀取緩存，不再發(fā)起網(wǎng)絡(luò)請(qǐng)求，到9。
有關(guān)緩存參考上一篇文章說說web緩存
由于http://m.taobao.com/?sprefer=...未命中緩存，接著到5
5 domainLookupStart~domainLookupEnd：檢查DNS
若因?yàn)槿魏卧驔]有去檢查DNS（即瀏覽器使用了緩存，持久連接，或者本地資源）而無需檢查DNS，該步跳過，到6。否則在檢查本地網(wǎng)絡(luò)的DNS服務(wù)器，找到服務(wù)器IP。
6 connectStart~connectEnd:建立TCP/IP三次握手連接
若為HTTPS，多一個(gè)secureConnection,即SSL協(xié)議握手過程。此后每次通信都多加解密過程。

7 RequestStart~RequestEnd:服務(wù)器處理數(shù)據(jù)，并返回。
此時(shí)，若命中協(xié)商緩存，返回304，且不帶內(nèi)容實(shí)體。若未命中，返回內(nèi)容實(shí)體。
8 responseStart~responseEnd:瀏覽器接收數(shù)據(jù)（先接收頭部，再內(nèi)容）
9 卸載當(dāng)前頁面（如有的話）
10 domLoading：加載HTML,并從上到下解析HTML,構(gòu)建DOM樹,Render樹,回流,重繪。若遇到需要加載的資源，若JS,CSS,圖片等，暫停解析，請(qǐng)求資源。
由于HTTP/1.1中使用長連接keep-connection:active,此時(shí)可直接發(fā)起多個(gè)后續(xù)請(qǐng)求，無需重新建立TCP/IP，如下圖，都是在同一主機(jī)下的資源。

11 若需要加載的資源和當(dāng)前頁面不是在同一個(gè)域名下，需要重新從3~8獲取資源。瀏覽器可以并發(fā)請(qǐng)求多個(gè)資源，即同時(shí)建立多個(gè)TCP/IP，一般同個(gè)域名下IE67為2個(gè)，其他為6個(gè)。
12 若需要加載的資源位于CDN服務(wù)器上，則在DNS解析中，找到最近的CDN服務(wù)器節(jié)點(diǎn)，并一級(jí)依次找到多級(jí)緩存服務(wù)器（如有），并解析出真實(shí)IP地址。
以一下資源為例，存在于CDN服務(wù)器中，并經(jīng)過多個(gè)緩存服務(wù)器，最終獲取資源。此時(shí)，若緩存服務(wù)器未過期，則將直接返回緩存服務(wù)器的HTML。若已過期，各級(jí)緩存服務(wù)器將請(qǐng)求源服務(wù)器的資源，本地備份并返回給瀏覽器。

13 domInteractive：文檔解析完成的時(shí)刻
14 domContentLoadedEventStart~domContentLoadedEventEnd：
當(dāng)DOMContentLoaded事件觸發(fā)之前，瀏覽器完成所有script（包括設(shè)置了defer屬性但未設(shè)置async屬性的script）的下載和解析之后的時(shí)刻。
15 domComplete：document.readyState屬性設(shè)置為"complete"。此時(shí)DOM樹，Render樹建好，并渲染完成
16 異步請(qǐng)求開始（若有）
17 TCP/IP斷開：每個(gè)長連接都會(huì)有一定時(shí)限，當(dāng)請(qǐng)求完成之后，斷開TCP/IP連接

上面就是整個(gè)請(qǐng)求淘寶頁面到所有數(shù)據(jù)（同步異步）接收完成并渲染的整個(gè)過程。我能想到的點(diǎn)只有這些，如有錯(cuò)誤，懇請(qǐng)大家指出，也歡迎補(bǔ)充！

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

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

相關(guān)文章

  • 地址欄輸入URL之后到底發(fā)生了哪些事情

    摘要：此時(shí)樹，樹建好，并渲染完成異步請(qǐng)求開始若有斷開每個(gè)長連接都會(huì)有一定時(shí)限，當(dāng)請(qǐng)求完成之后，斷開連接上面就是整個(gè)請(qǐng)求淘寶頁面到所有數(shù)據(jù)同步異步接收完成并渲染的整個(gè)過程。 地址欄輸入U(xiǎn)RL之后到底發(fā)生了哪些事情？ 這個(gè)問題應(yīng)該是前端面試中被問概率較大的知識(shí)點(diǎn)，綜合考察了面試者對(duì)于瀏覽器，計(jì)算機(jī)網(wǎng)絡(luò)，HTTP協(xié)議，服務(wù)器等的基礎(chǔ)。本人學(xué)生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...

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

  • 地址欄輸入URL之后到底發(fā)生了哪些事情

    摘要：此時(shí)樹，樹建好，并渲染完成異步請(qǐng)求開始若有斷開每個(gè)長連接都會(huì)有一定時(shí)限，當(dāng)請(qǐng)求完成之后，斷開連接上面就是整個(gè)請(qǐng)求淘寶頁面到所有數(shù)據(jù)同步異步接收完成并渲染的整個(gè)過程。 地址欄輸入U(xiǎn)RL之后到底發(fā)生了哪些事情？ 這個(gè)問題應(yīng)該是前端面試中被問概率較大的知識(shí)點(diǎn)，綜合考察了面試者對(duì)于瀏覽器，計(jì)算機(jī)網(wǎng)絡(luò)，HTTP協(xié)議，服務(wù)器等的基礎(chǔ)。本人學(xué)生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...

    張率功 評(píng)論0 收藏0

  • 地址欄輸入URL之后到底發(fā)生了哪些事情

    摘要：此時(shí)樹，樹建好，并渲染完成異步請(qǐng)求開始若有斷開每個(gè)長連接都會(huì)有一定時(shí)限，當(dāng)請(qǐng)求完成之后，斷開連接上面就是整個(gè)請(qǐng)求淘寶頁面到所有數(shù)據(jù)同步異步接收完成并渲染的整個(gè)過程。 地址欄輸入U(xiǎn)RL之后到底發(fā)生了哪些事情？ 這個(gè)問題應(yīng)該是前端面試中被問概率較大的知識(shí)點(diǎn)，綜合考察了面試者對(duì)于瀏覽器，計(jì)算機(jī)網(wǎng)絡(luò)，HTTP協(xié)議，服務(wù)器等的基礎(chǔ)。本人學(xué)生黨一枚，近期找工作的過程中也被問了兩次，之前回答都是參考...

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

  • 前端面試題：從url到頁面展現(xiàn)，這之中發(fā)生了什么？

    摘要：比如對(duì)于的，瀏覽器實(shí)際上不知道到底是什么東西，需要查找網(wǎng)站所在服務(wù)器的地址，才能找到目標(biāo)，這就是下文要說的域名解析。二域名解析當(dāng)用戶在瀏覽器中輸入后你使用的電腦會(huì)發(fā)出一個(gè)請(qǐng)求到本地服務(wù)器。 showImg(https://segmentfault.com/img/remote/1460000009317499?w=700&h=466); 這里markdown格式跟簡書不太一樣，排版可能...

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

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

0條評(píng)論

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