摘要：最優(yōu)化渲染路徑，實(shí)際上只要聚焦三件事情最小化關(guān)鍵資源的數(shù)量最小化關(guān)鍵字節(jié)數(shù)最小化關(guān)鍵路徑的長度理解頁面加載速度的測量辦法當(dāng)百度談?wù)擁撁婕虞d速度時(shí)，他們并不是指加載一個(gè)網(wǎng)頁的總時(shí)間。

張超 — MAY 21, 2015

經(jīng)常有站長、開發(fā)者、運(yùn)維疑惑：為什么我們的后臺(tái)服務(wù)器很快，但是用戶要看網(wǎng)頁里面的內(nèi)容卻需要很長時(shí)間？我們?cè)谏弦黄恼隆豆肢F大作戰(zhàn): 解析網(wǎng)站打開慢的原因》中簡單介紹了影響網(wǎng)站打開速度的幾個(gè)指標(biāo)，感興趣的同學(xué)可以再讀一下。今天我們主要講一下，是哪些因素拖慢了我們的首屏加載時(shí)間，也就是用戶看到網(wǎng)頁中內(nèi)容時(shí)所等待的時(shí)間。

用過OneAPM的讀者對(duì)這幅圖肯定不陌生，一般來講，如果服務(wù)器很快，機(jī)房所在線路很快，那么影響用戶看到網(wǎng)頁內(nèi)容的主要時(shí)間，就是最后兩個(gè)時(shí)間階段：DOM處理以及網(wǎng)頁渲染，在這兩個(gè)階段中，瀏覽器需要解析網(wǎng)頁中的各種資源并進(jìn)行渲染，最終形成用戶頁面。這個(gè)過程是否流暢，直接影響到用戶需要等待的時(shí)間，從更深層次而言，直接會(huì)影響最終的用戶體驗(yàn)，現(xiàn)在大家也普遍接受一個(gè)觀點(diǎn)“延遲就是故障”，所以你需要重視網(wǎng)站的加載速度。

網(wǎng)頁加載速度中最重要的概念是關(guān)鍵渲染路徑。如果能理解好這個(gè)概念，的確可以讓用戶更快看到網(wǎng)頁中的內(nèi)容。

輕量級(jí)資源和路徑，可以縮短復(fù)雜網(wǎng)頁的構(gòu)建和渲染時(shí)間，甚至比簡單網(wǎng)頁還要快！ 由于大多數(shù)網(wǎng)頁都包含許多不同的組成部分，僅僅移除部分資源并不能保證更快的加載速度。 如果你曾經(jīng)想過：“為了提高網(wǎng)頁的加載速度，我還能做什么？”或者“新浪、QQ、網(wǎng)易是如何做到在一秒鐘內(nèi)加載那么多網(wǎng)頁內(nèi)容的？”那么關(guān)鍵渲染路徑這個(gè)概念正是你需要了解的。

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

  
關(guān)鍵：絕對(duì)需要

  渲染：顯示或者展示（在我們的情境中，網(wǎng)頁經(jīng)過渲染才能呈現(xiàn)給用戶）

  路徑：使我們的網(wǎng)頁展示在瀏覽器中的一系列事件

  首屏：是用戶滾動(dòng)頁面之前就能看見的部分。

因此，換言之，渲染路徑就是一系列使你的網(wǎng)頁呈現(xiàn)在瀏覽器中的事件。而關(guān)鍵渲染路徑是呈現(xiàn)網(wǎng)頁首屏所需的那些事件。因?yàn)閹缀跛芯W(wǎng)站在渲染網(wǎng)頁時(shí)都包含了不必要的步驟，而減少這些不必要的路徑，能使你的網(wǎng)頁加載速度提高幾秒鐘，這也是提高網(wǎng)頁速度的最快方法。

為了顯示一張網(wǎng)頁，瀏覽器必須獲取網(wǎng)頁所需的所有資源。一個(gè)簡單的例子：一個(gè)網(wǎng)頁需要一張圖片，一個(gè)CSS文件，一個(gè)JavaScript文件。

我們來看看這張網(wǎng)頁在展示之前經(jīng)歷的路徑：

瀏覽器下載html文件

瀏覽器讀取html文件，發(fā)現(xiàn)里面涉及一個(gè)CSS文件，一個(gè)JavaScript文件和一張圖片

瀏覽器開始下載這張圖片

瀏覽器發(fā)現(xiàn)不獲取CSS和JavaScript文件就無法顯示網(wǎng)頁

瀏覽器下載CSS文件并讀取之，確保除此之外沒有別的文件需要被訪問

瀏覽器發(fā)現(xiàn)不獲取JavaScript文件還是無法顯示網(wǎng)頁

瀏覽器下載JavaScript文件并讀取之，確保除此之外沒有別的文件需要被訪問

瀏覽器發(fā)現(xiàn)現(xiàn)在可以顯示網(wǎng)頁了

