微信小遊戲的內存調優指南

微信小遊戲開發、測試、現網三階段的內存調優工具使用指南：

包含微信開發者工具，微信Android性能面板，PerfDog，小遊戲雲測試和小遊戲性能助手等工具。

-

1. 前言

---

在開發微信小遊戲的過程當中，開發者每每會遇到不少內存問題，如內存泄漏或者內存溢出等。對目前幾款微信創意小遊戲進行測試發現，微信小遊戲運行時的異常Crash可能是因爲內存佔用過多形成的。爲了方便開發者調優小遊戲內存，本文從開發、測試與現網不一樣階段介紹咱們常見的內存分析與調優工具。

1. 現網數據：爲何要作小遊戲內存優化？

---

• 小遊戲數據助手：「小遊戲數據助手」是微信發佈的官方小程序，支持相關的開發和運營人員查看自身小遊戲的運營數據。

爲了能讓開發者掌握遊戲的運行性能數據，小遊戲框架底層會對現網玩家進行必定機率的採樣，採樣量能夠經過趨勢數據勾選獲得。須要上報性能數據的玩家會以必定時間間隔（目前爲1分鐘）上報數據，所以該數值能比較準確地反應玩家真實的遊戲體驗狀況。最終這些數值會呈如今小遊戲數據助手提供的「性能分析「板塊。

咱們能夠在左圖」概況「中看到總體的內存均值與遊戲因內存產生的內存異常退出率，在右圖「運行性能」中看到在不一樣檔次的機型下的內存均值與內存異常退出率。

值得注意的是，在iOS下小遊戲與微信客戶端是處於同進程，所以二者總內存達到OOM閾值（如上圖）時很是容易被系統KILL掉，所以開發者須要格外注意內存的使用量。
經過分析，咱們發現許多小遊戲在iOS的內存異常退出率偏高（尤爲是低端機），若是你發現本身的小遊戲也存在這樣的現象，那麼很大機率存在內存問題而致使大批玩家流失，接下來須要趕忙着手優化小遊戲的內存使用。

1. 開發階段： 把一切都控制在最開始

---

開發過程當中，爲了方便開放者定位和調試所研發的微信小遊戲的內存問題，本文推薦三款內存調試工具：

• 微信開發者工具Performence與Memory：微信開發者工具中內置了Google Chrome DevTools 工具。 DevTools能夠幫助開發人員即時編輯頁面並快速診斷問題，最終能夠幫助開發人員更快地構建更好的小遊戲。
• 微信Android 真機性能測試：微信Android端自身集成了三種內存分析工具，分別是性能監控面板、Heap Snapshot、V8-CPU-Profile。開發者可經過三者監控Android真機環境下各性能指標。
• PerfDog ：移動全平臺iOS/Android性能測試、分析工具平臺。快速定位分析性能問題，提高APP應用及遊戲的性能和品質。手機無需ROOT/越獄。手機硬件、遊戲及APP應用也無需作任何修改，極簡化即插即用。

3.1 微信開發者工具Performence與Memory

若是想要詳細瞭解微信開發者工具下的Performance和Memory的所有功能，參考 Chrome Performance 和  Chrome Memory。
截圖取自微信開發者工具和 Chrome Performance。

3.1.1 微信開發者工具 之 Performance

爲了更方便清晰地分析內存問題，建議開發者在引擎端導出微信小遊戲項目時，選中「調試模式」。

使用Performance的錄製步驟以下圖所示（勾選上Performance下的ScreenShots和Memory，見下圖黃褐色框區域）：

錄製完成後會獲得以下圖所示的結果，對結果按照下文給出的方式進行分析。Performance中共有4個區域，起到不一樣的做用，接下來分別介紹。

區域1：概覽窗口

包含FPS、CPU、NET、ScreenShots、HEAP五部分。其中：

• NET對應區域2中的Network。每一個彩色條表明一個資源。條越長，檢索資源所花費的時間越長。每一個欄的淺色表明等待時間（從請求資源到下載第一個字節之間的時間）。深色部分表示傳輸時間（下載第一個字節和最後一個字節之間的時間）。
  條的顏色編碼以下：

  • HTML文件是藍色的。
  • Scripts是黃色的。
  • Stylesheets 是紫色的。
  • 媒體文件爲綠色。
  • 其餘資源是 灰色的。
