效能優化-載入
speed index （4秒內）
ttfb（請求發出時間到響應的等待時間）
頁面載入時間
首次渲染
效能優化-響應
互動動作的反饋時間
幀率fps（60fps）
非同步請求的完成時間(1s)
什麼是rail
response響應
animation動畫
idle空閒
load載入
rail評估標準
響應：處理事件應在50ms以內完成
動畫：每10ms產生一幀(60fps/s)
空閒：盡可能增加空閒時間
載入：在5s內完成內容載入並可以互動
效能測量工具
chrome devtools開發除錯、效能評測
lighthouse **整體質量評估
webpagetest 多測試地點、全面效能報告
解讀webpagetest的報告
wate***ll chart 請求瀑布圖
first view 首次訪問
repeat view 二次訪問
lighthouse的安裝及使用
本地npm安裝lighthouse
chrome devtools中使用
通過chrome web store 安裝外掛程式
使用chrome devtools分析效能
使用chrome devtools進行效能測試
audit(ligh
web前端效能優化
01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...
web前端效能優化
一 網路相關的一切，包括dns解析 http請求等等 二 web優化，就是前端頁面相關部分，也就是我們日常擼 能夠做到的一些 1 設定dns多級快取 瀏覽器快取，系統快取，路由器快取，ips伺服器快取，根網域名稱伺服器快取，頂級網域名稱伺服器快取，主網域名稱伺服器快取。2 dns負載均衡 dns重定...
前端web效能優化
使用cdn 進行dns預解析 每個請求都需建立連線消耗一定時間，請求數越多則網頁載入時長越長。我們可以將資源盡可能的合併從而減少請求 合併，使用sprites精靈圖 css 檔案合併 動態指令碼載入 defer html解析完成後才執行，按載入順序依次執行 async 載入完立即執行，和載入順序無關...