web效能優化

1. 減少HTTP請求的次數

合併圖片（使用精靈圖）、css、js，改進首次訪問使用者的等待時間

 

2. 使用cdn

就近快取==>智慧路由==>負載均衡==>WSA全站動態加速

 

3. 避免空的src和href

當link標籤的href屬性為空，script標籤的src標籤為空的時候，瀏覽器渲染的時候會把當前頁面的url值視為他們的屬性值，從而把頁面的內容載入進來作為他們的值。—-》這個好像是在測試中

 

4. 為檔案頭指定Expires

使內容具有快取性。避免接下來的頁面訪問中不必要的http請求

 

5. 使用gzip壓縮內容

壓縮任何一個文字型別的響應，包括XML和JSON，都是值得的。gzip的思想是：把檔案先在服務端進行壓縮，然後再進行傳輸。這對於體積較大的純文字型的檔案有不錯的效果。

 

6. 把css放到頂部

 

7. 把js放到底部

防止js載入對之後的資源造成阻塞

 

8. 避免使用css表示式

css中的Expressions其實也是一種if判斷。在這裡有必要先說明一下CSS Expressions是一個什麼東西。其實它就像其他語言中的if(){}else{}語句，所以在這種情況下css中，也能進行簡單的邏輯判斷了

 

9. 將css和js放到外部檔案中

目的是快取，但有時候是為了 減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡

 

10. 減少DNS查詢

減少網站從外部網站呼叫資源

 

11. js和css最小化，很多工具都可以用來壓縮他們

 

12. 避免重定向

除了避免3XX型別的重定向，還有一個小問題，最好不要寫aa.com/bb這樣的網址，因為會被重定向到aa.con/bb/，雖然Apache可以使用mod_rewrite,但是不要這樣寫是最好的

 

13. 刪除重複的JS和CSS

重複呼叫指令碼，除了增加額外的http請求外，多次運算也會浪費時間。在IE和Firefox中不管指令碼是否可快取，他們都存在重複運算js的問題。可以使用jview檢視

 

14. 配置Etags

它用來判斷瀏覽器快取裡的元素是否和原來伺服器的一致。比last-modified date 更具有彈性，eg:某個檔案在1s內修改10次，Etag可以綜合Inode(檔案的索引節點(inode)數),MTime（修改時間)和Size來精確的進行判斷，避開UNIX記錄MTime只能精確到s的問題。伺服器叢集使用，可取後兩個引數。使用Etags減少Web應用頻寬和負載

 

15. 可快取的AJAX

‘非同步’並不意味著`即時`:Ajax並不能保證使用者不在等待非同步JavaScript和XML響應上花費時間

 

16. 使用GET來完成 AJAX請求

當使用XMLHttpReques時，瀏覽器中的POST方法是一個`兩步走`的過程:首先傳送檔案頭，然後才傳送資料。因此使用get在資料量較少時更加具有意義。設定快取可以優化效能

 

17. 減少DOM的元素

是否存在一個更加貼切的標籤可以使用？使用<progress>標籤比使用div去完成，更加合理（在ie9以上的瀏覽器使用時）

 

18. 儘量避免404

有些站點把404錯誤響應頁面改為”你是不是要找***** ” ,這雖然該進了使用者的體驗但是同樣也會浪費伺服器的資源(如資料庫等).最糟糕的情況是指向外部js的連結出現問題並返回404程式碼。首先。這種載入會破壞並行載入；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作js程式碼來執行。

19. 減少Cookie的大小

控制在4k以內

 

 

20. 使用無cookies的域

比如圖片、css等，Yahoo！的靜態資源都在主域名以外，客戶端請求靜態檔案的時候，減少了cookie的反覆傳輸對主域名的影響。

 

21. 不要使用濾鏡

png24的在ie6半透明那種東西，別亂使，淡定的切片成png8+jpg

 

22. 不要再HTML中縮放圖片

W3C一直不提倡圖拍呢縮放，一方面是對伺服器資源的浪費，另一方面也是對效能的浪費

 

23. 使圖示儘可能的小，並使用快取

指的是：縮小favicon.ico並快取

 

24. 減少iframe的數量

 

 

本文參照了部分其他網頁的內容：

1. https://baike.baidu.com/item/YSLOW/10384699?fr=aladdin

2. https://blog.csdn.net/u013022210/article/details/52085175