• 當鼠標放在FPS，CPU和NET區域時，將顯示該時間點的頁面截圖。
• HEAP是JS堆的縮略展現，對應着區域3。

區域2和區域3

包括Network、Frame、Interactions、Main、GPU、Chrome_childIOThread和Compositor等七個部分，內存問題重點關注Network和Main。

• NetWork對應着概覽窗口（區域1）中的NET，再也不贅述。
• Main: CPU堆棧跟蹤的可視化火焰圖。顯示了主線程隨時間變化的活動圖表。x軸表示一段時間內的記錄，每一個條形表明一個事件，較寬的條形表示該事件花費了更長的時間。y軸表示調用堆棧，事件相互疊加時，表示較高的事件致使較低的事件。
  當選中Main時，區域3呈現了JS Heap、Documents、節點數(Nodes)、監聽器（Listeners）和GPU memory等變化曲線。
  

區域4：統計窗口

在上述三個窗口中選中不一樣的區域，該窗口呈現不一樣的統計結果。

分析內存時主要關注JS Heap數據及其曲線。

如上圖，曲線顏色和上方複選框的顏色保持一致，如JS Heap是藍色，Listeners是暗黃色。曲線顯示了五組數據的曲線圖，分別是JS Heap(JS 堆內存)，Documents(DOM樹根節點數量)，Nodes(節點數)，Listeners(監聽器數量)和GPU Memory。
禁用複選框能夠從圖表中隱藏該類別。
點擊JS Heap曲線時，Main中會定位到對應的執行函數，對於分析內存變化頗有幫助。

3.1.2 Chrome Devtools 之 Memory

開發者工具中的Memory能夠幫助你:

• 找出您的頁面當前正在使用多少內存。
• 經過時間軸記錄可視化一段時間內的內存使用狀況。
• 使用堆快照識別分離的DOM樹（致使內存泄漏的常見緣由）。
• 使用「分配時間軸」記錄找出什麼時候在JS堆中分配新內存。

Memory的Profiles一共有三種類型：
Heap snapshot: 顯示了當前時刻頁面上的js 對象和對應的DOM節點。
Allocation instrumentation on timeline: 以時間軸的形式展示出來的js heap。
Allocation sampling: JS heap的採樣，多用於長時間的記錄。（本文不做介紹）
此外，還能夠採用Performance中的memory的方式來獲取內存信息，其記錄的js heap與memory基本一致，可是有一點須要注意的是， Heap snapshot記錄的是乾淨的內存（GC後的），而Performance中記錄的內存並不必定通過了GC。

3.1.3 Heap snapshot

Heap snapshot 有 Summary、Comparison、Containment和Statistics四種視圖。

• Summary 顯示按構造函數名稱分組的對象。使用它能夠根據構造函數名稱分組的類型來查找對象（及其內存使用狀況）。這對於跟蹤DOM泄漏特別有用 。
• Comparison顯示兩個快照之間的差別。使用它能夠比較操做以前和以後的兩個（或多個）內存快照。經過檢查釋放的內存中的增量和引用計數，能夠確認內存泄漏的存在和緣由。
• Containment容許瀏覽堆內容。它提供了一個更好的對象結構視圖，有助於分析全局命名空間（窗口）中引用的對象，以找出使它們保持不變的緣由。用它來分析閉包並從低層次深刻研究對象。
• Statistics顯示了當前js heap各類類別的資源所佔用的內存大小的統計圖。

1. Summary

以下圖所示：其中

• Constructor表示使用此構造函數建立的全部對象。
• Shallow Size顯示對象自己佔用的內存大小。
• Retained Size 顯示刪除對象後能夠釋放的內存大小（依賴項不可再訪問）。這個大小其實主要包含了依賴項的大小。
• Distance使用節點到根距離的最短路徑。
  展開每一行，將顯示其全部實例。@字符後的數字是對象的惟一ID，能夠按對象比較堆快照。
  
