例如:從輸入到頁面渲染發生了下方如圖的事情。
詳細的過程:
(1)客戶端將url輸入到瀏覽器位址列,向dns伺服器請求獲取指定網域名稱的ip位址;
(2)dns伺服器解析從客戶端發來的網域名稱,獲取到對應的ip位址,將ip位址傳回到客戶端;
(3)客戶端獲取到ip位址後,在應用層按照http協議,生成針對目標web伺服器的http請求報文。在傳輸層,應用tcp協議,為了方便通訊,將http請求報文分割成報文段,按照序號分為多個報文段,把每個報文可靠地傳輸給對方;
(4)請求報文傳輸至網路層,應用ip協議,搜尋對方的位址,一邊中轉,一邊傳送,一直路由到目標web伺服器。
(5)到達web伺服器,遵循tcp/ip四層結構,將請求報文逐層處理傳到伺服器。在傳輸層,按照tcp協議,將客戶端的報文按照原來的順序重組請求報文;
(6)在應用層,按照http 協議,對web伺服器請求的內容處理,傳至客戶端。
(7)請求的報文傳送至客戶端,再依據四層協議,逐層去首部報文等操作獲取到請求的內容。
(8)請求的內容傳至瀏覽器,接下來進行瀏覽器對內容的渲染過程;
(9)瀏覽器將從伺服器獲取的html文件構建成文件物件模型dom(document object model).;
(10)樣式將被載入和解析,構成層疊樣式表模型cssom(css object model).;
(11)在dom和cssom之上,渲染樹(rendering tree)將會被建立,代表一系列將被渲染的物件;
(12)渲染樹對映除了不可見元素(例如或者含有display:none;的標籤)外的所有dom結構。每一段文字字串都將劃分在不同的渲染物件中,每乙個渲染物件都包含了它相應的dom物件以及計算後的樣式。
(13)渲染樹的每個元素包含的內容都是計算過的,它被稱之為布局layout.瀏覽器使用一種流式處理的方法,只需要一次pass繪製操作就可以布局所有的元素;
(14)當頁面元素樣式的改變不影響元素在文件流中的位置時,瀏覽器只會將新樣式賦予元素並進行重繪操作,這是瀏覽器的重繪;
(15)當改變影響文件內容或者結構,或者元素位置時,回流操作就會被觸發。
從輸入URL到渲染頁面發生了什麼?
網域名稱解析 發起tcp三次握手建立連線 建立連線後發起http請求 伺服器響應請求,瀏覽器獲取html原始碼 瀏覽器渲染頁面 然後先上一張比較直觀的圖 因為 http是不是一種面向連線的協議,在應用層中,僅僅是生成了http請求的資訊和資料,但無法直接傳送,所以才需要先建立tcp連線。tcp在將h...
瀏覽器輸入Url到頁面渲染發生了什麼
1.輸入 2.快取解析 3.網域名稱解析,解析獲取相應的ip位址 4.瀏覽器向伺服器發起tcp連線,與瀏覽器建立tcp三次握手。傳送端首先傳送乙個帶有syn synchronize 標誌地資料報給接收方。接收方接收後,回傳乙個帶有syn ack標誌的資料報傳遞確認資訊,表示我收到了。最後,傳送方再回...
輸入URL位址到最終頁面渲染完成,發生了什麼事
1.url輸入回車 2.dns解析 解析什麼?變成什麼 url 相對伺服器的ip位址 伺服器的ip位址 3.瀏覽器網路向相應伺服器傳送tcp ip連線請求 三次握手 4.建立tcp ip連線 5.瀏覽器網路發起http請求 6.等待 響應過程 wariting 8.解析html 四次揮手 10.時間...