前端的性能優化是一個很寬泛的概念，最終目的都是為了提升用戶體驗，改善頁面性能。面試的時候經常會遇到問談談性能優化的手段，這個我分幾大部分來概述，具體細節需要自己再針對性的去搜索，只是提供一個索引（太多了寫不過來+主要是懶得寫）。這里PC端和移動端分開說了，業務場景不同，需要考慮各自的優化手段
目前來看，前端優化的策略有很多，主要包括網絡加載，頁面渲染，CSS優化，JS執行優化，緩存，圖片，協議幾大類。這一篇先講PC端的優化策略
網絡加載
1. 減少HTTP請求次數
建議盡可能的根據需要去合并靜態資源圖片、JavaScript代碼和CSS文件，減少頁面請求數，這樣可以縮短頁面首次訪問的等待時間，另外也要盡量的避免重復資源，防止增加多余的請求
2. 減少HTTP請求大小
除了減少請求資源數，也要減少每個http請求的大小。比如減少沒必要的圖片，JS，CSS以及HTML等，對文件進行壓縮優化，開啟GZIP壓縮傳輸內容，縮短網絡傳輸等待延遲
3. 將CSS和JS放到外部文件中，避免使用style和script標簽引入
在HTML文件中引入外部的資源可以有效利用瀏覽器的靜態資源緩存。有時候在移動端對請求數比較在意的會為了減少請求把CSS和JS文件直接寫到HTML里邊，具體根據CSS和JS文件大小和業務場景來分析。如果CSS和JS文件內容較多，邏輯比較復雜，建議放到外部引入
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
4. 避免頁面中空的href和src
當link標簽的href屬性為空，或者script、img、iframe標簽的src屬性為空的時候，瀏覽器在渲染的過程中還是會把href和src的空內容進行加載，直到加載失敗。這樣就阻塞了頁面中其他資源的下載進程，并且最后加載的內容是無效的，因此要盡量避免。
<!-- 不推薦 -->
<img src="" alt="占位圖"/>
5. 為HTML指定Cache-Control或者Expires
為HTML指定Cache-Control或者Expires可以將HTML內容緩存起來，避免頻繁向服務器發送請求。在頁面Cache-Control或Expires頭部又消失，瀏覽器會直接從緩存讀取內容，不向服務器發送請求
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"＞
6. 合理設置Etag和Last-Modified
對于未修改的文件，靜態資源服務器會向瀏覽器端返回304，讓瀏覽器從緩存中讀取文件，減少下載的帶寬消耗并能減少服務器的負載
<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">
7. 減少頁面重定向
一次重定向大概600毫秒的時間開銷，為了保證用戶能盡快看到頁面內容，盡量避免頁面的重定向
8. 靜態資源不同域名存放
瀏覽器在同一時刻向同一個域名請求文件的并行下載數是有限的，因此可以理由多個域名的主機來存放不同的靜態資源，增大頁面加載時資源的并行下載數。
9. 使用靜態資源CDN來存儲文件
詳情搜索CDN空間
10. 使用CDN Combo下載傳輸內容
CDN的combo技術能把多個資源文件合并引用，減少請求次數。這樣可以減少瀏覽器HTTP請求數，加快資源下載速度。比如淘寶的寫法：
<link rel="stylesheet" >
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
參考: http://www.cnblogs.com/zhengyun_ustc/archive/2012/07/18/combo.html
11. 使用可緩存的AJAX
對于內容相同的請求，有時候沒必要每次都從服務器拉取，合理的使用ajax緩存能加快ajax響應速度并減少服務器的壓力
$.ajax({
url : url,
dataType : "json",
cache: true,
success: function(data){ // to do something... }
});
12. 使用get請求
POST請求會首先發送文件頭，然后發送HTTP正文的數據。而使用GET只發送頭部，所以在拉取數據時使用GET請求效率更高
13. 減少Cookie的大小并進行Cookie隔離
HTTP請求默認是會帶上瀏覽器端的Cookie一起發送給服務器端的，所以在非必要的情況下要盡量減少Cookie。對于靜態的資源，盡量使用不同的域名存放，因為Cookie默認也是不能跨域的，這就做到了不同域名下靜態資源請求的Cookie隔離
14. 減少favicon.ico 并緩存
一般一個web應用的favicon.ico是很少改變的，。有利于favicon.ico的重復加載
15. 異步的加載JavaScript資源
異步的JavaScript資源不會阻塞文檔解析，所以瀏覽器會優先渲染頁面，延遲加載腳本執行。
<script src="main.js" defer></script>
<script src="main.js" async></script>
16. 消除阻塞頁面的CSS和JS
對于頁面中加載時間過長的CSS或JS文件，需要進行合理的拆分或者延后加載，保證關鍵的資源能快速加載完成
17. 避免使用CSS import 引用加載CSS
18. 使用prefetch來完成網站預加載
讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面，圖片，視頻等)，從而讓用戶有更好的體驗
19. 按需加載
這個跟第二條差不多，特別做單頁應用的時候要注意（移動端部分會著重說明）
頁面渲染類
1. 把CSS資源引用放到HTML文件頂部
這樣瀏覽器可以優先下載CSS并盡快完成頁面渲染
2. JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加載和解析執行對頁面渲染造成阻塞。由于JavaScript資源默認是解析阻塞的，除非被標記為異步或者通過其他的方式異步加載，否則會阻塞HTML DOM解析和CSS渲染過程
3. 不要在HTML中直接縮放圖片
在HTML中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要盡量減少在頁面中直接進行圖片縮放
4. 減少DOM元素數量和深度
HTML中標簽元素約的，標簽的層級越深，瀏覽器解析DOM并繪制到瀏覽器中說花的時間就越長。
5. 盡量避免使用table、iframe等慢元素
<table>內容的渲染是講table的DOM渲染樹全部生成完并一次性繪制到頁面上，所以在長表格渲染時很耗性能，應該盡量避免使用，可以考慮用ul代替。盡量使用異步的方式動態的加載iframe，因為iframe內資源的下載進程會阻塞父頁面靜態資源的下載以及HTML DOM的解析
6. 避免運行耗時的JavaScript
長時間運行的JavaScript會阻塞瀏覽器構建DOM樹、DOM渲染樹、渲染頁面。所以任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和JavaScript資源的異步加載思路一致
7. 避免使用CSS表達式和CSS濾鏡
CSS表達式和濾鏡的解析渲染速度是很慢的，再有其他解決方案的情況下應該盡量避免使用
// 不推薦
.opacity{
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
}
至此，PC部分的性能優化點介紹完了。有一些沒有講到的諸如DNS預解析，離線緩存，HTTP2協議，GPU加速等，想著移動端的優化更細，這些內容放到移動端再講會好一點。因為PC端由于兼容性的問題，很多的優化策略也不能很好的向下降級。盡管列舉了很多，但還有少部分遺漏的，歡迎大家補充。前端優化不是一件簡簡單單的事情，其涉及的內容很多，大家可以根據實際情況將這些方法應用到自己的項目當中去。
另外給自己的群打個小廣告
一個不怎么正經的前端學習交流群: 523067423;
目前新手妹子較多，歡迎各位前端or非前端朋友們加入
