前端的性能優(yōu)化是一個很寬泛的概念朦肘，最終目的都是為了提升用戶體驗，改善頁面性能。面試的時候經(jīng)常會遇到問談?wù)勑阅軆?yōu)化的手段灶搜，這個我分幾大部分來概述，具體細(xì)節(jié)需要自己再針對性的去搜索工窍，只是提供一個索引（太多了寫不過來+主要是懶得寫）割卖。這里PC端和移動端分開說了，業(yè)務(wù)場景不同患雏，需要考慮各自的優(yōu)化手段
目前來看鹏溯，前端優(yōu)化的策略有很多，主要包括網(wǎng)絡(luò)加載淹仑，頁面渲染丙挽，CSS優(yōu)化，JS執(zhí)行優(yōu)化匀借，緩存颜阐，圖片，協(xié)議幾大類吓肋。這一篇先講PC端的優(yōu)化策略
網(wǎng)絡(luò)加載
1. 減少HTTP請求次數(shù)
建議盡可能的根據(jù)需要去合并靜態(tài)資源圖片凳怨、JavaScript代碼和CSS文件，減少頁面請求數(shù)蓬坡，這樣可以縮短頁面首次訪問的等待時間猿棉，另外也要盡量的避免重復(fù)資源磅叛，防止增加多余的請求
2. 減少HTTP請求大小
除了減少請求資源數(shù)屑咳，也要減少每個http請求的大小萨赁。比如減少沒必要的圖片，JS兆龙，CSS以及HTML等杖爽，對文件進(jìn)行壓縮優(yōu)化，開啟GZIP壓縮傳輸內(nèi)容紫皇，縮短網(wǎng)絡(luò)傳輸?shù)却舆t
3. 將CSS和JS放到外部文件中慰安，避免使用style和script標(biāo)簽引入
在HTML文件中引入外部的資源可以有效利用瀏覽器的靜態(tài)資源緩存。有時候在移動端對請求數(shù)比較在意的會為了減少請求把CSS和JS文件直接寫到HTML里邊聪铺，具體根據(jù)CSS和JS文件大小和業(yè)務(wù)場景來分析化焕。如果CSS和JS文件內(nèi)容較多，邏輯比較復(fù)雜铃剔，建議放到外部引入
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
4. 避免頁面中空的href和src
當(dāng)link標(biāo)簽的href屬性為空撒桨，或者script、img键兜、iframe標(biāo)簽的src屬性為空的時候凤类，瀏覽器在渲染的過程中還是會把href和src的空內(nèi)容進(jìn)行加載，直到加載失敗普气。這樣就阻塞了頁面中其他資源的下載進(jìn)程谜疤，并且最后加載的內(nèi)容是無效的，因此要盡量避免现诀。
<!-- 不推薦 -->
<img src="" alt="占位圖"/>
5. 為HTML指定Cache-Control或者Expires
為HTML指定Cache-Control或者Expires可以將HTML內(nèi)容緩存起來夷磕，避免頻繁向服務(wù)器發(fā)送請求。在頁面Cache-Control或Expires頭部又消失仔沿，瀏覽器會直接從緩存讀取內(nèi)容企锌，不向服務(wù)器發(fā)送請求
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"＞
6. 合理設(shè)置Etag和Last-Modified
對于未修改的文件，靜態(tài)資源服務(wù)器會向瀏覽器端返回304于未，讓瀏覽器從緩存中讀取文件撕攒，減少下載的帶寬消耗并能減少服務(wù)器的負(fù)載
<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">
7. 減少頁面重定向
一次重定向大概600毫秒的時間開銷，為了保證用戶能盡快看到頁面內(nèi)容烘浦，盡量避免頁面的重定向
8. 靜態(tài)資源不同域名存放
瀏覽器在同一時刻向同一個域名請求文件的并行下載數(shù)是有限的抖坪，因此可以理由多個域名的主機來存放不同的靜態(tài)資源，增大頁面加載時資源的并行下載數(shù)闷叉。
9. 使用靜態(tài)資源CDN來存儲文件
詳情搜索CDN空間
10. 使用CDN Combo下載傳輸內(nèi)容
CDN的combo技術(shù)能把多個資源文件合并引用擦俐，減少請求次數(shù)。這樣可以減少瀏覽器HTTP請求數(shù)握侧，加快資源下載速度蚯瞧。比如淘寶的寫法：
<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
對于內(nèi)容相同的請求嘿期，有時候沒必要每次都從服務(wù)器拉取，合理的使用ajax緩存能加快ajax響應(yīng)速度并減少服務(wù)器的壓力
$.ajax({
url : url,
dataType : "json",
cache: true,
success: function(data){ // to do something... }
});
12. 使用get請求
POST請求會首先發(fā)送文件頭埋合，然后發(fā)送HTTP正文的數(shù)據(jù)备徐。而使用GET只發(fā)送頭部，所以在拉取數(shù)據(jù)時使用GET請求效率更高
13. 減少Cookie的大小并進(jìn)行Cookie隔離
HTTP請求默認(rèn)是會帶上瀏覽器端的Cookie一起發(fā)送給服務(wù)器端的甚颂，所以在非必要的情況下要盡量減少Cookie蜜猾。對于靜態(tài)的資源，盡量使用不同的域名存放振诬，因為Cookie默認(rèn)也是不能跨域的蹭睡，這就做到了不同域名下靜態(tài)資源請求的Cookie隔離
14. 減少favicon.ico 并緩存
一般一個web應(yīng)用的favicon.ico是很少改變的，赶么。有利于favicon.ico的重復(fù)加載
15. 異步的加載JavaScript資源
異步的JavaScript資源不會阻塞文檔解析肩豁，所以瀏覽器會優(yōu)先渲染頁面，延遲加載腳本執(zhí)行辫呻。
<script src="main.js" defer></script>
<script src="main.js" async></script>
16. 消除阻塞頁面的CSS和JS
對于頁面中加載時間過長的CSS或JS文件清钥，需要進(jìn)行合理的拆分或者延后加載，保證關(guān)鍵的資源能快速加載完成
17. 避免使用CSS import 引用加載CSS
18. 使用prefetch來完成網(wǎng)站預(yù)加載
讓瀏覽器預(yù)先加載用戶訪問當(dāng)前頁后極有可能訪問的其他資源(頁面印屁，圖片循捺，視頻等)，從而讓用戶有更好的體驗
19. 按需加載
這個跟第二條差不多雄人，特別做單頁應(yīng)用的時候要注意（移動端部分會著重說明）
頁面渲染類
1. 把CSS資源引用放到HTML文件頂部
這樣瀏覽器可以優(yōu)先下載CSS并盡快完成頁面渲染
2. JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加載和解析執(zhí)行對頁面渲染造成阻塞从橘。由于JavaScript資源默認(rèn)是解析阻塞的，除非被標(biāo)記為異步或者通過其他的方式異步加載础钠，否則會阻塞HTML DOM解析和CSS渲染過程
3. 不要在HTML中直接縮放圖片
在HTML中直接縮放圖片會導(dǎo)致頁面內(nèi)容的重排重繪恰力，此時可能會使頁面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁面中直接進(jìn)行圖片縮放
4. 減少DOM元素數(shù)量和深度
HTML中標(biāo)簽元素約的旗吁，標(biāo)簽的層級越深废累，瀏覽器解析DOM并繪制到瀏覽器中說花的時間就越長认轨。
5. 盡量避免使用table拷邢、iframe等慢元素
<table>內(nèi)容的渲染是講table的DOM渲染樹全部生成完并一次性繪制到頁面上允趟，所以在長表格渲染時很耗性能，應(yīng)該盡量避免使用码倦，可以考慮用ul代替企孩。盡量使用異步的方式動態(tài)的加載iframe，因為iframe內(nèi)資源的下載進(jìn)程會阻塞父頁面靜態(tài)資源的下載以及HTML DOM的解析
6. 避免運行耗時的JavaScript
長時間運行的JavaScript會阻塞瀏覽器構(gòu)建DOM樹袁稽、DOM渲染樹勿璃、渲染頁面。所以任何與頁面初次渲染無關(guān)的邏輯功能都應(yīng)該延遲加載執(zhí)行，這和JavaScript資源的異步加載思路一致
7. 避免使用CSS表達(dá)式和CSS濾鏡
CSS表達(dá)式和濾鏡的解析渲染速度是很慢的补疑，再有其他解決方案的情況下應(yīng)該盡量避免使用
// 不推薦
.opacity{
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
}
至此歧沪，PC部分的性能優(yōu)化點介紹完了。有一些沒有講到的諸如DNS預(yù)解析莲组，離線緩存诊胞，HTTP2協(xié)議，GPU加速等胁编，想著移動端的優(yōu)化更細(xì)厢钧，這些內(nèi)容放到移動端再講會好一點鳞尔。因為PC端由于兼容性的問題嬉橙，很多的優(yōu)化策略也不能很好的向下降級。盡管列舉了很多寥假，但還有少部分遺漏的市框，歡迎大家補充。前端優(yōu)化不是一件簡簡單單的事情糕韧，其涉及的內(nèi)容很多枫振，大家可以根據(jù)實際情況將這些方法應(yīng)用到自己的項目當(dāng)中去。
另外給自己的群打個小廣告
一個不怎么正經(jīng)的前端學(xué)習(xí)交流群: 523067423;
目前新手妹子較多萤彩，歡迎各位前端or非前端朋友們加入
