前端性能優化知識，包括css和js

時間 2019-11-17

標籤前端性能優化知識包括 css 欄目系統性能简体版

原文原文鏈接

做者：野次
連接：http://www.zhihu.com/question/33032042/answer/95948831
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

css

1. 減小HTTP請求次數html

儘可能合併圖片、CSS、JS。好比加載一個頁面，若是有5個css文件的話，那麼會發出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而若是把這個5個文件合成一個的話，就只須要發出一次http請求，節省網絡請求時間，加快頁面的加載。

前端

2. 使用CDNnode

網站上靜態資源即css、js全都使用cdn分發，圖片亦然。

nginx

3. 避免空的src和hrefajax

當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值，從而把頁面的內容加載進來做爲它們的值。因此要避免犯這樣的疏忽。express

4. 爲文件頭指定Expiresjson

Exipres是用來設置文件的過時時間的，通常對css、js、圖片資源有效。他可使內容具備緩存性，這樣下回再訪問一樣的資源時就經過瀏覽器緩存區讀取，不須要再發出http請求。以下例子：

新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

瀏覽器

5. 使用gzip壓縮內容緩存

gzip可以壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。

6. 把CSS放到頂部

網頁上的資源加載時從上網下順序加載的，因此css放在頁面的頂部可以優先渲染頁面，讓用戶感受頁面加載很快。

7. 把JS放到底部

加載js時會對後續的資源形成阻塞，必須得等js加載完纔去加載後續的文件，因此就把js放在頁面底部最後加載。

8. 避免使用CSS表達式

舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。而且css表達式只被IE支持。

9. 將CSS和JS放到外部文件中

目的是緩存文件，能夠參考原則4。但有時候爲了減小請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。

10. 權衡DNS查找次數

減小主機名能夠節省響應時間。但同時，須要注意，減小主機會減小頁面中並行下載的數量。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。因此新浪會搞N個二級域名來放圖片。

下面是新浪微博的圖片域名，咱們能夠看到他有多個域名，這樣能夠保證這些不一樣域名可以同時去下載圖片，而不用排隊。不過若是當使用的域名過多時，響應時間就會慢，由於不用響應域名時間不一致。

11. 精簡CSS和JS

這裏就涉及到css和js的壓縮了。好比下面的新浪的一個css文件，把空格回車所有去掉，減小文件的大小。如今的壓縮工具備不少，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。

12. 避免跳轉

有種現象會比較坑爹，看起來沒什麼差異，其實屢次了一次頁面跳轉。好比當URL本該有斜槓（/）卻被忽略掉時。例如，當咱們要訪問http://baidu.com 時，實際上返回的是一個包含301代碼的跳轉，它指向的是http://baidu.com/（注意末尾的斜槓）。在nginx服務器可使用rewrite；Apache服務器中可使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。

另外一種是不用域名之間的跳轉，好比訪問 http://baidu.com/bbs 跳轉到http://bbs.baidu.com/。那麼能夠經過使用Alias或者mod_rewirte創建CNAME（保存一個域名和另一個域名之間關係的DNS記錄）來替代。

13. 刪除重複的JS和CSS

重複調用腳本，除了增長額外的HTTP請求外，屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存，它們都存在重複運算JavaScript的問題。

14. 配置ETags

它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具備彈性，例如某個文件在1秒內修改了10次，Etag能夠綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。服務器集羣使用，可取後兩個參數。使用ETags減小Web應用帶寬和負載

15. 可緩存的AJAX

異步請求一樣的形成用戶等待，因此使用ajax請求時，要主動告訴瀏覽器若是該請求有緩存就去請求緩存內容。以下代碼片斷, cache:true就是顯式的要求若是當前請求有緩存的話，直接使用緩存

$.ajax({
     url : 'url',
     dataType : "json",
     cache: true,
     success : function(son, status){    
             }

16. 使用GET來完成AJAX請求

當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，而後才發送數據。所以使用GET獲取數據時更加有意義。

17. 減小DOM元素數量

這是一門大學問，這裏能夠引伸出一堆優化的細節。想要具體研究的能夠看後面推薦書籍。總之大原則減小DOM數量，就會減小瀏覽器的解析負擔

18. 避免404

好比外鏈的css或者js文件出現問題返回404時，會破壞瀏覽器對文件的並行加載。而且瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分看成JavaScript代碼來執行。

19. 減小Cookie的大小

Cookie裏面別塞那麼多東西，由於每一個請求都得帶着他跑

20. 使用無cookie的域

好比CSS、js、圖片等，客戶端請求靜態文件的時候，減小了 Cookie 的反覆傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨有屬性AlphaImageLoader用於修正7.0如下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器加載圖片時它會終止內容的呈現而且凍結瀏覽器。在每個元素（不只僅是圖片）它都會運算一次，增長了內存開支，所以它的問題是多方面的。
徹底避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工做。若是你確實須要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。

22. 不要在HTML中縮放圖片

好比你須要的圖片尺寸是50* 50

那就不用用一張500*500的大尺寸圖片，影響加載

23. 縮小favicon.ico並緩存

以上是Yslow的23個優化原則，基本能夠涵蓋如今前端大部分的性能優化原則了，不少更加geek和精細優化方法都是從這些原則裏面延伸出來的。具體想了解更多優化細則的童鞋建議去看看下面的一本書，畢竟頁數多講的也細嘛：

《高性能網站建設指南（第二版》，這裏面其實就是細化的講解了上面的23原則。