• (global property) – 全局對象和其引用對象的中間對象。
• (roots) – 引用了所選對象的實體對象。引用可能被瀏覽器引擎出於自身目的所建立。瀏覽器引擎具有引用緩存，可是這些引用都是弱引用，所以不會阻止所選對象的垃圾回收。
• (closure) – 經過函數閉包對一組對象的引用計數。
• (array, string, number, regexp) – 具備引用數組，字符串，數字或正則表達式的屬性的對象類型的列表。
• (compiled code) – 全部與編譯代碼相關的內容。
• HTMLDivElement，ArrayBuffer等 – 對代碼引用的特定類型的元素或文檔對象的引用。

2. Comparison

經過將多個快照相互比較來查找存在差別的對象。爲了驗證某個應用程序操做不會形成泄漏（例如，一般是一對直接和反向操做，例如打開一個文檔，而後關閉它，不會留下任何垃圾），您能夠遵循如下情形：

1. 在執行操做以前，錄製堆快照（take heap snapshot）。
2. 執行一項操做（以您認爲會致使泄漏的某種方式與頁面進行交互）。
3. 執行相反的操做（進行相反的交互並重復幾回）。
4. 拍攝第二個堆快照，並將其視圖更改成「比較」，將其與快照1進行比較。
   在「比較」視圖中，顯示兩個快照之間的差別。展開總條目時，顯示添加和刪除的對象實例：

3. Containment

本質上是應用程序對象結構的「鳥瞰圖」。能夠經過它查看函數閉包內部，觀察組成JavaScript對象的VM內部對象，以及瞭解應用程序在很是低的級別使用了多少內存。
該視圖提供了幾個入口點：

• DOMWindow objects是代碼層面的「全局」對象。
• GC root是VM垃圾回收使用的實際GC根目錄。GC根目錄能夠由內置對象映射，符號表，VM線程堆棧，編譯緩存，句柄做用域，全局句柄組成。
• native object 是JavaScript虛擬機內部「推送」以容許自動化的瀏覽器對象，例如DOM節點，CSS規則。

Allocation instrumentation on timeline

錄製時，請注意「分配時間軸」上是否有藍色條狀顯示，以下面的屏幕截圖所示。

這些藍色條表示新的內存分配。能夠縮放欄以篩選「Constructor」 窗格，以僅顯示在指定時間範圍內分配的對象。
展開對象，而後單擊其值查看有關它的更多詳細信息。

3.2 微信Android 真機性能測試

微信Android端自身集成了三種內存分析工具，分別是性能監控面板、Heap Snapshot、V8-CPU-Profile。開發者可經過三者監控Android真機環境下各性能指標。
經過此工具，開發者能夠監控Android真機環境下的各個內存指標的實時變化。

3.2.1 性能監控面板

微信 Android 7.0.7 版本及以上，微信爲小遊戲開發版和體驗版提供了性能監控面板，能夠經過膠囊按鈕-開發調試-打開性能監控面板打開，效果以下圖所示：

開發者可經過在Android真機中實時地監控整個遊戲過程當中的各項資源的變化，更直接地定位和發現內存問題。

開發者能夠監控不一樣內存的佔用狀況，經過不一樣內存的變化趨勢來判斷是否有內存泄漏的狀況，各個指標含義以下：

名稱

含義

summary.native-heap

native 內存

summary.system

系統內存

summary.total-swap

總 swap 內存

summary.graphics

顯存

summary.java-heap

java 內存

summary.total-pss

總內存

summary.private-other

其餘私有內存

summary.code

靜態代碼，資源內存

summary.stack

棧內存

"內存"指總內存，其值與summary.total-pss保持一致。

3.2.2 Heap Snapshot

微信 Android 7.0.7 版本及以上，微信爲小遊戲開發版和體驗版提供了Heap 內存快照的能力，一樣是在膠囊按鈕中打開，選擇開發調試中的 Take Heap Snapshot，在界面彈出以下圖所示的提示後，從手機中的提示的位置把 Heap Snapshot 拷貝到電腦上。

