前端效能優化

2021-09-01 05:07:53 字數 1083 閱讀 9771

[size=medium]一、 前端效能**法則:

二、時間花在哪?

blocked:包括所有預處理(查詢本地cache)時間和等待網路連線可用的時間

dns lookup:網域名稱解析。查詢過程:瀏覽器dns快取;作業系統dns快取;dns伺服器。

connect:建立乙個 tcp 連線到 web 伺服器 (或**) 所需的時間。如果正在使用安全的 https 連線這次包括 ssl 握手過程。

send:http 請求訊息傳送到伺服器所需的時間,將取決於傳送到伺服器的資料量。

wait:等待來自伺服器的響應訊息。此值包括由於採用網路延遲的延誤和處理該請求的 web 伺服器上所需的時間。

receive:從伺服器讀取響應訊息所需的時間。此值將取決於內容返回,網路頻寬的大小和是否使用 http 壓縮了。

cache read:讀取瀏覽器快取中的內容或 304 響應所需的時間。

ttfb:(time to first byte)從初始的網路請求正在發起由瀏覽器從伺服器接收的第乙個位元組的持續時間。它包括 tcp 連線時間、 將請求傳送時間和獲取響應訊息的第乙個位元組的時間。

三、優化方向

blocked:增加expires頭,[url=配置etag 參考:[/url]expires與etag控制頁面快取的優先順序

dns lookup:減少dns查詢,2個網域名稱要優於1個和4個網域名稱(yahoo)參考: [url=**加速最佳實踐 –[/url]減少dns查詢

connect:connect:keep-alive ; cdn

wait:伺服器快取;生成靜態頁面;伺服器負載均衡;重定向;sql語句優化;sql索引等伺服器後端處理速度。

如何減少http請求次數:

合併js檔案;合併css檔案;css sprites;image地圖;將編碼成base64資料嵌入網頁

如何減少阻塞次數、減少阻塞時間

五、 相關工具——分析(提供優化)

前端效能優化

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

前端效能優化

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

前端效能優化

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