從輸入URL地址到顯示完整的頁面Webkit都作了哪些事情

從輸入URL地址到顯示完整的頁面Webkit都作了哪些事情

從輸入地址到獲取到數據的流程

一、輸入URL地址,如：http://www.yejm16361.com/demo...。

二、DNS解析URL地址中的域名返回IP地址（若是是主機名是IP地址就跳過該步驟）。

三、 創建TCP鏈接，這就是經典的TCP鏈接中的三次握手，總的來講做用就是爲了在不可靠信道上可以可靠的傳輸。

四、瀏覽器向 web 服務器發送一個 HTTP 請求命令，如：GET/demo/index.html HTTP/1.1。

五、瀏覽器向 web 服務器發送請求頭信息。

六、Web服務器應答，如：HTTP/1.1 200 OK，包含應答協議版本號和狀態碼。

七、Web服務器發送應答頭信息。

八、Web服務器向瀏覽器發送數據。

九、Web服務器關閉TCP鏈接（若是瀏覽器或者服務器在其頭信息加入了這行代碼：Connection:keep-alive就延時跳過該步驟，超時仍然會關閉TCP鏈接，超時時間通常是5秒或15秒）。

從獲取到數據到顯示最終完整頁面的流程

一、在輸入URL以後，依賴網絡模塊，webkit資源加載器加載HTML網頁（只要是webkit可以解析的，都會把輸入的URL地址資源當成HTML解析）。

二、加載完HTML網頁以後，就會調動HTML解析器去解析構建節點。

三、解析期間若是遇到link節點，就會調用資源加載器去異步加載，完成以後用css解析器解析執行；若是是行內樣式，會當即交給CSS解析器解析執行。這裏CSS解析器，解析結果會生成一個css rule tree（css規則樹）。

四、解析期間若是遇到script節點，就調用javascript解析器去解析並執行，這裏注意的是若是是src腳本，那麼在設置了H5新加的async屬性的時候會異步加載加載並執行，不然會同步加載解析並執行，且阻塞dom樹的建立；若是是行內腳本，那麼不管怎麼設置都會當即解析並執行，且阻塞dom樹的建立。這裏Javascript腳本執行主要是經過DOM API和CSSOM API來操做DOM樹和CSS規則樹。

五、解析期間若是遇到節點會依賴其餘資源，如：圖片，視屏，語音等，webkit會調用相應的加載器利用網絡模塊，去異步加載解析。

六、等到全部的同步和異步資源解析完成以後，瀏覽器引擎會把DOM樹中無需渲染的節點（如display:none修飾的節點）不放進Rendering Tree（渲染樹）中，並把CSS規則樹中的樣式附加給渲染樹相應的dom節點，而後計算每個dom節點的位置，這也就是layout（佈局）和reflow（重排，迴流）過程。