前端效能優化

2021-10-25 22:05:42 字數 1015 閱讀 3389

1.解析速度快

2.多路復用

http1如果同時發起多個請求,就需要建立多個tcp鏈結,因為乙個tcp連線同時只能處理乙個http1請求。

http2可以多個請求共用乙個tcp連線,這就是多路復用

3.首部壓縮

如果多個請求很多資料都是重複的,如果可以把首部存起來,僅傳送不同的部分。就可以節省不少流量,加快請求時間。

4.優先順序

http2可以對比較緊急的請求設定比較高的優先順序,伺服器遇到這個請求優先響應

5.流量控制

6.伺服器推送

http2可以對客戶端請求傳送多個響應。

服務端返回html檔案,客戶端只需要解析html。

客戶端渲染過程

訪問客戶端渲染的**

伺服器端返回乙個包含了引入資源語句和

客戶端通過http向伺服器請求資源,當必要的資源都載入完畢後,執行new vue()開始例項化並渲染頁面。

服務端渲染過程

訪問服務端渲染**

伺服器檢視當前路由元件需要哪些資源檔案,然後將這些檔案的內容填充到html檔案。如果有ajax請求就會資料預取填充到html中,最後返回html頁面

當客戶端收到html檔案,可以直接渲染,同時載入資源,當資源載入完畢,執行new vue()例項化。

gzip 壓縮

const compressionplugin =

require

('compression-webpack-plugin'

)// gzip 打包壓縮

plugins:

[new

compressionplugin()

]

延遲載入,響應式,調整大小,降低質量,webp

解析html生成dom樹

解析css 生成cssom規則

解析js 操作dom和css

合併dom和css 生成渲染樹

遍歷渲染樹開始布局,

將所有圖層資料傳送給gpu,gpu合併圖層顯示在螢幕上

前端效能優化

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

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...