前端效能優化是個巨大的課題，如果要面面俱到的說的話，估計三天三夜說不完。所以我們就從實際的工程應用角度出發，聊我們最常遇見的前端優化問題。
- 減少HTTP請求次數
儘量合併圖片、CSS、JS。比如載入一個頁面，如果有5個css檔案的話，那麼會發出5次http請求，這樣會讓使用者第一次訪問你的頁面的時候會長時間等待。而如果把這個5個檔案合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
- 使用CDN
網站上靜態資源即css、js全都使用cdn分發，圖片亦然。
- 避免空的src和href
當link標籤的href屬性為空、script標籤的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
- 為檔案頭指定Expires
Exipres是用來設定檔案的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有快取性，這樣下回再訪問同樣的資源時就通過瀏覽器快取區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css檔案的Expires時間是2016-5-04 09:14:14.
- 使用gzip壓縮內容
gzip能夠壓縮任何一個文字型別的響應，包括html，xml，json。大大縮小請求返回的資料量。
- 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓使用者感覺頁面載入很快。
- 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的檔案 ，所以就把js放在頁面底部最後載入。 歡迎加入前端全棧開發交流圈一起學習交流：619586920
- 避免使用CSS表示式
舉個css表示式的例子
HTML複製全屏
1 font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" ); 2 這個表示式會持續的在頁面上計算樣式，影響頁面的效能。並且css表示式只被IE支援。
- 將CSS和JS放到外部檔案中
目的是快取檔案，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡。
- 權衡DNS查詢次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個檔案。當在一個頁面顯示多張圖片時，IE 使用者的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
- 精簡CSS和JS
這裡就涉及到css和js的壓縮了。比如下面的新浪的一個css檔案，把空格回車全部去掉，減少檔案的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js檔案的壓縮，如grunt，glup等。
- 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜槓（/）卻被忽略掉時。例如，當我們要訪問 baidu.com 時，實際上返回的是一個包含301程式碼的跳轉，它指向的是 baidu.com/（注意末尾的斜槓）。在… 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問 baidu.com/bbs 跳轉到http://bbs.baidu.com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（儲存一個域名和另外一個域名之間關係的DNS記錄）來替代。
- 刪除重複的JS和CSS
重複呼叫指令碼，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管指令碼是否可快取，它們都存在重複運算JavaScript的問題。
- 配置ETags
它用來判斷瀏覽器快取裡的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個檔案在1秒內修改了10次，Etag可以綜合Inode(檔案的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器叢集使用，可取後兩個引數。使用ETags減少Web應用頻寬和負載 歡迎加入前端全棧開發交流圈一起學習交流：619586920
- 可快取的AJAX
非同步請求同樣的造成使用者等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有快取就去請求快取內容。如下程式碼片段, cache:true就是顯式的要求如果當前請求有快取的話，直接使用快取
HTML複製全屏
1 $.ajax( 2 { 3 url : 'url', 4 dataType : "json", 5 cache: true, 6 success : function(son, status){ 7 } 8 16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先傳送檔案頭，然後才傳送資料。因此使用GET獲取資料時更加有意義。
- 減少DOM元素數量
這是一門大學問，這裡可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
- 避免404
比如外鏈的css、js檔案出現問題返回404時，會破壞瀏覽器的並行載入。
- 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
- 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態檔案的時候，減少了 Cookie 的反覆傳輸對主域名的影響。
- 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了記憶體開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的使用者無效。
- 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
- 縮小favicon.ico並快取
以上是Yslow的23個優化原則，基本可以涵蓋現在前端大部分的效能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。 具體想了解更多優化細則的童鞋建議去看看下面的一本書，畢竟頁數多講的也細嘛：
《高效能網站建設指南（第二版）》，這裡面其實就是細化的講解了上面的23原則。
前端優化是條漫長的路，不是說一天兩天就能全部做完的。我們可以參考上面的準則去把我們目前能做的都給優化了，剩下的更加小的一些細節點不用太過著急，畢竟也是要考慮優化價效比的。比如為了減小一個檔案幾個位元組花上個把月根本不值得。這些優化的東西都可以在我們的工作中慢慢去通過積累，去通過google解決。
“我自己是一名從事了5年前端的老程式設計師，辭職目前在做講師，今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，這裡是小白聚集地，歡迎初學和進階中的小夥伴。"
加QQ群：512676244（招募中）
！