前端性能優化實踐之百度App個人主頁優化

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"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":"性能是每個前端工程師都應該關注的話題，通用的優化手段已有許多文章和實踐，就不再贅述，本篇以百度App個人主頁爲例，聊聊針對業務特點進行的一些性能優化實踐。"}]},{"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","marks":[{"type":"strong"}],"text":"適用於"},{"type":"text","text":"：傳統意義的優化手段能用的都用了：打包拆包，縮減體積和 HTTP 請求數、CDN和按需加載等，但性能方面仍不太理想。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"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":"優秀方案的制定首先需要準確的數據做支撐。一般來說，前端性能指標包括"},{"type":"text","marks":[{"type":"strong"}],"text":"DOM ready"},{"type":"text","text":"、"},{"type":"text","marks":[{"type":"strong"}],"text":"First Contentful Paint"},{"type":"text","text":"、"},{"type":"text","marks":[{"type":"strong"}],"text":"白屏、首屏、"},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"用戶可操作時間"}]},{"type":"text","marks":[{"type":"strong"}],"text":"、"},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"onload時間等，"}]},{"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":"個人主頁是在百度App客戶端內的web頁面，有 hybrid版（使用file協議直接加載本地HTML和JS、CSS）和web版（打開一個web URL）兩種不同的打開方式。"}]},{"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":"首先，我們瞭解一下個人主頁頁面的結構："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/3b\/84\/3b594fe205b50476270f51785c6aa284.jpg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"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":"頭部區域展示當前作者的個人信息，tab區域則是作者創作產生的內容。頁面中所有數據均爲異步獲取。打開個人主頁需要經歷的過程可簡化成以下幾個："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/88\/28\/88ba2ff9c049076aba91075111106828.jpg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"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":"其中耗時可劃分爲端耗時、網絡和server耗時、前端渲染耗時三大部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/26\/da\/26656f5bc984d57ac42796e6d8b970da.jpg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"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":"根據以上過程，我們制定了定義指標的原則："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁頁面展現的用戶數據，是頁面內JS 請求數據後的異步渲染。因此首屏定義爲："},{"type":"text","text":"頭部區域 和 tab列表 第一屏數據渲染完成"},{"type":"text","text":"（用戶真正可見，也即用戶可操作時間）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主頁是由 "},{"type":"codeinline","content":[{"type":"text","text":"san"}]},{"type":"text","text":" 搭建的 "},{"type":"codeinline","content":[{"type":"text","text":"SPA"}]},{"type":"text","text":" 頁面，HTML 上同步的 DOM 並沒有真實內容出現，在首屏用戶數據返回之前，頁面均顯示爲 loading 態。因此白屏的定義爲："},{"type":"text","text":"頁面DOM掛載上內容"},{"type":"text","text":"（用戶首次看到頁面不再空白的時間）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於在端內，iOS 和 安卓 onload 事件觸發的時機不同，iOS上資源加載會阻塞頁面渲染，因此主頁中針對 iOS 進行了調整，使用 "},{"type":"codeinline","content":[{"type":"text","text":"rAF"}]},{"type":"text","text":" 使 iOS 在 JS開始執行時即觸發 onload，而安卓在首屏需要的圖片、jsonp 等資源全部 load 完成後觸發，因此該項指標主要用作輔助作用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/17\/3c\/1710759e85ce2be261581febcb64a33c.jpg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}