網站性能優化——網頁的生成過程

網站的性能優化，從用戶輸入網址，到用戶最終看到結果，須要有不少的參與方共同努力。這些參與方中任何一個環節的性能都會影響到用戶體驗。

● 寬帶網速
● DNS服務器的響應速度
● 服務器的處理能力
● 數據庫性能
● 路由轉發
● 瀏覽器處理能力

 

網頁生成的過程:

1.HTML 描述了一個頁面的結構。瀏覽器首先會將HTML轉換成其可以理解的一種格式 – 文檔對象模型（Document Object Model） 或者簡稱爲 DOM,每個 HTML 標籤都對應着樹種的某個節點（DOM節點）。

2.頁面上的 CSS 樣式被映射到 CSSOM 上 – CSS 對象模型（CSS Object Model）。CSS 不阻塞 DOM 的構建，它會阻塞 DOM 的渲染,直到 DOM 和 CSSOM 準備好以前，瀏覽器什麼都不會顯示

3.結合DOM和CSSOM，生成一顆渲染樹

4.生成佈局

5.將佈局繪製在屏幕上

 

　　這五步裏面，第一步到第三步都很是快，耗時的是第四步和第五步。
"生成佈局"（flow）和"繪製"（paint）這兩步，合稱爲"渲染"（render）。當瀏覽器構建 DOM 的時候，若是在 HTML 中遇到了一個 <script>...</script>標籤，它必須當即執行。若是腳本是來自於外部的，那麼它必須首先下載腳本。只有在 JavaScript 引擎執行完代碼以後它纔會從新開始解析HTML。

圖片加載時間和渲染時機：

● 解析HTML【遇到標籤加載圖片】 —> 構建DOM樹
● 加載樣式 —> 解析樣式【遇到背景圖片連接不加載】 —> 構建樣式規則樹
● 加載javascript —> 執行javascript代碼
● 把DOM樹和樣式規則樹匹配構建渲染樹【加載渲染樹上的背景圖片】
● 計算元素位置進行佈局
● 繪製【開始渲染圖片】

　　設置了display:none屬性的元素，圖片不會渲染出來，但會加載。
原理：當DOM樹和樣式規則樹匹配構建渲染樹時，會把可渲染元素上的全部屬性（如display:none屬性和background-image屬性）結合一塊兒產出到渲染樹。當解析渲染樹時會加載標籤元素上的圖片，發現元素上有background-image屬性時會加載背景圖片。當繪製時發現元素上有display:none屬性，則不計算該元素位置，也不會繪製該元素。

　　設置了display:none屬性元素的子元素，樣式表中的背景圖片不會渲染出來，也不會加載；而標籤的圖片不會渲染出來，但會加載。
原理：構建渲染樹時，只會把可渲染元素產出到渲染樹，這就意味有不可渲染元素，當匹配DOM樹和樣式規則樹時，若發現一個元素的屬性上有display:none，瀏覽器會認爲該元素的子元素是不可渲染的，所以不會把該元素的子元素產出到渲染樹上。

網頁性能影響：
　　網頁生成的時候，至少會渲染一次。用戶訪問的過程當中，還會不斷從新渲染。從新渲染，就須要從新生成佈局和從新繪製。前者叫作"重排"（reflow），後者叫作"重繪"（repaint）。提升網頁性能，就是要下降"重排"和"重繪"的頻率和成本，儘可能少觸發從新渲染。

 

預解析：

　　新的 Web 標準 <link rel="preload" href="" as="" >使可以更快地加載關鍵資源,as屬性告訴瀏覽器要下載的是什麼,一些可能的值是：script,style,image,font,audio,video.有一點要注意，要預加載字體你還必須設置crossorigin 屬性，即便字體在同一個域名下。

　　defer 和async這兩個屬性都告訴瀏覽器，它能夠 「在後臺」 加載腳本的同時繼續解析 HTML，並在腳本加載完以後再執行。這樣，腳本下載就不會阻塞 DOM 構建和頁面渲染了。結果就是，用戶能夠在全部的腳本加載完成以前就能看到頁面。

　　defer 比 async 要先引入瀏覽器。它的執行在解析徹底完成以後纔開始，它處在DOMContentLoaded事件以前。 它保證腳本會按照它在 HTML 中出現的順序執行，而且不會阻塞解析。

　　async 腳本在它們完成下載完成後的第一時間執行，它處在 window 的load 事件以前。 這意味着有可能（而且頗有可能）設置了 async 的腳本不會按照它們在 HTML 中出現的順序執行。這也意味着他們可能會中斷 DOM 的構建。不管它們在何處被指定，設置async 的腳本的加載有着較低的優先級，同步的腳本老是比異步的腳本擁有更高的優先級。他們一般在全部其餘腳本加載以後才加載，而不阻塞 DOM 構建。然而，若是一個指定async 的腳本很快就完成了下載，那麼它的執行會阻塞 DOM 構建以及全部在以後才完成下載的同步腳。

---------------------------分------------割------------------------------------- 

 

以上內容摘自

阮一峯的網絡日誌

感謝大神們的實踐總結~