Web 前端效能最佳化相關內容解析[轉]

標籤：http   java   使用   io   strong   檔案   for   ar   資料   

Web 前端效能最佳化相關內容，來源於《Google官方網頁載入速度偵查工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相關說明。大家可以對照著去最佳化自己的網站或者相關項目。本文由Jeff 整理。

0.提高伺服器的響應速度

砸錢的東西，但卻最根本；搞好這一項，甚比下面任何一項。

1.最佳化樣式表和指令碼的排列順序

正確地排列外部樣式表與外部和內嵌指令碼的順序，可增加下載時同時載入的資料量，並提高瀏覽器顯示網頁的速度。

將樣式表放在頂部，將指令碼放在底部

2.使用瀏覽器緩衝

在 HTTP 標題中為靜態資源設定有效期間或最長存在時間（Google建議最短為一周，最好能達一年左右，⊙﹏⊙b汗），可指示瀏覽器從本地磁碟中載入以前下載的資源而不是從網路中載入。

3.使目標網頁重新導向可緩衝

許多網頁都會將使用者重新導向至不同的網址，例如：從 www.example.com 重新導向至 m.example.com。使這些重新導向資訊可緩衝到使用者的瀏覽器中，可加快訪問者多次訪問同一網站時的網頁載入速度。

4.內嵌小型 CSS

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

5.內嵌小型 JavaScript

將小型 JavaScript 檔案內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。

6.壓縮 CSS

壓縮 CSS 代碼可以節省大量的資料位元組空間，並提高下載、解析和執行的速度。

7.壓縮 HTML

壓縮 HTML 程式碼（包括其中所含的任何內嵌 JavaScript 和 CSS）可節省大量的資料位元組空間，並提高下載、解析和執行的速度。

8.壓縮 JavaScript

壓縮 JavaScript 代碼可以節省大量的資料位元組空間，並提高下載、解析和執行的速度。

9.啟用 Keep-Alive

有效地降低TCP握手的次數，減少httpd進程數，降低記憶體的使用

10.啟用壓縮

使用 gzip 或 deflate 壓縮資源，可減少通過網路發送的位元組數。

11.將圖片組合為 CSS 貼圖定位

盡量減少使用 CSS 貼圖定位合并圖片後的檔案數量，可減少在下載其他資源時的往返時間和延遲時間、節省請求開銷，並減少網頁下載的總位元組數。

12.將查詢字串從靜態資源中刪除

在 HTTP 標題中為靜態資源啟用公用緩衝，可讓瀏覽器從附近的Proxy 伺服器中下載資源，而不必從遠程原始伺服器中下載。

13.盡量減少請求的資料量

盡量減少 Cookie 和請求標題的大小，可確保將 HTTP 要求放入單個資料包中。

14.盡量減少重新導向

盡量減少從一個網址到另一個網址的 HTTP 重新導向次數，以減少額外的往返時間 (RTT) 和使用者等待的時間。

15.指定圖片大小

為所有的圖片指定寬度和高度，可消除進行不必要重排與重繪的需求，從而加快圖片的顯示速度。

16.提供壓縮後的圖片

適當地調整圖片的大小，可節省大量的資料位元組空間。

17.由同一網址提供資源

通過唯一的網址發布資源，這樣才能避免下載重複的位元組以及產生額外的往返時間 。

18.請指定一個“Vary: Accept-Encoding”標題

指示Proxy 伺服器緩衝資源的兩個版本：壓縮版與未壓縮版。這樣有助於避免公用代理無法正確檢測 Content-Encoding 標題的問題。

19.請指定緩衝驗證工具

通過指定緩衝驗證工具（Last-Modified 或 ETag 標題），您可以確保系統能夠有效地確定緩衝資源的有效性。

20.避免出現錯誤的請求

刪除“已損壞的連結”或會導致 404/410 錯誤的請求，可避免發出無效的請求。

21.首選非同步資源

錯開資源的載入時間可減小網頁載入時出現資源堵塞的機率。

22.避免在 CSS 中使用 @import

在外部樣式表中使用 CSS @import 會增加網頁載入時的延遲。

23.暫緩 JavaScript 解析

通過最大程度地減少顯示網頁所需的 JavaScript 資料量，並暫緩解析不需要的 JavaScript（等到需要執行時再進行解析），您可以提高網頁的初始載入速度。

24.最佳化圖片

適當地設定圖片的格式並進行壓縮，可節省大量的資料位元組空間。

25.指定字元集

儘早為您的 HTML 文檔指定字元集，可讓瀏覽器立即開始執行指令碼。

26.避免在meta 標籤中指定字元集

27.合并CSS、JavaScript檔案

減少HTTP請求的數量

 

相關閱讀：

https://developers.google.com/speed/

http://developer.yahoo.com/performance/rules.html

 

轉載：

http://devework.com/web-front-end-performance-optimization.html

Web 前端效能最佳化相關內容解析[轉]