如何分析並最佳化網頁效能？

一個網站的網頁是好是壞，往往是體現在速度和高度兩個方面，速度是網頁所展示出來的時間，能否為瀏覽使用者節約時間。高度則是一個網站網頁本身的質量，能否為瀏覽使用者帶來真正的好體驗。然而看似簡單的兩個點，但是背後要實現起來是需要花費精力和時間的。任何網站的終極目標不僅僅是讓其執行很快，而是讓使用該網站的使用者滿意。使用者花在網站上的大多數時間不是等待載入，而是在使用過程中等待響應。

一個網頁開啟速度慢，圖片載入慢，瀏覽卡頓，頁面的動畫效果不流暢，或者突然崩壞等，這種網站無疑在使用者心裡就是“垃圾網站”。作為一個網站開發者，誰願意看到這種情況?所以提高網頁效能勢在必行!

第一，要對頁面效能進行分析，那麼首要了解瀏覽器載入的過程，主要包括連線和渲染。

1、建立連線過程

1) 瀏覽器域名的IP地址

2) 瀏覽器給web伺服器傳送一個HTTP請求

3) 伺服器傳送永久重定向響應

4) 瀏覽器跟蹤重定向地址

5) 伺服器“處理”請求

6) 伺服器發回一個HTML響應

2、瀏覽器渲染

解析HTML->構建DOM樹->渲染樹構建->渲染樹佈局->繪製渲染樹

第二，最佳化網頁效能的大概方法

1、開啟瀏覽器快取

瀏覽器要根據域名找出I P ，而DNS過程的第一步是在瀏覽器快取中查詢，根據Chrome的PageSpeed給出的建議：要利用瀏覽器快取儲存可快取的資源。在 HTTP 標頭中為靜態資源設定有效期或最長存在時間，可指示瀏覽器從本地磁碟中載入以前下載的資源而不是從網路中載入。

HTTP 1.1提供的快取方法主要有兩種：

1) Expires和Cache-Control：max-age.即內容在快取中的生命有效期。第一次請求後將在生命有效期之內直接從本地快取中拿取。

2) Last-Modified和ETag.：Last-Modified標記檔案最後一次修改的時間，瀏覽器請求是在頭部加入上次請求快取下來的Last-Modified時間，若兩次請求期間伺服器的內容沒有修改，伺服器返回304 Not Modified，則不下載資源，瀏覽器直接使用本地快取;否則，伺服器會返回200以及更新後的版本。ETag是伺服器對於檔案生成的Hash雜湊，其生成演算法與最後一次修改的時間相關。瀏覽器第二次請求傳送上次的ETag資訊，伺服器透過簡單的比對就知道是否應該返回304還是200。PageSpeed建議，要為資源指定Last-Modified或ETag標頭，以便啟動快取驗證。

2、頁面內容組織

1)為 HTML文件指定字符集，可讓瀏覽器立即開始執行指令碼。

2)將內嵌樣式塊和元素從文件主體移至文件標題，可改善顯示效能。

3)將小型樣式表或者指令碼內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。

3、HTML

1)壓縮HTML。

2)為圖片指定大小，減少重排。

3)減少HTML標籤巢狀深度，巢狀越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。

4)使用HTML5新標籤，例如header、footer、section、nav、article。因為它們語義化，速度快，結構合理，瀏覽器上識別能力強。

4、CSS

1)避免使用濾鏡。

2)不使用@import。

3)合併和壓縮CSS程式碼。

4)減少漸變、陰影的使用。

5)模組化、精簡css，提高複用率。

6)合理使用CSS3高效能動畫，Translate3d支援硬體加速。

7)使用CssSprite將零星的背景圖包含到一張圖中，透過background-position來使它顯示在正確的位置;只請求一張圖，減少了HTTP請求的次數。

5、Java

1)模組化程式碼：SeaJs。

2)合併和壓縮Java程式碼。

3)壓縮工具：YUI Compressor或JSMin等。

4)使用事件委託機制，避免頻繁操作DOM節點。

5)暫緩 Java 解析，暫緩解析不需要的 Java(等到需要執行時再進行解析)，可以提高網頁的初始載入速度。

6、 圖片最佳化

1)壓縮圖片

2)圖片時頁面大部分載入時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式

第三，網頁效能最佳化實戰分析

以Chrome Developer Tools作為示例工具講解(可透過F12鍵開啟)，目前各大主流瀏覽器都有類似的外掛功能。

1、 Network可以檢視頁面載入時長，資源載入情況(狀態、時長)，資源載入時間具體分析，從而針對性的最佳化頁面

2、timeline 可看頁面渲染情況，從而進行頁面最佳化

3、profiles可看函式執行情況

第四，網頁效能最佳化推薦工具

1、Chrome(Firefox) Developer Tools ——分析效能

2、HttpWatch ——IE外掛，分析網頁效能

2、PageSpeed —— 檢視效能建議

3、Fiddler —— HTTP/HTTPS網路除錯

最後，別忘記了一件事，完成相關的網頁最佳化操作後，再進行適當的網頁效能測試，以防前面的工作變成無用功。一個好的網站不是開發一個人的事情，還有產品、設計、SEO、測試等人員參與其中。