效能優化

效能優化最終目的：提升使用者體驗

專案優化階段：

開發階段

生產階段：不斷優化的過程

藉助工具測試

npm install -g lighthouse

lighthouse https://www.xuexiluxian.cn/

（https://blog.csdn.net/qq_29187355/article/details/95075979）

1. 首次載入如何提升效能：

1.1 減少http請求  

解決：合併資料 -跟後端溝通

1.2 script標籤加入順序

解決：<script + defer> 或者 放在/body前面

1.3 多個小圖示使用雪碧圖

1.4 懶載入

1.5 減少重繪和迴流

2. 後端給你資料有10萬條，你如何優化

解決：長列表的方式(頁面的條數固定幾十條,然後觸底再載入更多==>就是長列表) 

3. 專案上線前的效能優化

壓縮打包html、css、js、

圖片（base64）等等

4. Vue專案的優化

 3.1. 路由懶載入

 3.2. keep-alive快取元件

     3.3. 加入:key，而且:key儘量使用id（因為index可能會變）

     3.4. 靜態資料凍結Object.freeze()

 3.5. 使用第三方ui庫，元件按需載入優化

     3.6. 合適使用v-show和v-if