重溫一下計算機網絡的重要知識
例如:當我們在web瀏覽器的地址欄中輸入:www.baidu.com
並回車,具體發生了什麼。
- 第一層理解
- 對網址進行DNS域名解析,得到對應的公網IP地址
- 根據這個IP,找到對應的服務器,發起TCP的三次握手
- 建立TCP連接後發起HTTP請求
- 服務器響應HTTP請求,瀏覽器得到html代碼
- 瀏覽器解析html代碼,並請求html代碼中的資源(比如js、css、圖片等)注意:要得到html代碼,才能去找到這些資源
- 瀏覽器對頁面進行渲染呈現給用戶
- 服務器關閉TCP連接
-
過程再推演 依舊是1.0版本:
(1)url(www.baidu.com) => ip(比如:192.168.1.2)
(2)拿到ip去跟服務器建立tcp連接
(3)建立tcp連接之後發起http請求(tcp是比http更底層的一個連接協議)
(4)http連接建立之後,服務器把html發送給瀏覽器
(5)瀏覽器解析html(js文件,css文件,圖片 下載 運行)
(6)瀏覽器渲染html
(7)服務器關閉連接 -
進階2.0:
(1)DNS如何找到域名:採用遞歸查詢的方式 先去DNS緩存裏找 ->緩存中沒有就去根域名服務器裏找->根域名服務器又會尋找下一級
(2)爲什麼HTTP協議要基於TCP來實現:TCP是一個端到端的可靠的面向連接的協議,HTTP(位於應用層)基於TCP(位於傳輸層)協議不用擔心數據傳輸可能會發生的各種問題(比如發生錯誤之後TCP支持重傳)
(3)瀏覽器是如何對頁面進行渲染的:
①解析html文件構成DOM樹
②解析css文件生成css渲染樹,html生成的dom樹和css生成的css渲染樹一起構成一顆html渲染樹
③一邊解析,一邊渲染。
④js單線程運行,js有可能修改DOM結構,意味着js執行完成前,後續所有資源的下載是沒有必要的。 -
3.0版本
(1)url =>ip
①從瀏覽器自身域名緩存中查找
②從操作系統的域名緩存中查找
③從hosts文件(記錄ip和域名之間的映射關係的一個文件)中查找(這一步我們可以進行人爲干預,通過更改hosts文件)
④從域名服務器中查找
(2)web這邊是如何渲染的:
reflow(迴流)和repain(重繪)