資訊專欄INFORMATION COLUMN
摘要：最優化渲染路徑，實際上只要聚焦三件事情最小化關鍵資源的數量最小化關鍵字節數最小化關鍵路徑的長度理解頁面加載速度的測量辦法當百度談論頁面加載速度時，他們并不是指加載一個網頁的總時間。
張超 — MAY 21, 2015
經常有站長、開發者、運維疑惑：為什么我們的后臺服務器很快，但是用戶要看網頁里面的內容卻需要很長時間？我們在上一篇文章《怪獸大作戰: 解析網站打開慢的原因》中簡單介紹了影響網站打開速度的幾個指標，感興趣的同學可以再讀一下。今天我們主要講一下，是哪些因素拖慢了我們的首屏加載時間，也就是用戶看到網頁中內容時所等待的時間。
用過OneAPM的讀者對這幅圖肯定不陌生，一般來講，如果服務器很快，機房所在線路很快，那么影響用戶看到網頁內容的主要時間，就是最后兩個時間階段：DOM處理以及網頁渲染，在這兩個階段中，瀏覽器需要解析網頁中的各種資源并進行渲染，最終形成用戶頁面。這個過程是否流暢，直接影響到用戶需要等待的時間，從更深層次而言，直接會影響最終的用戶體驗，現在大家也普遍接受一個觀點“延遲就是故障”，所以你需要重視網站的加載速度。
打造輕量級的資源路徑--關鍵渲染路網頁加載速度中最重要的概念是關鍵渲染路徑。如果能理解好這個概念，的確可以讓用戶更快看到網頁中的內容。
輕量級資源和路徑，可以縮短復雜網頁的構建和渲染時間，甚至比簡單網頁還要快！ 由于大多數網頁都包含許多不同的組成部分，僅僅移除部分資源并不能保證更快的加載速度。 如果你曾經想過：“為了提高網頁的加載速度，我還能做什么？”或者“新浪、QQ、網易是如何做到在一秒鐘內加載那么多網頁內容的？”那么關鍵渲染路徑這個概念正是你需要了解的。
什么是關鍵渲染路徑？清楚起見，讓我們先定義一些概念：
關鍵：絕對需要
渲染：顯示或者展示（在我們的情境中，網頁經過渲染才能呈現給用戶）
路徑：使我們的網頁展示在瀏覽器中的一系列事件
首屏：是用戶滾動頁面之前就能看見的部分。
因此，換言之，渲染路徑就是一系列使你的網頁呈現在瀏覽器中的事件。而關鍵渲染路徑是呈現網頁首屏所需的那些事件。因為幾乎所有網站在渲染網頁時都包含了不必要的步驟，而減少這些不必要的路徑，能使你的網頁加載速度提高幾秒鐘，這也是提高網頁速度的最快方法。
路徑為了顯示一張網頁，瀏覽器必須獲取網頁所需的所有資源。一個簡單的例子：一個網頁需要一張圖片，一個CSS文件，一個JavaScript文件。
我們來看看這張網頁在展示之前經歷的路徑：
瀏覽器下載html文件
瀏覽器讀取html文件，發現里面涉及一個CSS文件，一個JavaScript文件和一張圖片
瀏覽器開始下載這張圖片
瀏覽器發現不獲取CSS和JavaScript文件就無法顯示網頁
瀏覽器下載CSS文件并讀取之，確保除此之外沒有別的文件需要被訪問
瀏覽器發現不獲取JavaScript文件還是無法顯示網頁
瀏覽器下載JavaScript文件并讀取之，確保除此之外沒有別的文件需要被訪問
瀏覽器發現現在可以顯示網頁了
上面的路徑是簡單網頁的加載過程。現在，試想一下你的網頁加載路徑會怎么樣？你很可能會有幾個交互按鈕，數個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官方技術博客。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7910.html
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
摘要：可見對一個頁面正確渲染很重要。和標簽對用于標識頁面的頭部區域，和之間的內容都屬于頭部區域中的內容。是一個輔助性標簽，對頁面可以進行很多方面的特性的設置。當頁面沒有設置字符集時，瀏覽器會使用默認的字符編碼顯示。 showImg(https://segmentfault.com/img/bVbjNkI?w=900&h=383); 往期回顧 在 1.2 節介紹 HTML 語言時講到：HTML...
閱讀 1668·2021-11-19 09:40
閱讀 2923·2021-09-24 10:27
閱讀 3214·2021-09-02 15:15
閱讀 1876·2019-08-30 15:54
閱讀 1201·2019-08-30 15:54
閱讀 1368·2019-08-30 13:12
閱讀 625·2019-08-28 18:05
閱讀 2793·2019-08-27 10:53
