前端效能優化總結
阿新 • • 發佈：2022-04-04
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>面試題默寫第一遍</title> </head> <body> <h3>效能優化了解多少？</h3> <p>效能優化這個範圍很大，具體分為載入優化、圖片優化、css優化、js優化、渲染優化、首屏載入優化、vue優化等</p> <p> 我採用的工具是 chrome 瀏覽器的 lighthouse 工具，我重點看其中的 opperlizetions 裡面會列舉很多建議，包括移除多餘js，檢視開銷大的模組，設定合適解析度的圖片，哪些dom操作對渲染有阻礙等</p> <p> 載入優化中：進行壓縮合並 程式碼分割 大的模組非同步載入，小的模組合併載入等；第三方模組用cdn的方式引入；合理使用 prefetch 分步場景適合； </p> <p> 圖片優化：圖片壓縮；使用雪碧圖，iconfont，base64內聯；根據不同螢幕尺寸使用合適比例以及解析度的圖片，img 有一個 srcset 屬性可以進行設定；簡化顏色；合併相同屬性； </p> <p>css優化：css寫在頭部；儘量不用內聯樣式；不使用@import方式引入；css不出現計算；</p> <p>js優化：合理使用 preload prefetch ；js放在body底部；合理使用 asyncdefer</p> <p>渲染優化：減少迴流和重繪操作；</p> <p>首屏載入優化：首屏js非同步載入，採用內聯樣式，移除非首屏需要的css，js；採用服務端渲染，載入完html直接渲染；預渲染技術；</p> <p>vue優化：路由動態載入，採用import方式匯入；圖片懶載入 vue-lazyload，v-if與v-for不用在同一個標籤</p> <h1>漏掉的</h1> <p>prefetch預載入，分步場景比較適用</p> <p>合併相同屬性，簡化顏色</p> <p>使用async defer</p> <p>js 用 defer 放在頭部，提前載入，不阻塞dom</p> <p>程式碼分離，將首屏不需要的程式碼分離出去</p> <p>使用dns-prefetch 減少 dns 查詢時間</p> <p>keep-alive快取元件</p> <p>列表頁新增key</p> <p>使用事件代理</p> </body> </html>
要默寫要默寫要默寫 這是第一遍；