本文摘錄我所接觸過的前端性能優(yōu)化，純手打，歡迎補(bǔ)充
注：因?yàn)槊總€(gè)知識(shí)點(diǎn)要細(xì)說都需要長(zhǎng)篇大論，所以此處只作歸納概括，詳情請(qǐng)自行查閱

1. 利用各種緩存&儲(chǔ)存

a. html5 Application Cache
可用在更新不頻繁的模塊或頁(yè)面上使用
缺點(diǎn)：需要更新的時(shí)候整個(gè) manifest 里面的文件都會(huì)重新請(qǐng)求下載一次
http://www.w3school.com.cn/html5/html_5_app_cache.asp

b. http緩存機(jī)制

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

// 協(xié)商緩存，服務(wù)器返回304表示資源沒更改，使用本地緩存

https://segmentfault.com/a/1190000010690320

HTML文件必須使用協(xié)商緩存，在服務(wù)器設(shè)置
如引用的靜態(tài)文件后加蓋md5戳，只要HTML文件變了，靜態(tài)文件引用后加的md5戳也改變了，可使用強(qiáng)緩存，否則只能使用協(xié)商緩存

c. localStorage
通常用作儲(chǔ)存頁(yè)面數(shù)據(jù)，當(dāng)頁(yè)面打開時(shí)先取上次儲(chǔ)存的數(shù)據(jù)快速展示頁(yè)面，等待接口數(shù)據(jù)返回再更新頁(yè)面數(shù)據(jù)
缺點(diǎn)：一般情況下永不過期，但在微信環(huán)境有時(shí)候可能會(huì)自動(dòng)幫忙清理

d. app資源內(nèi)置
適用于 Hybrid App，打成zip包，一般用作儲(chǔ)存公共資源、首頁(yè)等重要模塊，通常在發(fā)包的時(shí)候直接內(nèi)置或閃屏?xí)r進(jìn)行預(yù)下載
缺點(diǎn)：資源包有一定體積，若更新出錯(cuò)或者網(wǎng)絡(luò)環(huán)境差未能及時(shí)下載，可能會(huì)影響使用

2. 增量更新

前端資源通過加蓋md5戳實(shí)現(xiàn)非覆蓋發(fā)布，目前 gulp 或 webpack 工程化的項(xiàng)目都能輕易實(shí)現(xiàn)

3. 資源請(qǐng)求優(yōu)化

合并資源，減少http請(qǐng)求，壓縮資源，減小體積，服務(wù)器開Gzip壓縮傳輸?shù)臄?shù)據(jù)

4. 圖片優(yōu)化

a. 根據(jù)不同客戶端返回不同格式和大小的圖片，使用webp格式 google出品 可壓縮 30%~40% 大小
b. iconfont 代替圖片圖標(biāo)，
c. 如圖標(biāo)不多不使用iconfont，采用內(nèi)嵌 base64 格式代替http鏈接

5. 資源使用多域名

靜態(tài)資源分類使用cdn或其他獨(dú)立域名，可擴(kuò)展并發(fā)數(shù)；不攜帶cookie，可減小體積
http1.1 瀏覽器對(duì)同一域名并發(fā)數(shù)有限制，chrome 大概6個(gè)

6. 預(yù)解析DNS

典型的一次DNS解析耗費(fèi)20-120 毫秒，減少DNS解析時(shí)間和次數(shù)能減少用戶的等待時(shí)間，提升用戶體驗(yàn)。

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch"  />
<link rel="dns-prefetch"  />
<link rel="dns-prefetch"  />
<link rel="dns-prefetch"  />

7. 慎用iframe，最好不用

iframe所有的JS/CSS全部再加載一遍，且和主頁(yè)面共享連接池，所以會(huì)影響頁(yè)面的并行加載，浪費(fèi)資源
iframe會(huì)阻塞主頁(yè)面的onload事件

8. 首屏先加載、按需加載（懶加載）、預(yù)加載

9. 避免重定向

10. 避免資源404

11. vue 等框架可選擇服務(wù)器渲染 SSR

這個(gè)須用nodejs做服務(wù)器或中轉(zhuǎn)層，對(duì)開發(fā)限制也很多，請(qǐng)斟酌使用

12. Progressive Web Apps (pwa) 方案

利用 service worker 和 fetch 改造成 pwa
pwa 基于google android 底層和chrome瀏覽器
ios 雖已發(fā) beta 版本支持 service worker，但api兼容暫未明朗