1. 加載優化
1. 壓縮合並
2. 代碼分割(code spliting)，可以基於路由或動態加載
3. 第三方模塊放在CDN
4. 大模塊異步加載，例如: Echarts，可以使用require.ensure，在加載成功后，在顯示對應圖表
5. 小模塊適度合並，將一些零散的小模塊合並一起加載，速度較快
6. 可以使用pefetch預加載，在分步場景中非常適合
2. 圖片優化
1. 小圖使用雪碧圖，iconFont，base64內聯
2. 圖片使用懶加載
3. webp代替其他格式
4. 圖片一定要壓縮
5. 可以使用的img的srcset，根據不同分辨率顯示不同尺寸圖片，這樣既保證顯示效果，又能節省帶寬，提高加載速度
3. css優化
1. css寫在頭部
2. 避免css表達式
3. 移除空置的css規則
4. 避免行內style樣式
4. js優化
1. js寫在body底部
2. js用defer放在頭部，提前加載時間，又不阻塞dom解析
3. script標簽添加crossorigin，方便錯誤收集
5. 渲染優化
1. 盡量減少reflow和repaint
涉及到樣式，尺寸，節點增減的操作，都會觸發reflow和repaint。
1.1 用變量緩存dom樣式，不要頻繁讀取
1.2 通過DocumentFragment或innerHTML批量操作dom
1.3 dom隱藏，或復制到內存中，類似virtual dom，進行修改，完成后再替換回去
1.4 動畫元素一定要absolute，脫離文檔流，不影響其他元素。動畫不要用left，top等操作，要使用transform和opacity，同時開啟渲染層(will-change或translate3d(0,0,0))
1.5 動畫盡量用requestAnimationFrame，不要用定時器
1.6 移動端硬件加速，觸發GPU渲染，還是translate3d(0,0,0)
2. 盡量用css動畫代替js動畫，canvas動畫代替js動畫
3. 初始渲染，可以使用骨架屏或loading，提升體驗
4. PWA，可以本地緩存資源，提升體驗
5. 頻繁觸發的事件，防抖、節流，例如：scroll，input等
6. 長列表，使用分頁或滾動加載，虛擬列表，移除屏外dom
6. 首屏優化
原則：顯示快，滾動流暢，懶加載，懶執行，漸進展現
1. 代碼分離，將首屏不需要的代碼分離出去
2. 服務端渲染或預渲染，加載完html直接渲染，減少白屏時間
3. DNS prefetch，使用dns-prefetch減少dns查詢時間，PC端域名發散，移動端域名收斂
4. 減少關鍵路徑css，可以將關鍵的css內聯，這樣可以減少加載和渲染時間
7. 打包優化
主要是webpack優化
1. 拆包 externals dllPlugin
2. 提取公共包 commonChunkPlugin或splitChunks
3. 縮小范圍 各種loader配置include和exclude，noParse跳過文件
4. 開啟緩存 各種loader開啟cache
5. 多線程加速 happypack或thead-loader
6. tree-shaking ES模塊分析，移除死代碼
7. Scope Hoisting ES6模塊分析，將多個模塊合並到一個函數里，減少內存占用，減小體積，提示運行速度
8. webpack長緩存優化
1. js文件使用chunkhash，不使用hash
2. css文件使用contenthash，不使用chunkhash，不受js變化影響
3. 提取vendor，公共庫不受業務模塊變化影響
4. 內聯webpack runtime到頁面，chunkId變化不影響vendor
5. 保證module Id穩定，不使用數字作為模塊id，改用文件內容的hash值，使用HashedModuleIdsPlugin，模塊的新增或刪除，會導致其后面的所有模塊id重新排序，為避免這個問題
6. 保證chunkhash穩定，使用webpack-chunk-hash，替代webpack自己的hash算法。webpack自己的hash算法，對於同一個文件，在不同開發環境下，會計算出不用的hash值，不能滿足跨平台需求。
8. vue優化
1. 路由懶加載組件
2. keep-alive緩存組件，保持原顯示狀態
3. 列表項添加key，保證唯一
4. 列表項綁定事件，使用事件代理(v-for)
5. v-if和v-for不要用在一個標簽上，它會在每個項上進行v-if判斷
9. react優化
1. 路由組件懶加載，使用react-loadable
2. 類組件添加shouldComponent或PureComponent
3. 函數組件添加React.memo
4. 列表項添加key，保證唯一
5. 函數組件使用hook優化，useMemo，useCallback
10. SEO優化
1. 添加各種meta信息
2. 預渲染
3. 服務端渲染