以後在微信開發者工具中的調試器的 Memory 中，Load 拷貝出的Heap Snapshot 文件，就能夠查看 V8 的內存快照了，效果以下圖所示：

3.3 PerfDog的使用說明

各個參數信息和使用說明詳見 PerfDog使用說明；
本節只精簡地介紹使用PerfDog 進行內存定位的操做。

在本文中，PerfDog的做用在於 ：
（1）追蹤內存變化的場景，幫助快速定位到內存異常的場景。
（2）從宏觀角度觀察微信小遊戲運行時整體內存變化趨勢，分析小遊戲內存的可優化空間。

3.3.1 iOS設備使用說明

• Step 1：打開PerfDog，選擇手機設備（USB模式或者WIFI模式，建議選擇USB模式），選定應用程序「微信」。此時能夠看到右側區域多個指標的趨勢圖。本文中重點關注Memory Usage。
  
  爲了更清晰地分析內存變化場景，建議在PerfDog中打開ScreenShot（只支持USB模式）：打開方式爲點擊右下角"➕"，選中ScreenShot。以下圖：
  
• Step 2：在移動設備終端打開所要測試的微信小遊戲。此時正常狀況下，能夠看到右側Memory Usage中的各個曲線發生變化。

• Step 3：在微信小遊戲的各個場景中進行遊戲操做，觀察右側Memory Usage的變化。

  • iOS設備下微信小遊戲與微信處於同一進程，故直接觀察微信進程的Memory Usage的變化便可。

  • iOS設備下Memory Usage各字段以下。在下列指標中，定位內存問題重點關注Memory指標。

    • Memory ：統計FootPrint，是測試過程當中重點觀察的指標。

      注1：PerfDog暫時在iOS九、10系統沒法獲取該字段，其餘版本可正常使用。如作性能測試，建議升級iOS系統版本。
      注2：OOM與FootPrint有關，與系統、機型無關。只與RAM有關，如1G內存機器。FootPrint超過650MB，引起OOM。

    • Xcode Memory ：XCode Debug gauges統計方式。

      注：PerfDog暫時在iOS九、10系統沒法獲取該字段，其餘版本可正常使用。如作性能測試，建議升級iOS系統版本。

    • Real Memory：Xcode Instrument統計方式，指實際佔用物理內存。

      注：該指標與物理內存系統策略有關，衡量內存指標時不會關注，可是它有助於分析和定位總體性能問題。好比：Memory沒有下降，說明應用沒有釋放內存，可是Real Memory卻下降了，說明系統對內存作了壓縮。因爲壓縮會佔用CPU資源，相應會致使FPS下降。

    • Virtual Memory：虛擬內存
• Step 4：依據Memory曲線變化，對照實際操做場景或者ScreenShot給出的場景截圖，根據微信小遊戲的代碼邏輯，定位出內存異常的場景。

3.3.2 Android設備使用說明

注1： Android設備須要開啓手機USB調試模式及容許USB應用安裝
注2：針對Android設備有兩種模式，非安裝模式和安裝模式。
​ a. 非安裝模式（推薦）：手機即插即用，無需任何設置及安裝，使用很是簡單，但手機屏幕上沒有實時性能數據顯示。測試時，PerfDog會彈框警告，但不影響使用，警告信息以下：

​ b. 安裝模式：須要在手機上自行安裝PerfDog.apk，手機屏幕上有實時性能數據顯示（須要容許USB應用安裝和PerfDog懸浮窗管理權限），啓動PC端PerfDog，則會在手機上自動PUSH安裝PerfDog.apk，具體安裝相似各個手機廠商安裝第三方APP提示安裝便可。（注：因爲不少手機安裝須要帳號密碼，致使沒法自動安裝，若是自動安裝失敗，則會把安裝文件PerfDog.apk釋放到當前文件夾裏，手動安裝PerfDog.apk便可）。此模式下，在測試過程當中，可能因爲系統資源緊缺會kill PerfDog顯示app（手機界面性能數據顯示），但不影響正常測試功能。

