本文摘錄我所接觸過的前端性能優(yōu)化垦江，純手打堡妒，歡迎補(bǔ)充
注：因?yàn)槊總€(gè)知識點(diǎn)要細(xì)說都需要長篇大論闰蚕，所以此處只作歸納概括析桥，詳情請自行查閱
1. 利用各種緩存&儲(chǔ)存
a. html5 Application Cache
可用在更新不頻繁的模塊或頁面上使用
缺點(diǎn)：需要更新的時(shí)候整個(gè) manifest 里面的文件都會(huì)重新請求下載一次
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ǔ)存頁面數(shù)據(jù)隧甚，當(dāng)頁面打開時(shí)先取上次儲(chǔ)存的數(shù)據(jù)快速展示頁面，等待接口數(shù)據(jù)返回再更新頁面數(shù)據(jù)
缺點(diǎn)：一般情況下永不過期渡冻，但在微信環(huán)境有時(shí)候可能會(huì)自動(dòng)幫忙清理
d. app資源內(nèi)置
適用于 Hybrid App戚扳，打成zip包，一般用作儲(chǔ)存公共資源族吻、首頁等重要模塊帽借，通常在發(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. 資源請求優(yōu)化
合并資源，減少http請求巍举，壓縮資源脆荷，減小體積，服務(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 瀏覽器對同一域名并發(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全部再加載一遍寂祥，且和主頁面共享連接池，所以會(huì)影響頁面的并行加載七兜，浪費(fèi)資源
iframe會(huì)阻塞主頁面的onload事件
8. 首屏先加載丸凭、按需加載（懶加載）、預(yù)加載
9. 避免重定向
10. 避免資源404
11. vue 等框架可選擇服務(wù)器渲染 SSR
這個(gè)須用nodejs做服務(wù)器或中轉(zhuǎn)層腕铸，對開發(fā)限制也很多惜犀，請斟酌使用
12. Progressive Web Apps (pwa) 方案
利用 service worker 和 fetch 改造成 pwa
pwa 基于google android 底層和chrome瀏覽器
ios 雖已發(fā) beta 版本支持 service worker，但api兼容暫未明朗
