從輸入URL到頁面渲染發生了什麼

例如：從輸入到頁面渲染發生了下方如圖的事情。

詳細的過程：

（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）當改變影響文件內容或者結構，或者元素位置時，回流操作就會被觸發。