影響網頁渲染的關鍵

常常有站長、開發者、運維疑惑：爲何咱們的後臺服務器很快，可是用戶要看網頁裏面的內容卻須要很長時間？咱們在上一篇文章《怪獸大做戰: 解析網站打開慢的緣由》中簡單介紹了影響網站打開速度的幾個指標，感興趣的同窗能夠再讀一下。今天咱們主要講一下，是哪些因素拖慢了咱們的首屏加載時間，也就是用戶看到網頁中內容時所等待的時間。

用過OneAPM的讀者對這幅圖確定不陌生，通常來說，若是服務器很快，機房所在線路很快，那麼影響用戶看到網頁內容的主要時間，就是最後兩個時間階段：DOM處理以及網頁渲染，在這兩個階段中，瀏覽器須要解析網頁中的各類資源並進行渲染，最終造成用戶頁面。這個過程是否流暢，直接影響到用戶須要等待的時間，從更深層次而言，直接會影響最終的用戶體驗，如今你們也廣泛接受一個觀點「延遲就是故障」，因此你須要重視網站的加載速度。

##打造輕量級的資源路徑--關鍵渲染路

網頁加載速度中最重要的概念是關鍵渲染路徑。若是能理解好這個概念，的確可讓用戶更快看到網頁中的內容。

輕量級資源和路徑，能夠縮短複雜網頁的構建和渲染時間，甚至比簡單網頁還要快！ 因爲大多數網頁都包含許多不一樣的組成部分，僅僅移除部分資源並不能保證更快的加載速度。 若是你曾經想過：「爲了提升網頁的加載速度，我還能作什麼？」或者「新浪、QQ、網易是如何作到在一秒鐘內加載那麼多網頁內容的？」那麼關鍵渲染路徑這個概念正是你須要瞭解的。

##什麼是關鍵渲染路徑？

清楚起見，讓咱們先定義一些概念：

關鍵：絕對須要 渲染：顯示或者展現（在咱們的情境中，網頁通過渲染才能呈現給用戶） 路徑：使咱們的網頁展現在瀏覽器中的一系列事件 首屏：是用戶滾動頁面以前就能看見的部分。

所以，換言之，渲染路徑就是一系列使你的網頁呈如今瀏覽器中的事件。而關鍵渲染路徑是呈現網頁首屏所需的那些事件。由於幾乎全部網站在渲染網頁時都包含了沒必要要的步驟，而減小這些沒必要要的路徑，能使你的網頁加載速度提升幾秒鐘，這也是提升網頁速度的最快方法。

##路徑

爲了顯示一張網頁，瀏覽器必須獲取網頁所需的全部資源。一個簡單的例子：一個網頁須要一張圖片，一個CSS文件，一個JavaScript文件。

咱們來看看這張網頁在展現以前經歷的路徑：

1. 瀏覽器下載html文件
2. 瀏覽器讀取html文件，發現裏面涉及一個CSS文件，一個JavaScript文件和一張圖片
3. 瀏覽器開始下載這張圖片
4. 瀏覽器發現不獲取CSS和JavaScript文件就沒法顯示網頁
5. 瀏覽器下載CSS文件並讀取之，確保除此以外沒有別的文件須要被訪問
6. 瀏覽器發現不獲取JavaScript文件仍是沒法顯示網頁
7. 瀏覽器下載JavaScript文件並讀取之，確保除此以外沒有別的文件須要被訪問
8. 瀏覽器發現如今能夠顯示網頁了

上面的路徑是簡單網頁的加載過程。如今，試想一下你的網頁加載路徑會怎麼樣？你極可能會有幾個交互按鈕，數個CSS和JavaScript文件，不少圖片和小插件，甚至可能還有音頻或者視頻文件。這意味着，你的渲染路徑極可能會像一個大迷宮。大多數網站的渲染路徑都極其複雜，由於瀏覽器在顯示網頁以前須要加載的文件太多。這就是你能夠超過他人的地方。若是你讓本身的網頁加載得比競爭者的快，你就能得到訪問者的青睞（百度就喜歡這樣的開發者），例如新浪微博的路徑就是這樣的：