• Step 1：打開PerfDog，選擇手機設備（USB模式或者WIFI模式，建議選擇USB模式），選定應用程序「微信」。此時能夠看到右側區域多個指標的趨勢圖。本文中重點關注Memory Usage。
  
  爲了更清晰地分析內存變化場景，建議在PerfDog中打開ScreenShot（只支持USB模式）和Memory Detail：打開方式爲點擊右下角"➕"，選中ScreenShot和Memory Detail。以下圖：
  
• Step 2：在移動設備終端打開所要測試的微信小遊戲。此時正常狀況下，能夠看到右側Memory Usage中的各個曲線發生變化。

• Step 3： 在微信小遊戲的各個場景中進行遊戲操做，觀察右側Memory Usage的變化。

  • Android設備下微信小遊戲與微信處於不一樣進程，須要在PerfDog中選取小遊戲進程。選取小遊戲進程方式以下圖所示：鼠標放置在區域「1」上，會彈出右側浮動框，其中深色區域是當前微信內活躍的進程。若是此時微信正在運行小遊戲，則該進程爲微信小遊戲進程。點擊深色進程，即選中了小遊戲進程。此時觀察該進程的Memory 變化便可。
    

    • Android設備下Memory Usage各字段以下。在下列指標中，定位內存問題重點關注Memory指標。

      • Memory： PSS Memory，統計結果和Android Java API標準結果一致，與Meminfo也一致。

        注：部分三星機器系統修改了Meminfo底層統計方式，致使Meminfo與Java AP統計結果不一致，新出三星機器已修復。

      • Swap Memory ：部分設備支持Swap功能，在啓用Swap功能後，系統會對PSS內存進行壓縮，Swap增長，PSS會相應減小，因爲壓縮會佔用CPU資源，同時相應會致使FPS下降。
      • Virtual Memory：VSS。
• Step 4：依據Memory曲線變化，對照實際操做場景或者ScreenShot給出的場景截圖，根據微信小遊戲的代碼邏輯，定位出內存異常的場景。

1. 測試階段：上線前的最後一道防線

---

小遊戲雲測試：小遊戲雲測試是微信小遊戲團隊爲開發者提供的一套完整易用的在線測試服務，以幫助開發者更高效、更全面地進行自動化遊戲性能測試、兼容性測試，驅動產品質量提高和優化，爲用戶帶來更佳的遊戲體驗。具有高覆蓋率的真機設備集羣、低成本接入門檻和持續集成性能、兼容性檢測工具等特色。

歡迎參與內測

4.1 內存專項數據

點擊上圖中的內存報告按鈕。

能夠看到內存概覽、內存分佈、內存Top列表和內存數據詳情等多種統計數據。

• 內存概覽：高中低檔機型下，多種內存數據（如avg_graphic、avg_native）等的概況數據。
  
• 內存分佈：總內存最大值(max_totoal)的機器數量分佈狀況，主要由任務測試過程與設備條件（如屏幕分辨率，操做系統）決定。
  
• 內存TOP列表：總內存最大值(max_totoal)排序TOP5機型。
  
• 內存數據詳情：total，graphic，native，private-other的最大值與均值在各設備測試中的詳細數據。
  

4.2 內存指標數據

在「場景概覽」或者「測試設備列表」中選擇一臺設備，點擊「查看詳情」或者「詳細報告」，便可進入該設備下的雲測試結果。

在詳細報告中有多個指標，內存分析可關注內存指標曲線，以下圖：

由於Android和iOS系統緣由，內存指標曲線上在上述兩個系統中得到的具體指標有所差別。
支持操做：

• 鼠標放置在曲線上某一點會浮窗顯示該點的詳細信息。
• 點擊「指標曲線說明」，可顯示/隱藏某一指標曲線。
  
• 按下鼠標左鍵，自左向右拖動，可縮放窗口以查看指定區域信息。
• 在曲線上鼠標點擊某一點，可查看該時刻內存中的詳細資源文件列表和統計圖。
  
  
• 點擊「對比」，可在內存指標曲線上選擇兩個時刻，對比兩個時刻的內存資源文件的差別，差別文件以佔用內存大小排序。
  
• 點擊「取消對比「可取消對比。