網站性能優化（website performance optimization）

 提升代碼運行速度，或許咱們歷來沒有優化這些頁面來提升速度

想要開發優秀的網站，你必須瞭解你的用戶，知道他們想要達到什麼目的，同時還要明白瀏覽器的工做原理，從而可以打造快速良好的體驗，我最近在PageSpeed Insights 中運行了個人網頁，得分最低，該工具給出了一些建議，可是我不太明白，例如如何移除渲染屏蔽的JavaScript，什麼是異步腳本。這些問題都與關鍵呈現路徑相關，關鍵呈現路徑是指瀏覽器呈現網頁要經歷的一系列步驟，我以爲不少人都認爲瀏覽器負責全部工做，可是你一旦理解了瀏覽器是如何構建DOM CSSOM對象模型佈局和Paint你就能夠構建能在一秒內呈現的網頁

 

當你請求某個URL並按下Enter，瀏覽器就會想服務器發送一個請求，例如咱們能夠在命令行裏模擬下瀏覽器收到響應後即咱們在這裏看到的HTML瀏覽器必須將全部的標記都轉化爲咱們在屏幕上看到的這些內容，有沒有想過這一切是怎麼發生的？

瀏覽器會遵照定義完善的步驟並從處理HTML和構建DOM開始，HTML規範包含了一組規則，規定了咱們應該如何處理接收的數據,例如在HTML中尖括號裏包含的文本具備特殊含義，表示的是標記，所以每當咱們遇到標記，瀏覽器都會發出一個令牌，這裏是個以標籤HTML開始的令牌，而後是head，這整個流程都由令牌生成器來完成，當令牌生成器在執行這些工做時，另外一個流程正在消耗這些

令牌並將它們轉換爲節點對象，例如咱們轉換了第一個HTML令牌，並建立了HTML節點，而後消耗下一個令牌並建立head節點，節點之間有關係嗎？是的，令牌生成器發出了起始和結束令牌，代表了節點之間的關係。

最終當咱們消耗了全部這些令牌後，就造成了文檔對象模型，簡稱DOM，它是一個樹結構，表示了HTML的內容和屬性以及各個節點之間的全部關係。

實際上，瀏覽器會逐步構建DOM，你能夠利用這一點來提升網頁的呈現速度，實際上google在這方面作的很棒，我來演示下

每當你向google發送一個搜索請求，服務器都會作出很是巧妙的響應，甚至在服務器知道搜索結果前，就會當即返回網頁標題，就是在這裏看到的，這一標題對全部用戶來講都是相同的，這樣瀏覽器可以開始處理響應並逐步構建DOM,甚至有可能呈現該標題

一旦搜索結果準備好後，剩餘的HTML瀏覽器會解析並展現相關內容

能夠看出，瀏覽器不用等待，全部的HTML都好了後再處理，你的服務器也不該該這樣，實際上，返回解析的HTML是個很好的性能優化。逐步交付HTML太機智了。很好奇Google的工程師是怎麼衡量和優化他們的網頁性能的。

解析功能開始按步處理每一個部分和咱們以前描述的同樣即生成令牌，將令牌轉換爲節點，並構建出DOM樹。時間軸向咱們詳細展現了瀏覽器加載頁面時執行的操做。

 

 

首先能夠看到發送出去的css請求，它發生在收到第一部分HTML以後，這裏解析器發現了連接標記併發起了css請求，而後咱們等待獲取css字節內容，而後咱們看到Recalculate Style事件，這裏我將css響應轉換爲css對象模型，咱們的css很是小，因此只須要幾毫秒就完成了轉換。

可是對於更大型的樣式表來講，確定時間更長。

DOM包含了頁面的全部內容，CSSOM包含了頁面的全部樣式，我如何將內容和樣式轉換成像素顯示到屏幕上呢？以爲少了中間一步，你的想法不錯，如今咱們須要將DOM和CSSOM樹組成渲染樹，並捕獲你剛剛提到的內容，渲染樹的最重要特性是僅捕獲可見內容，要了解具體的操做流程，咱們來看看屏幕上的這個簡單示例，頂部是DOM樹，底部是CSS對象模型，要構建渲染樹，咱們從DOM樹的根部開始，

這裏是p節點，看看有沒有任何相符的CSS規則，這裏的確有一個相符的規則，讓全部的字體大小都設置爲16px而且爲粗體，咱們將p節點複製到渲染樹裏，處理完p節點後，咱們向下瀏覽該樹，而後咱們看到「hello」是個文本節點，並將其複製到渲染樹上，而後是span節點有一個相符的CSS規則，有一個span是段落節點的子節點，可是注意到這個規則的某個屬性標記爲display:none，表示這個span的內容不該呈現，由於咱們提到渲染樹僅捕獲可見內容，

因此咱們能夠跳過它和它的全部子節點並轉到下一節點，這裏的話是另外一個文本節點，咱們將其複製到渲染樹裏

因此渲染樹會同時捕獲內容和樣式。

這是Hello World頁面的DOM和CSS樹，要構建渲染樹咱們從DOM樹的HTML節點開始，HTML和head部分不包含任何可見信息，多以咱們快速地從渲染樹裏修剪它們，接着是body節點咱們將其複製過來，樹的左側應該看起來比較熟悉，這是咱們剛剛構建的部分，咱們將其也複製過來，最終咱們達到了div和img節點，這兩個都包含可見內容，因此也複製到渲染樹裏，包括它們的樣式，完成後將這個渲染樹與屏幕的內容對比下，渲染樹是個很好的展現結果，沒有沒必要要的文本。

 

 如今已經接近尾聲了，咱們還須要弄明白最後一個問題就是全部元素應該放在頁面的哪一個位置撒花姑娘，改如何放置，這就是佈局步驟，咱們來看看，

 

如今只剩下繪製像素了。

當咱們開始接收這個HTML時，咱們就開始解析它，因此解釋DOM是第一步，DOM能夠逐步構建並不是一次性完成全部響應，因此咱們可能不會當即構建完畢，在head中咱們將發現CSS和JavaScript的連接，而後咱們就發出這些請求，可是有個陷阱，腳本是同步的，在得到CSSOM以前，咱們沒法執行它，因此咱們須要須要儘快建立CSSOM，完成CSSOM將取消屏蔽JavaScritp引擎，因此咱們將在收到JavaScript後當即執行它。JavaScript完成後咱們就能夠繼續並完成DOM的構建，得到DOM和CSSOM後，咱們將合併兩者並構建渲染樹，而後運行佈局並繪製網頁。

 

咱們完成了關鍵呈現路徑的各個部分，咱們來從頭至尾地看看時間軸是怎麼彙總這些部分的。