效能優化之Angular前端優化總結

2022-03-17 13:22:46 字數 876 閱讀 7374

1. 動靜分離

專案裡面前端比較占用頻寬的一般都是載入靜態資源,請求後台介面一般占用頻寬都是1kb左右,但是在載入靜態資源往往會達到mb級別,占用大量頻寬,明現影響了業務,所以動靜分離是必須而且必要做的,angualr裡面也會有指令來指定載入靜態資源路徑從而動靜分離

ng build --deployurl=指定網域名稱/

2.js ,css **壓縮

angular編譯的js基本都很大達到了mb級別,載入起來很占用頻寬,不過angualr也提供了編譯時壓縮**的功能,angular build指定為 --prod即可,你會發現壓縮後**成倍數的變小很恐怖哦,不過prod編譯檢查比較嚴格,會出現很多報錯,另外這裡多說一嘴,我自己也測試比較過,angular專案設定懶載入策略,壓縮後的js還會進一步變小

export const routing: modulewithproviders = routermodule.forroot(routes, );

額外補充:ng build --prod --build--optimizer // 編譯後進一步壓縮檔案的大小

3.cdn加速

4.nginx快取

一般做到上面3步,基本可以實現頁面秒開了,但是開啟頁面還是會有請求伺服器資源端會占用伺服器端頻寬,如果需要進一步優化可將一些訪問量高的頁面做nginx快取,這樣就不會走伺服器

上面的nginx配置基本就可以快取頁面了,如果頁面修改需要重新整理快取就在url後面追加新的時間戳就可以了

前端效能優化之 快取

一.http協議頭控制 cache control用於控制檔案在本地快取有效時長。最常見的,比如伺服器回包 cache control max age 600表示檔案在本地應該快取,且有效時長是600秒 從發出請求算起 在接下來600秒內,如果有請求這個資源,瀏覽器不會發出http請求,而是直接使用...

前端開發 之 效能優化

1 多使用記憶體 快取或者其他方法儲存 2 減少 cpu 計算 減少網路請求 1 怎麼讓頁面 靜態資源載入的更快 2 怎麼讓頁面上的一些操作變得更快 1 靜態資源的壓縮合併,預載入檔案 合併在一起 window.addeventlistener domconetentloaded function ...

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...