天天看點

頁面從輸入 URL 到頁面加載顯示完成

這題勝在區分度高,知識點覆寫廣,再不懂的人,也能答出幾句, 而高手可以根據自己擅長的領域自由發揮,從URL規範、HTTP協定、DNS、CDN、資料庫查詢、 到浏覽器流式解析、CSS規則建構、layout、paint、onload/domready、JS執行、JS API綁定等等;

詳細版

:

1、浏覽器會開啟一個線程來處理這個請求,對 URL 分析判斷如果是 http 協定就按照 Web 方式來處理;

2、調用浏覽器核心中的對應方法,比如 WebView 中的 loadUrl 方法;

3、通過DNS解析擷取網址的IP位址,設定 UA 等資訊發出第二個GET請求;

4、進行HTTP協定會話,用戶端發送報頭(請求報頭);

5、進入到web伺服器上的 Web Server,如 Apache、Tomcat、Node.JS 等伺服器;

6、進入部署好的後端應用,如 PHP、Java、JavaScript、Python 等,找到對應的請求處理;

7、處理結束回饋報頭,此處如果浏覽器通路過,緩存上有對應資源,會與伺服器最後修改時間對比,一緻則傳回304;

8、浏覽器開始下載下傳html文檔(響應報頭,狀态碼200),同時使用緩存;

9、文檔樹建立,根據标記請求所需指定MIME類型的檔案(比如css、js),同時設定了cookie;

10、頁面開始渲染DOM,JS根據DOM API操作DOM,執行事件綁定等,頁面顯示完成。

簡潔版:

1、浏覽器根據請求的URL交給DNS域名解析,找到真實IP,向伺服器發起請求;

2、伺服器交給背景處理完成後傳回資料,浏覽器接收檔案(HTML、JS、CSS、圖象等);

3、浏覽器對加載到的資源(HTML、JS、CSS等)進行文法解析,建立相應的内部資料結構(如HTML的DOM);

4、載入解析到的資源檔案,渲染頁面,完成。

總結:

1、浏覽器位址欄輸入url

2、浏覽器會先檢視浏覽器緩存--系統緩存--路由緩存,如有存在緩存,就直接顯示。如果沒有,接着第三步

3、域名解析(DNS)擷取相應的ip

4、浏覽器向伺服器發起tcp連接配接,與浏覽器建立tcp三次握手

5、握手成功,浏覽器向伺服器發送http請求,請求資料包

6、伺服器請求資料,将資料傳回到浏覽器

7、浏覽器接收響應,讀取頁面内容,解析html源碼,生成DOm樹

8、解析css樣式、浏覽器渲染,js互動

。。。。。。。。。。。。

1、浏覽器先檢查URL,先判斷協定,再對URL進行安全檢查,最後調用浏覽器核心的loadURL方法

2、浏覽器核心先檢視緩存,然後設定HTTP協定,最後發送http請求

3、通過DNS拿到請求伺服器IP位址,然後調用socket API對資料進行底層協定的封裝,将http資料包裝TCP/UDP標頭,在封裝IP標頭

4、将封裝好的資料包從本級網卡發送到伺服器

5、伺服器接收到浏覽器請求後進行處理,然後傳回html檔案

6、浏覽器接收到html檔案,可能需要解壓(涉及編碼格式)

7、浏覽器開始載入html代碼,發現<head>标簽内有一個<link>标簽引用外部css檔案

8、浏覽器又發出css檔案的請求,等待伺服器傳回這個css檔案;附:在下載下傳css檔案的過程中,不會堵塞頁面HTML加載和渲染

9、浏覽器又發現一個<script>标簽引用外部js檔案,發出js檔案請求,伺服器傳回這個js檔案;附件:在下載下傳js檔案過程中,會堵塞頁面HTML的加載和渲染,即為預設的同步腳本

10、浏覽器執行傳回的js檔案腳本,此時頁面的HTML加載和渲染都被堵塞

11、浏覽器進入<body>,此時已經有了外部css檔案,一邊加載HTML,一邊渲染;

12、遇到<img>标簽的時候,浏覽器向伺服器發送請求,不用等圖檔下載下傳完,繼續加載和渲染後面的HTML

13、當伺服器傳回圖檔的時候,由于圖檔大小會影響後面的文檔排版,是以浏覽器會回頭重新渲染<img>标簽後的所有HTML

14、遇到嵌入<script>時,浏覽器會停止頁面的加載和渲染,改去執行<script>中的腳本,如果腳本中有改變DOM樹的代碼,那麼浏覽器會重新渲染被改變部分的html

15、直到最後解析到文檔最後,浏覽器加載頁面才算完成。

繼續閱讀