前言：

最近剛剛完成項(xiàng)目，空閑一段時(shí)間，想起之前有被問(wèn)起怎么對(duì)前端進(jìn)行性能優(yōu)化，自己也是腦中零零散散的總不成體系，現(xiàn)特來(lái)總結(jié)，歡迎補(bǔ)充指教。

?

1、整體資源

　　（1）js、css源碼壓縮

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

　　　　因?yàn)闉g覽器渲染網(wǎng)頁(yè)是自上而下的，用戶第一眼見(jiàn)到的是頁(yè)面，先加載頁(yè)面相關(guān)的提高頁(yè)面加載速度，另外避免js在頁(yè)面沒(méi)有完全加載完成操作DOM帶來(lái)錯(cuò)誤

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

　　（4）data緩存

?

2、css

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

? ? ? ? 微軟在IE5時(shí)支持，IE8就不支持了，過(guò)老的內(nèi)核，這個(gè)基本沒(méi)有人會(huì)使用

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

　　將圖片合到一張大圖，并且控制圖片大小（在滿足顯示的情況下，過(guò)大圖片可以進(jìn)行質(zhì)量壓縮），目的減小體積，減小http訪問(wèn)次數(shù)

?（3）js中動(dòng)態(tài)改變?cè)貥邮綍r(shí)，使用類名修改，而不是直接在DOM中更改css?屬性，避免頁(yè)面進(jìn)行重構(gòu)

?

3、image

? ? （1）大型web應(yīng)用中,可以搭建圖片服務(wù)器，存放圖片以及視頻資源（具體實(shí)施請(qǐng)自行百度）

　（2）在?對(duì)于有圖片畫廊及圖片占大比重的網(wǎng)站中，采取圖片預(yù)加載的方式，提升用戶體驗(yàn)

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

?

4、js

（1）模塊化編程，養(yǎng)成封裝方法的習(xí)慣，提高代碼的重復(fù)利用率

（2）減少閉包的使用頻率，減少內(nèi)存占用

?

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。