每一位前端開發同學在面試的時候，都會有50%的幾率會被問：你是如何做前端性能優化的？
下面說一說我是怎么回答的？
儲備知識
- webpack打包
- 服務端渲染
- http緩存
- 瀏覽器本地緩存
下面我會以第一人稱的角度，配合文本排版進行回答
面試官：你是如何做性能優化
我：針對前端性能優化，我做過一些總結，一共有三點：
- 第一次訪問時的優化（把第一次的加載速度變快）；
- 第n次訪問時的優化（把已經訪問過的資源緩存）；
- 讓用戶感覺很快，很流暢（通過交互手段優化體驗）；
第一次訪問優化的方式有哪些？
我：第一次訪問的時我們優化的主要目的是【加快渲染的速度】、一般我們會使用webpack將資源較大的文件進行壓縮或者拆分，壓縮一般可以使用uglifyjs去壓縮js文件，使文件體積變小;
我：如果此時文件依然很大，我們也可以使用webpack插件來拆分第三方庫（不需要記住名字，知道有相關插件即可）
我： 至於圖片、圖標等資源同樣可以在webpack中進行配置，將一定大小的文件轉換成base64、或者使用阿里的字體圖標庫進行圖標的渲染
如果想做SEO的優化，也可以采用服務端渲染的方式來加快首屏渲染的速度；
- 通過webpack進行資源壓縮
- 通過webpack進行資源拆分
- 圖片/圖標資源的處理
- 服務端渲染
資源的壓縮與拆分
1. 使用webpack插件壓縮（html、js、css）資源
- 壓縮html的方式：HtmlWebpackPlugin
- 壓縮js的方式：uglifyjs-webpack-plugin
- 壓縮css的方式：optimize-css-assets-webpack-plugin
- 除了使用插件以外也可以在服務端開啟GZIP進行資源壓縮
2. 如何進行資源拆分？
- 通過webpack插件：CommonsChunkPlugin、Dllplugin 、DllReferencePlugin、SplitChunksPlugin（webpack4內置） 進行壓縮
- 路由的異步加載 import(/* webpackChunkName:${name} */ $ {path})
3. 圖片/圖標資源的處理
- 通過webpack將一定大小范圍內的圖片處理成base64
- 圖標類的圖片，可使用阿里的iconfont處理為字體圖標
- 雪碧圖（比較老的方法，不建議了）
4. 服務端渲染
- 無需等待頁面加載js，直接將服務端渲染好的頁面返回
- SEO優化
第n次訪問優化的方式有哪些？
我：一般情況下，訪問過的頁面/資源，想要在后面訪問時加快訪問速度，可以想到的方式是利用緩存或本地存儲;
我：前端本身我們可以通過不同的業務邏輯利用localStorage或sessionStorage 就可以了
我：如何涉及到服務端，我們也可以采用http的緩存，一般有兩種方式，一個是強緩存、另一個是協商緩存，強緩存的優先級高於協商緩存，我們可以通過相關key去設置緩存時間（那么多屬性不一定記得住，但一定要知道有這個東西）
除了本地存儲和http緩存，也可以嘗試采用indexDB去做前端的數據存儲
除了indexBD，Service workers也可以作為緩存方案
-
瀏覽器本地緩存
-
http緩存
-
indexDB
-
Service workers
幫助大家的傳送門：
如何讓用戶感覺很快
我：讓用戶感覺很快，顧名思義，就是並沒有實際上的提升速度，而是優化了用戶體驗，我可以采用骨架屏、懶加載、合理loading，防抖、節流（減少不必要的請求）等方式讓用戶的等待變得舒服
- 骨架屏、懶加載
- loading優化
- 防抖、節流
- 等等等
以上就是我個人在面試中回答性能優化問題的是常用回答方式，通過以上的回答，也可以衍生出webpack的相關問題、http緩存的相關問題，http/https相關問題，閉包問題等