本文作者：ivweb caorich 原文出處：IVWEB社群 未經同意，禁止轉載
做hybrid頁面，需要測試其性能。我們不能認為用浏覽器打開該網頁得到的資料就算它線上的性能，因為webview的環境，其性能和浏覽器還是有所差距的。最近一直做相關工作，積累的一些小經驗，這裡分享出來。
統計線上hybrid頁面的性能，本質上還是打點上報。打的點一般參考<code>performance.timing</code>屬性。一般頁面最開始給一個初始絕對時間點作為參考，其餘的點減去這個初始時間就是頁面渲染的相對時間了。
如果沒有用戶端給初始時間點，可以用<code>performance.timing.fetchStart</code>作為初始時間點。我這裡根據上報情況看，fetchStart和用戶端給的絕對初始時間差距并不大。另外，如果頁面有重定向，<code>performance.timing.redirectStart</code>參數就不為0，将這個參數值作為初始時間應該更加合理。
html文檔的加載時間：
<code>timing.domInteractive</code>這個時間點并不太穩定，如果需要統計js執行的時間點，還是自己打點比較好。
更加詳細的<code>performing.timing</code>打點屬性可以參考這篇文章
由于是hybrid頁面的性能測試，我們不可避免的無法進行白盒測試。如果需要測試頁面滾動的fps、cpu、記憶體使用情況該怎麼辦嗯？隻能借助一些小工具來完成本地測試。這裡列出一些（多半是針對android，因為ios不越獄就很難擷取相關資訊）：
要分析一個頁面的卡不卡，可以先看看現在的gpu渲染情況。打開android設定->開發者選項->GPU呈現模式->柱形圖。可以看到螢幕上出現雜亂柱狀圖，靠近底部的綠色的線代表16.7ms，也就是每秒60幀的門檻值，如果一個柱狀條很高很高，上部的黃色部分很小，就說明這裡有幾幀被丢掉了。因為CPU沒有在規定的時間内送出displayList。
打開知乎app，随便滾動一下。發現一柱擎天，說明有一幀丢掉了。
這裡簡單說下各種顔色的柱狀條代表什麼。更加詳細的可以google的官方文檔
綠色： 你的主線程的運作時間，在這個時間裡，你的業務代碼正在飛速轉動
深藍色：render線程的onDraw方法的執行時間，最終生成displayList。
淺藍色：加載圖檔資源的時間。實際上是将記憶體中的位圖資源轉換到顯存中的時間。如果你非要将一張10241024的圖檔渲染到5050大小，這段時間就會變長。
紅色： 将displayList轉換成原生渲染指令，并且發送（issue）到一個隊列裡。如果深藍色的過程很長，這一部分也勢必很長。不過，displayList可以緩存，渲染指令不能緩存。
黃色：swap時間。cpu完成了上面的紅色時間，将所有渲染指令(issue command)丢到隊列裡面就直接轉到下一幀的渲染任務上去了，如果GPU不夠快，那麼這個隊列就會滿，如果隊列滿了，cpu就會等待入隊渲染指令。黃色區域就是cpu的等待時間。如果像上圖一樣，一直存在swap時間。說明GPU的渲染是滞後的。不過沒關系，你看到的頁面同樣是流暢的。
上面的柱狀圖隻能看到一個直覺的印象，如果你想擷取這些柱狀圖的資料，需要安裝adb開發包。 安裝後，插上android手機，在終端運作指令：
具體的參照這篇文章
要保證頁面滾動和動畫的流暢，可能第一想到的名額是FPS，沒錯，但是還有另外一個衍生的名額也很重要：幀方差。幀方差就是FPS序列的方差，越小，說明頁面滾動越平滑。
android7.0以下的手機可以用<code>Emmagee</code>軟體來進行測試。非常友善，每秒統計一次，直接生成csv以待分析。
或者用adb工具來測試：
将改變time将改變監控測試時間。 然後打開你的app，出發動畫和滾動，直到測試結束。
這個時候本地檔案中将出現mynewtrace.html檔案，點開看一看可以發現像時間線一樣的視圖資料。需要提取資料用指令：
然後進行後續的分析。
假設現在拿到了第一手csv，需要進行加工處理。一開始着手這樣工作的時候真是沒少走彎路。主要是：
本以為用excel分分鐘搞定的資料處理任務，但花了數倍的時間還未搞定。
缺少養眼的統計圖表模闆，畫出來的統計圖表像倒退了10年的産品。
這裡安利一個統計工具: <code>R語言</code>。做畢設的時候淺度用過。主要是你想要某種統計效果時候，它并不耽誤你的時間。比如：
以分析RN的架構時間為例：
讀取資料：
檢視平均值：
看看架構時間的分布：
WTF！居然有些使用者架構時間超過了3秒，這怎麼能忍？統計一下！
可見1.24%的使用者的架構時間高于3s，太慢了。能不能統計一下，是不是和ios的版本有關呢？
繪圖按照UserAgent分類一下：
很明顯，可以去調研下有顔色的這三個ios版本，它們比較慢。
R更多的是一個友善的表單資料處理工具，用來分片、篩選、算總數、平均、方差等等常用的操作實在太友善了。伴随着你的思考，幾條指令就可以實作了。用熟悉了是很節省時間的事情。
原文出處：IVWEB社群 未經同意，禁止轉載