##渲染過程

在展現網頁所需的衆多資源中，存在一些資源會阻塞網頁的渲染過程。最多見的兩種資源就是CSS文件和JavaScript文件。無論你須要多少個這樣的文件，瀏覽器必須逐一下載並分析這些文件，而後才能給用戶展現內容。讓咱們來看一個最多見不過的場景：

WordPress博客使用主題。幾乎每個WordPress主題都包含多個CSS文件。

許多主題包含六七個CSS文件。全部的CSS文件均可以合併到一個文件中，可是當你添加主題時，會包含多個CSS文件。所以，在你的博客顯示哪怕一個字以前，瀏覽器都不得不通過六七次的與服務器交互，把這些文件一個個地下載下來，並分析讀取，以後才能開始顯示。

在加載的過程當中，訪問者都只能看到一篇空白的屏幕。由於只有當關鍵步驟完成之後，纔會有東西顯示。

可是，即使下載完這些CSS文件，你的博客仍是不能完成渲染。由於WordPress主題還須要幾個JavaScript文件。

所以，渲染一頁典型的WordPress博客網頁，須要瀏覽器與服務器交互大約20次，才能將主要的CSS和JavaScript文件下載完畢。可是，等等，如今你還須要交互按鈕，小插件……噢，不，針對每個這樣的部件，你還要下載幾個CSS，JavaScript文件。

你可能要下載幾十個文件，才能讓本身的博客展現在用戶面前。真是麻煩！（去查查你的網頁都要加載什麼文件，可使用OneAPM 的SessionTrace 功能看看網頁加載資源在用戶那裏的速度）

可是事情不只限於WordPress，本文只是拿它舉個例子而已。一般建立網頁的初始視圖都不少資源，所以會產生多個請求。

##關鍵

目前我只是描繪了一張很是朦朧的藍圖。好消息是：你能夠爲你的網頁請求一 百萬個資源，其中包括12000張圖像，200個JavaScript文件，而這些均可能在一秒鐘內加載完成。

這是如何實現的呢？

只要理解對你的網站而言，顯示首屏的內容所需的關鍵步驟，就能實現。

最優化渲染路徑，實際上只要聚焦三件事情：

最小化關鍵資源的數量 最小化關鍵字節數 最小化關鍵路徑的長度

##理解頁面加載速度的測量辦法

當百度談論頁面加載速度時，他們並非指加載一個網頁的總時間。他們說的是用戶看到首屏所需的時間，以及用戶能夠開始與頁面內容進行交互所需的時間。

百度之因此開始採用頁面加載速度做爲影響要素，是基於他們用戶的滿意度。當用戶使用百度搜索時，他們要是被帶到加載時間很長的頁面，無疑是很糟糕的經歷。

人們向百度抱怨，他們說：「爲何將我帶到一個加載如此緩慢的頁面？」顯然，人們感知到了速度的差異。

若是一個用戶要盯着一個空白的網頁10秒之久等待它加載內容，這無疑是不好的體驗。百度不想在他們的結果中出現這樣的頁面。若是那個頁面能在1秒內顯示內容，這就是極好的用戶體驗，這纔是百度想要的結果。

咱們討論網頁速度時最關注的就是將初首屏的內容儘早地顯示給用戶。 經過OneAPM SessionTrace 功能能夠查看各個資源的加載速度，方便調整加載資源的策略，例如

##後續：

其實，優化網頁渲染路還有不少小技巧、插件、方法等待，將來咱們將在後續的文章中一一和你們分享。

---

本文系OneAPM工程師編譯整理。OneAPM是中國基礎軟件領域的新興領軍企業，能幫助企業用戶和開發者輕鬆實現：緩慢的程序代碼和SQL語句的實時抓取。想閱讀更多技術文章，請訪問OneAPM官方技術博客。