從三個方面就前端性能進行總結：網絡方面、DOM操作及渲染方面、數據方面。
1、網絡方面
減少http請求：合並js文件/合並css文件/雪碧圖的使用(css sprite)/使用base64表示簡單的圖片
減小資源體積：gzip壓縮/js混淆/css壓縮/圖片壓縮
緩存：DNS緩存 /CDN部署與緩存 /http緩存
移動端優化：/使用長cache，減少重定向/首屏優化，保證首屏加載數據小於14kb/不濫用web字體
2、渲染和DOM操作方面
優化網頁渲染： css的文件放在頭部，js文件放在尾部或者異步、盡量避免內聯樣式
DOM操作優化：避免在document上直接進行頻繁的DOM操作、使用classname代替大量的內聯樣式修改、對於復雜的UI元素，設置position為absolute或fixed、盡量使用css動畫、使用requestAnimationFrame代替setInterval操作、適當使用canvas、盡量減少css表達式的使用、使用事件代理
操作細節注意：避免圖片或者frame使用空src、在css屬性為0時，去掉單位、禁止圖像縮放、正確的css前綴的使用、移除空的css規則、對於css中可繼承的屬性，如font-size，盡量使用繼承，少一點設置、縮短css選擇器，多使用偽元素等幫助定位
移動端優化： 長列表滾動優化、函數防抖和函數節流、使用touchstart、touchend代替click、HTML的viewport設置、開啟GPU渲染加速
3、數據方面
圖片加載處理：圖片預加載、圖片懶加載、首屏加載時進度條的顯示
異步請求的優化：使用正常的json數據格式進行交互、部分常用數據的緩存、數據埋點和統計
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
那就不用用一張500*500的大尺寸圖片，影響加載
23. 縮小favicon.ico並緩存