有沒有前端性能優化知識推薦，包括css和js?

01-13

文章、書籍、知識點都可

前端性能優化是個巨大的課題，如果要面面俱到的說的話，估計三天三夜說不完。所以我們就從實際的工程應用角度出發，聊我們最常遇見的前端優化問題。

Yslow是雅虎開發的基於網頁性能分析瀏覽器插件，可以檢測出網頁的具體性能值，並且有著名的Yslow 23條優化規則，這23條，就夠我們玩的了。

1. 減少HTTP請求次數

盡量合併圖片、CSS、JS。比如載入一個頁面，如果有5個css文件的話，那麼會發出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而如果把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。

2. 使用CDN

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

3. 避免空的src和href

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

4. 為文件頭指定Expires

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

& 」hahaha」

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

23. 縮小favicon.ico並緩存

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

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

前端優化是條漫長的路，不是說一天兩天就能全部做完的。我們可以參考上面的準則去把我們目前能做的都給優化了，剩下的更加小的一些細節點不用太過著急，畢竟也是要考慮優化性價比的。比如為了減小一個文件幾個位元組花上個把月根本不值得。這些優化的東西都可以在我們的工作中慢慢去通過積累，去通過google解決。

最後，我想說下，我在折騰一個前端教學網站，目的是想幫助：

前端小白
想入坑前端工作的人
工作上需要添加前端技能的人

如果你有那麼丟感興趣的話，歡迎到我們的攻城課堂看看：系統學習前端知識

關於前端性能優化知識和技巧，騰訊雲技術社區為你整理了一系列相關優質文章：

讓頁面滑動流暢得飛起的新特性：Passive Event Listeners

頁面性能優化的利器 - Timeline

一個只有99行代碼的JS流程框架

在NodeJS中玩轉Protocol Buffer

上理論，推薦我書架上的三隻動物。

《編寫可維護的Javascript》

《網站性能監測與優化》

《Web性能》

然後就是實戰，安裝Chrome插件Pagespeed

把overview的每個問題儘可能嘗試解決就可以掌握好上面的優化知識了。

其實在前端部分，瀏覽器本身已經優化了很多不需要開發者關注的點了。

對於前端開發者來說，網頁的快慢大部分的延遲都來自網路請求。

建議了解下網路請求從TCP到http的過程，以針對性的進行優化。

圖片格式等等，css sprite大家都很熟悉，

js壓縮合併等也是耳熟能祥。

代碼層面的優化因各人的水平不一致，最好的保證性能的點，個人覺得還是在網路請求。

比較好的學習資料推薦給題主:

GitHub - slashhuang/web-performance: 總結和整理網路性能優化點

模塊打包方面的優化，trees-shaking，詳細可參考這篇文章

linxi：Tree-Shaking性能優化實踐 - 實踐篇zhuanlan.zhihu.com

對組件庫引用的優化，縮小引用範圍
css tree-shaking
bundle 去重

《high performance javascript》不過好像沒有翻譯版，只能看英文版的。

啃完了之後提高很大。

WEB 性能優化的最早實踐和沉澱總結源於 Yahoo 的性能團隊，他們做了大量的調研實踐之後產生了性能軍規（也就是前面的答案裡面篇幅比較長長的）和 YSlow 性能工具，性能優化領域的經典書《High Performance Websites》和《Even Faster Websites》就是雅虎性能團隊的產出，有個網站上配套有大量的 demo 來展示好的實踐和壞的實踐隊性能的影響程度，作者 Steve Souders 這個人現在貌似不在雅虎了。

隨著前端的崛起以及移動化的大趨勢，Google 的 GRIGORIK 寫了《High Performance Networking》相比雅虎的兩本，這本書顯的更有體系，更能跟上時代的進步，並且完全開源的，所有人都可以看。

幾句題外話：當下WEB端的性能診斷工具已經非常多了，給幾個名詞：WebPageTest、Google Page Speed、YSlow，還有各種國內外的 APM 工具都提供了性能工具可以讓你來嘗試。

先上一張自製的圖占坑，有一些不是都是前端的，但內容比較全了，之後一條一條的來說。

有兩本書可以去看看：《Web性能權威指南》，專門解釋你這個問題的。《HTTP權威指南》，一切都在不言中，想精通優化的話必須精通http，所以可以啃一下這本。

除了上面說的工程化的合併http,gzip,keep-alive,現代移動端web中由於webview緩存失效，用戶刷新304，以及頻繁業務迭代造成的代碼更新造成了移動端的緩存是個很值得優化的點。對此美團,百度,滴滴等互聯網公司採用了LocalStorage－－對就是那個用來存本地數據的玩意～結合工程化手段替代webview本身文件緩存機制的優化。大概原理就是所有文件緩存利用js寫入LocalStorage進行控制，這樣即使用戶刷新也不會有304請求。多頁面間有模塊復用的話，利用js控制可以將緩存細化到AMD模塊級別，達到模塊級別的共享復用，最極限的節省帶寬和提高載入速度。我們的業務已經全線鋪開了這套工程化方案。

具體的解決方案我在我們的專欄中發了文章，移動端性能想優化到極致的同學可以移步這裡--LsLoader 移動WEB工程化緩存方案 - 美團外賣前端技術棧 - 知乎專欄. 如果有好的IDEA可以來專欄交流。

前端性能優化其實就是讓使用戶等待的時間減少，那麼顯而易見的就是提高網速，但這不是我們程序員可以搞的東西，就說下我們能做的吧。

從URL到頁面大致一下幾個過程：

1、DNS解析

2、TCP連接

3、發送HTTP請求

4、伺服器處理請求並返回HTTP報文

5、瀏覽器解析渲染頁面

6、連接結束

前端性能優化分為兩大部分：

一、網路相關的一切，包括DNS解析 HTTP請求等等

二、web優化，就是前端頁面相關部分，也就是我們日常擼代碼能夠做到的一些

前端性能優化啥有這個你要麼

現在電腦性能過剩，不用考慮優化，特大項目除外

推薦一個解決方案，百度最新的FIS3，從前端工程的角度去學習各種優化，文檔、demo比較全！