我在面試時是如何回答「前端性能優化」的

每一位前端開發同窗在面試的時候，都會有50%的概率會被問：你是如何作前端性能優化的？
下面說一說我是怎麼回答的？

儲備知識

• webpack打包
• 服務端渲染
• http緩存
• 瀏覽器本地緩存

下面我會以第一人稱的角度，配合文本排版進行回答

面試官：你是如何作性能優化

我：針對前端性能優化，我作過一些總結，一共有三點：

1. 第一次訪問時的優化（把第一次的加載速度變快）；
2. 第n次訪問時的優化（把已經訪問過的資源緩存）；
3. 讓用戶感受很快，很流暢（經過交互手段優化體驗）；

第一次訪問優化的方式有哪些？

我：第一次訪問的時咱們優化的主要目的是【加快渲染的速度】、通常咱們會使用webpack將資源較大的文件進行壓縮或者拆分，壓縮通常能夠使用uglifyjs去壓縮js文件，使文件體積變小;

我：若是此時文件依然很大，咱們也能夠使用webpack插件來拆分第三方庫（不須要記住名字，知道有相關插件便可）

我： 至於圖片、圖標等資源一樣能夠在webpack中進行配置，將必定大小的文件轉換成base6四、或者使用阿里的字體圖標庫進行圖標的渲染

若是想作SEO的優化，也能夠採用服務端渲染的方式來加快首屏渲染的速度；

1. 經過webpack進行資源壓縮
2. 經過webpack進行資源拆分
3. 圖片/圖標資源的處理
4. 服務端渲染

資源的壓縮與拆分

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

幫助你們的傳送門：

localStorage的使用

sessionStorage的使用

完全弄懂強緩存與協商緩存

http面試必會的：強制緩存和協商緩存

IndexedDB

Service worker 的概念和用法

如何讓用戶感受很快

我：讓用戶感受很快，顧名思義，就是並無實際上的提高速度，而是優化了用戶體驗，我能夠採用骨架屏、懶加載、合理loading，防抖、節流（減小沒必要要的請求）等方式讓用戶的等待變得舒服

• 骨架屏、懶加載
• loading優化
• 防抖、節流
• 等等等

以上就是我我的在面試中回答性能優化問題的是經常使用回答方式，經過以上的回答，也能夠衍生出webpack的相關問題、http緩存的相關問題，http/https相關問題，閉包問題等