VSAN 第 22 部分 – 策略合規性狀態
https://blog.csdn.net/xmxt668/article/details/102529583
2-1 為什麼要進行Web效能優化【企業剛需】
網頁速度快,才可以吸引更多的使用者,使用者體驗才可以。
搜尋排名,會優先考慮高效能網站。
尋找效能瓶頸
瞭解效能指標--多快才算快
利用測量工具和APIs
優化問題,重新測量(迭代)
移動端挑戰多
裝置硬體,網速,螢幕尺寸,互動方式
使用者更缺少耐心,>3秒載入導致53%對的跳出率
持續增長的移動使用者和移動電商業務
2-2 效能指標和優化目標【瞭解行業標準】
1.隨便開啟一個網頁,比如淘寶,用谷歌開啟開發者工具,點選Network選項卡
2.重新整理頁面,選擇重新整理按鈕的時候,點選右鍵,選擇最後一個“清除快取並硬性重新載入
”選項,重新整理之後可以看到頁面載入時間
Network裡面有個瀑布圖,表示資源的載入,可以橫向看和豎向看;橫向看的是每項具體的資源,不同的顏色代表不同的環節,有排隊,DNS查詢,SSL,TTFB(從使用者發出請求到資料返回的時間,反映了後臺的處理時間和網路時間),下載過程。資源如果並行載入,就會提升載入速度。
在NetWork裡面可以看到2根豎線,藍色的是DOM完成的時間,紅色的是所有資源載入完成的時間
在Network裡面的結果一次可能分析不完,我們可以先把結果儲存下來,在空白處右鍵,點選Save all as HAR with content
3.點選Lighthouse選項卡,這是google整合的一個性能測試的工具,報告總分是100分,使用這些工具的時候一定要多測試幾次,取平均值。該選項卡下有幾個指標,指標的黃色代表警告,綠色代表比較好,紅色的代表不好。
First Contentful Paint:從白屏到出現內容的時間。不能一直白屏,可以慢慢地出現內容,不能等所有的內容返回再載入內容
Speed Index:速度指數,背後有個複雜的計算過程,一般4s以內,是比較好的
,也要看頁面的具體情況,不能一概追求這個指標,只能不斷優化接近這個指標
4.上面的指標主要是網路的效能,還有使用者的互動體驗,淘寶隨便點選一個一級選單,二級選單就會立即出現,響應速度比較快。還有畫面的流暢度,接下來使用其他的工具,使用快捷鍵Ctrl+Shift+P
調用出命令視窗:輸入frame,點選Rendering Show frames per second (FPS) meter
,這是個監控,
可以看到頁面的幀數,淘寶可以達到很低(60fps)
優化所有的非同步請求,爭取很快能返回來,實在不行的話,可以加個Loading框
效能優化--載入
理解載入瀑布圖
基於HAR儲存與重建效能資訊
速度指數
重要測量指標(Speed Index,TTFB,頁面載入時間,首次渲染)
2-3 RAIL測量模型【黃金指南】
這是google提出的模型標準,要知道效能優化往哪個方向發展才好一點。受制於各種因素,直接輸入網頁連結,網頁內容可以立刻加載出來。
什麼是RAIL
Respose響應,對於使用者而言,互動的響應
Animation 動畫,動畫給使用者體驗是否流暢
Idle空閒,讓瀏覽器有足夠的空閒時間,不能讓主執行緒始終繁忙
chrome開發者工具裡有個Performance的選項卡,可以看到主執行緒是否空閒
Load載入,資源載入時間
RAIL評估標準
響應:處理時間應在50ms以內完成
是基於使用者調查得出的,使用者可以接受的時間是100ms,從使用者發出請求,到使用者返回請求的過程,其實有很多過程,真正做資料資料的時間只有50ms。
動畫:每10ms產生一幀 (1秒鐘60幀,瀏覽器繪製需要事件)
空閒:儘可能增加空閒時間
當空閒足夠的話,響應來的時候,才可以快速處理;業務相關的邏輯需要放到後臺去做
載入:在5s內完成內容載入並可以互動
(載入,解析的時間是5s)
逐步發現問題,解決問題
效能測量工具
- Chrome DevTools開發除錯,效能評測
- Lighthouse網站整體質量評估
- WebPageTest多測試地點、全面性能報告