前言：

最近剛剛完成項目，空閑一段時間，想起之前有被問起怎么對前端進行性能優化，自己也是腦中零零散散的總不成體系，現特來總結，歡迎補充指教。

?

1、整體資源

　　（1）js、css源碼壓縮

　　（2）css文件放到文檔頂部，js?文件放到文檔底部

　　　　因為瀏覽器渲染網頁是自上而下的，用戶第一眼見到的是頁面，先加載頁面相關的提高頁面加載速度，另外避免js在頁面沒有完全加載完成操作DOM帶來錯誤

　　（3）進行CDN托管（具體可參看https://div.io/topic/930）

　　（4）data緩存

?

2、css

（1）避免使用css expression (css?表達式)?

? ? ? ? 微軟在IE5時支持，IE8就不支持了，過老的內核，這個基本沒有人會使用

?（2）使用CSS Sprites（圖片精靈）

　　將圖片合到一張大圖，并且控制圖片大小（在滿足顯示的情況下，過大圖片可以進行質量壓縮），目的減小體積，減小http訪問次數

?（3）js中動態改變元素樣式時，使用類名修改，而不是直接在DOM中更改css?屬性，避免頁面進行重構

?

3、image

? ? （1）大型web應用中,可以搭建圖片服務器，存放圖片以及視頻資源（具體實施請自行百度）

　（2）在?對于有圖片畫廊及圖片占大比重的網站中，采取圖片預加載的方式，提升用戶體驗

　　　（可參考https://blog.csdn.net/sunshine940326/article/details/53536535?locationNum=3&fps=1）

?

4、js

（1）模塊化編程，養成封裝方法的習慣，提高代碼的重復利用率

（2）減少閉包的使用頻率，減少內存占用

?

目前想到的是以上，歡迎補充和指教！

總結

以上是生活随笔為你收集整理的全方位分析web前端如何进行性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。