前端效能優化總結

2022-10-09 12:12:11 字數 849 閱讀 2855

"en

">效能優化這個範圍很大,具體分為載入優化、優化、css優化、js優化、渲染優化、首屏載入優化、vue優化等

我採用的工具是 chrome 瀏覽器的 lighthouse 工具,我重點看其中的 opperlizetions

裡面會列舉很多建議,包括移除多餘js,檢視開銷大的模組,設定合適解析度的,哪些dom操作對渲染有阻礙等

載入優化中:進行壓縮合併 **分割 大的模組非同步載入,小的模組合併載入等;第三方模組用cdn的方式引入;合理使用 prefetch 分步場景適合;

優化:壓縮;使用雪碧圖,iconfont,base64內聯;根據不同螢幕尺寸使用合適比例以及解析度的,img 有乙個 srcset

屬性可以進行設定;簡化顏色;合併相同屬性;

css優化:css寫在頭部;盡量不用內聯樣式;不使用@import方式引入;css不出現計算;

js優化:合理使用 preload prefetch ;js放在body底部;合理使用 async defer

渲染優化:減少回流和重繪操作;

首屏載入優化:首屏js非同步載入,採用內聯樣式,移除非首屏需要的css,js;採用服務端渲染,載入完html直接渲染;預渲染技術;

prefetch預載入,分步場景比較適用

合併相同屬性,簡化顏色

使用async defer

js 用 defer 放在頭部,提前載入,不阻塞dom

**分離,將首屏不需要的**分離出去

使用dns-prefetch 減少 dns 查詢時間

keep-alive快取元件

列表頁新增key

使用事件**

要默寫要默寫要默寫 這是第一遍;

前端效能優化總結

多使用記憶體,快取或者其他方法 減少cpu計算,減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中,js放body後 懶載入減少dom操作,對dom操作做快取 減少dom操作,多個操作盡量合併在一起執行 事件節流...

前端效能優化總結

效能是前端開發乙個非常重要的組成部分,與應用不同,網頁的所有資源初始都需要通過網路傳輸,因此如何進行更好地進行網路傳輸對前端效能影響很大,此外還有瀏覽器渲染部分的優化。不管怎麼說如何進行前端效能優化是乙個永恆的話題。本文是閱讀小冊前端效能優化原理與實踐後加上部分自己以前的理解整理而成的,更詳細的原理...

前端效能優化總結

多使用記憶體,快取或者其他方法 減少cpu計算,減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中,js放body後 懶載入減少dom操作,對dom操作做快取 減少dom操作,多個操作盡量合併在一起執行 事件節流...