頁面資源加載過程

第一步：解析URL

對拿到的URL作解析，提取裏面的信息。

URL結構：協議+域名+端口號+路徑+參數+[,哈希（前端頁面錨點，用於標記前端頁面位置）]

第二步：DNS查找

拿到上一步解析出來的域名，去DNS上查找該域名對應的IP

域名系統（英文：Domain Name System，縮寫：DNS）是互聯網的一項服務。它做爲將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便地訪問互聯網，瀏覽器，路由器，服務器上都有DNS，DNS還有DNS緩存，設有緩存時間，越靠近用戶緩存時間越短

DNS查詢有兩個端，發出請求的瀏覽器，接收請求的DNS服務器，DNS服務器爲了解決大量查詢形成的負擔設了DNS緩存。瀏覽器給DNS服務器一個url地址，通過查詢，DNS會返回一個IP地址。

//dns-prefetch做用是頁面一加載時，就當即將url進行DNS查詢，這樣DNS緩存裏面就會記錄信息，下載查詢時就會快速返回須要的IP,省去了DNS查詢的時間
<link rel="dns-prefetch" href="xxxx" />

第三步：下載資源

帶着全部的請求信息，去這個IP地址上請求資源，而後從服務器上把請求的資源下載下來

請求信息通常包含Request-header+參數(url或body)+cookie。
服務器返回的信息通常包括status(狀態碼：表示請求成功與否)、Response-header(響應頭，文本長度，緩存時間，壓縮方式)+body(響應信息)

第四步：解析頁面

瀏覽器拿到這些資源後，根據不一樣的類型，進行不一樣的解析

咱們先加載的通常是HTML文件，在加載文件的同時就開始構建DOM樹了，碰見HTML節點就放進樹裏，在這個過程當中若是遇到js文件，構建DOM樹的過程就停下來，先去加載js文件和執行（js有這麼高的優先級是由於它能夠直接操做DOM樹，不讓它執行，DOM樹就白搭了），js執行完就繼續構建DOM樹。若是碰見style標籤，這個時候不會阻塞，DOM數的構建和樣式的加載會並行的進行。DOM樹構建完就是構建渲染樹，渲染樹是DOM樹和CSS共同構成的產物，在不一樣瀏覽器上渲染樹的構建是有區別的。webpack是在原來的DOM數上附屬一些樣式，FireFox是經過DOM樹和樣式表從新構建出渲染樹。渲染樹構建好，每一個元素的大小和佈局方式方式就肯定了。而後就是根據佈局方式計算元素的位置。最後一步就是繪製，就是調用瀏覽器負責顯示的部分，將元素的位置和樣式繪製在瀏覽器上 。

上面的加載方式只是一個理想的模型，實際上不一樣瀏覽器爲了優化加載進行了更多複雜的處理