全方位分析web前端如何進行性能優化

前言：

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

 

一、總體資源

　　（1）js、css源碼壓縮

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

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

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

　　（4）data緩存

 

二、css

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

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

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

　　將圖片合到一張大圖，而且控制圖片大小（在知足顯示的狀況下，過大圖片能夠進行質量壓縮），目的減少體積，減少http訪問次數

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

 

三、image

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

　（2）在 對於有圖片畫廊及圖片佔大比重的網站中，採起圖片預加載的方式，提高用戶體驗

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

 

四、js

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

（2）減小閉包的使用頻率，減小內存佔用

 

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