上面的路徑是簡單網(wǎng)頁的加載過程。現(xiàn)在，試想一下你的網(wǎng)頁加載路徑會(huì)怎么樣？你很可能會(huì)有幾個(gè)交互按鈕，數(shù)個(gè)CSS和JavaScript文件，很多圖片和小插件，甚至可能還有音頻或者視頻文件。這意味著，你的渲染路徑很可能會(huì)像一個(gè)大迷宮。大多數(shù)網(wǎng)站的渲染路徑都極其復(fù)雜，因?yàn)闉g覽器在顯示網(wǎng)頁之前需要加載的文件太多。這就是你可以超過他人的地方。如果你讓自己的網(wǎng)頁加載得比競爭者的快，你就能獲得訪問者的青睞（百度就喜歡這樣的開發(fā)者），例如新浪微博的路徑就是這樣的：

在展示網(wǎng)頁所需的眾多資源中，存在一些資源會(huì)阻塞網(wǎng)頁的渲染過程。最常見的兩種資源就是CSS文件和JavaScript文件。不管你需要多少個(gè)這樣的文件，瀏覽器必須逐一下載并分析這些文件，然后才能給用戶展示內(nèi)容。讓我們來看一個(gè)最常見不過的場景：

WordPress博客使用主題。幾乎每一個(gè)WordPress主題都包含多個(gè)CSS文件。

許多主題包含六七個(gè)CSS文件。所有的CSS文件都可以合并到一個(gè)文件中，但是當(dāng)你添加主題時(shí)，會(huì)包含多個(gè)CSS文件。因此，在你的博客顯示哪怕一個(gè)字之前，瀏覽器都不得不經(jīng)過六七次的與服務(wù)器交互，把這些文件一個(gè)個(gè)地下載下來，并分析讀取，之后才能開始顯示。

在加載的過程中，訪問者都只能看到一篇空白的屏幕。因?yàn)橹挥挟?dāng)關(guān)鍵步驟完成以后，才會(huì)有東西顯示。

但是，即便下載完這些CSS文件，你的博客還是不能完成渲染。因?yàn)閃ordPress主題還需要幾個(gè)JavaScript文件。

因此，渲染一頁典型的WordPress博客網(wǎng)頁，需要瀏覽器與服務(wù)器交互大約20次，才能將主要的CSS和JavaScript文件下載完畢。但是，等等，現(xiàn)在你還需要交互按鈕，小插件……噢，不，針對(duì)每一個(gè)這樣的部件，你還要下載幾個(gè)CSS，JavaScript文件。

你可能要下載幾十個(gè)文件，才能讓自己的博客展示在用戶面前。真是麻煩！（去查查你的網(wǎng)頁都要加載什么文件，可以使用OneAPM 的SessionTrace 功能看看網(wǎng)頁加載資源在用戶那里的速度）

但是事情不僅限于WordPress，本文只是拿它舉個(gè)例子而已。通常創(chuàng)建網(wǎng)頁的初始視圖都很多資源，因此會(huì)產(chǎn)生多個(gè)請(qǐng)求。

目前我只是描繪了一張非常朦朧的藍(lán)圖。好消息是：你可以為你的網(wǎng)頁請(qǐng)求一
百萬個(gè)資源，其中包括12000張圖像，200個(gè)JavaScript文件，而這些都可能在一秒鐘內(nèi)加載完成。

這是如何實(shí)現(xiàn)的呢？

只要理解對(duì)你的網(wǎng)站而言，顯示首屏的內(nèi)容所需的關(guān)鍵步驟，就能實(shí)現(xiàn)。

最優(yōu)化渲染路徑，實(shí)際上只要聚焦三件事情：

  
最小化關(guān)鍵資源的數(shù)量

  最小化關(guān)鍵字節(jié)數(shù)

  最小化關(guān)鍵路徑的長度

當(dāng)百度談?wù)擁撁婕虞d速度時(shí)，他們并不是指加載一個(gè)網(wǎng)頁的總時(shí)間。他們說的是用戶看到首屏所需的時(shí)間，以及用戶可以開始與頁面內(nèi)容進(jìn)行交互所需的時(shí)間。

百度之所以開始采用頁面加載速度作為影響要素，是基于他們用戶的滿意度。當(dāng)用戶使用百度搜索時(shí)，他們要是被帶到加載時(shí)間很長的頁面，無疑是很糟糕的經(jīng)歷。

人們向百度抱怨，他們說：“為什么將我?guī)У揭粋€(gè)加載如此緩慢的頁面？”顯然，人們感知到了速度的差別。

如果一個(gè)用戶要盯著一個(gè)空白的網(wǎng)頁10秒之久等待它加載內(nèi)容，這無疑是很差的體驗(yàn)。百度不想在他們的結(jié)果中出現(xiàn)這樣的頁面。如果那個(gè)頁面能在1秒內(nèi)顯示內(nèi)容，這就是極好的用戶體驗(yàn)，這才是百度想要的結(jié)果。

我們討論網(wǎng)頁速度時(shí)最關(guān)注的就是將初首屏的內(nèi)容盡早地顯示給用戶。 通過OneAPM SessionTrace 功能可以查看各個(gè)資源的加載速度，方便調(diào)整加載資源的策略，例如

其實(shí)，優(yōu)化網(wǎng)頁渲染路還有很多小技巧、插件、方法等待，未來我們將在后續(xù)的文章中一一和大家分享。

本文作者系OneAPM工程師張超編譯整理，想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問OneAPM官方技術(shù)博客。