web前端效能優化

2021-07-30 13:27:23 字數 1114 閱讀 9789

01:減少http請求

:使用css sprite

: 合併js css

02 :使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取

: 設定長的expires時間將直接減少http請求

: 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器

: 發現資源還沒有過期,會直接從快取中讀取,不會再次產生http請求

04 : 將css 放在頂部

05:將js放在底部

:js會阻塞對其後面內容的呈現

06:避免使用css表示式

07:將css js 放在外部檔案中

08:通過使用keep-alive和較少的網域名稱來減少dns查詢

09:精簡css 和js 檔案

10:尋找一種避免重定向的方法

11:移除重複的指令碼

12:配置etag

13:確保ajax 請求遵守效能,必要時應具備長久的expires頭

14 : 避免使用iframe

15:避免使用空連線屬性

16:避免節點深層級巢狀

:層級越深的節點在初始化構建時,所佔記憶體越多

:通過瀏覽器html解析器會將整個html的結構儲存為dom數結構

:當節點巢狀層次越深構建的dom樹層級也越深

17:減少html文件大小

:刪除對執行結果無影響的空格空行和注釋;

:避免table布局

:使用html5

:有時需要在頁面載入完之前,就對頁面進行定位
19:避免指令碼 阻塞載入

:之後的html**就制定等待。故應該將指令碼放在文件的末尾

20:避免使用@import

: 避免使用css表示式

:避免使用統配選擇器

:避免正則的屬性選擇器

:移除無匹配的樣式

21:使用事件**

:快取選擇器查詢結果

:避免頻繁的io操作

:避免頻繁的dom操作

web前端效能優化

一 網路相關的一切,包括dns解析 http請求等等 二 web優化,就是前端頁面相關部分,也就是我們日常擼 能夠做到的一些 1 設定dns多級快取 瀏覽器快取,系統快取,路由器快取,ips伺服器快取,根網域名稱伺服器快取,頂級網域名稱伺服器快取,主網域名稱伺服器快取。2 dns負載均衡 dns重定...

前端web效能優化

使用cdn 進行dns預解析 每個請求都需建立連線消耗一定時間,請求數越多則網頁載入時長越長。我們可以將資源盡可能的合併從而減少請求 合併,使用sprites精靈圖 css 檔案合併 動態指令碼載入 defer html解析完成後才執行,按載入順序依次執行 async 載入完立即執行,和載入順序無關...

Web前端效能優化

1.1 減少http請求 1.2 加快dns解析 1.3 設定http快取 1.4 資源合併 js,css 1.5 資源前端壓縮 1.6 精靈 sprite 1.7 data url scheme 1.8 服務端壓縮gzip 1.9 懶載入 1.10 css頭部載入 1.11 js非同步載入 1.1...