如何利用Chrome DevTools優化網頁性能

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這篇內容是極客時間每日一課的學習筆記,本來是記錄在了幕布上面,但分享到部落之後發現體驗效果並不好,寫作平臺這麼好的東西不能再束之高閣了。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"爲啥要做性能優化?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端性能直接關係到產品的用戶體驗與經營結果。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"解決前端性能的關鍵點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何定義前端性能的標準,並獲取到標準對應的指標值,從而發現影響頁面性能的問題。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何定義頁面性能的指標體系?"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"我們需要關注的性能指標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"request數、打包大小、load時間、FCP:首次內容繪製、LCP:最大內容繪製,代表最核心的內容被加載的時間、TBT:累積阻塞時間評估網站資源加載在執行和阻塞的時間。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"使用ChromeDevTools來測試性能指標"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/11/11d00457447ff4c8a856bcef2a2abe1d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"性能分析的插件Lighthouse"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/99/9985e18f080d1cce58b010402aebda18.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"生成Performance報告後,重點關注以下指標"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"First Contentful Paint(FCP)"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當用戶啓動頁面加載與呈現首屏內容之間的時間,時間越長,白屏時間越長。可以通過骨架屏等手段,儘量將頁面分批分層逐步加載,加強用戶的體驗感受。儘可能少得等待。"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Largest Contentful Paint(LCP)"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"測量網站中最大的元素,何時呈現在屏幕上,可以近似理解爲最主要的內容對用戶的可見時間,LCP主要受服務器響應時間、存在渲染阻止的JavaScript和CSS、資源加載時間、客戶端渲染時間四個因素的影響。"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Total Bloking Time(TBT)"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總阻塞時間。用來量化加載的響應能力,累積主線程被阻塞並會影響用戶操作反饋的總時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了找到FCP與LCP的阻塞點,建議打開Chrome DevToos過濾器的Capture screenshots選項。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我的Chrome版本是 85.0.4183.83,勾選Performance中的Screenshots選項,在訪問目標頁面之前,點擊Record,就能很直觀得得到頁面的各個階段的性能情況。"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/07/07db38427808d44bde29fa9f3e466be6.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"華爲內部性能指標的建議值"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/09/09755331a91207e74d8177dd43c3177f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"四個性能優化方向"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"減少第三方代碼的影響"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"減少主線程工作,我們可以使用LightHouse裏面的long main-thread task來看"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"減少JS執行時間,我們可以使用LightHouse裏面的JavaScript execution time"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"保持低請求的數量和小傳輸"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Chrome團隊的RAIL模型("},{"type":"link","attrs":{"href":"https://web.dev/rail/)","title":null},"content":[{"type":"text","text":"https://web.dev/rail/)"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"RAIL是以用戶爲中心的性能模型,它將性能分解爲以下四個方面:"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Response"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Animation"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Idle"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Load"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"寫在最後"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後,我想說的是,以前只會去學買的專欄,很少打開《每日一課》這個產品,最近發現能學到不少東西。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"15分鐘的分享,我花了差不多兩個小時來消化。不管是解決問題的思路、還是一個工具,都是能立即就能用得上的,所以,千萬不要錯過。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章