HTML5作為新興領域越來越熱。然而在移動設備硬件性能弱于PC的背景下，對性能的需求顯得更為重要，而HTML5性能優化前與優化后有著極大的差別，如何優化才能提高性能，對此熟知的人很少。本文以LayaAir引擎為例，通過代碼示例詳細闡述如何利用引擎對HTML5作出性能的極致優化。

　　主題包括：

• 　　代碼執行基本原理
• 　　基準測試
• 　　內存優化
• 　　圖形渲染性能
• 　　減少CPU使用量
• 　　其他優化策略

　　第1節：代碼執行基本原理

　　LayaAir引擎支持AS3、TypeScript、JavaScript三種語言開發，然而無論是采用哪種開發語言，最終執行的都是JavaScript代碼。所有看到的畫面都是通過引擎繪制出來的，更新頻率取決于開發者指定的FPS，例如指定幀頻率為60FPS，則運行時每個幀的執行時間為六十分之一秒，所以幀速越高，視覺上感覺越流暢，60幀是滿幀。

　　由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通過優化，在低端設備或低性能瀏覽器中，提升FPS幀速。

　　LayaAir引擎在每幀都會重繪，在性能優化時，除了關注每幀執行邏輯代碼帶來的CPU消耗，還需要注意每幀調用繪圖指令的數量以及GPU的紋理提交次數。

　　第2節：基準測試

　　LayaAir引擎內置的性能統計工具可用于基準測試，實時檢測當前性能。開發者可以使用laya.utils.Stat類，通過Stat.show() 顯示統計面板。具體編寫代碼如下例所示：

Stat.show(0,0); //AS3的面板調用寫法       
Laya.Stat.show(0,0); //TS與JS的面板調用寫法

　　Canvas渲染的統計信息：

　　WebGL渲染的統計信息：

　　統計參數的意義：

　　FPS：

　　每秒呈現的幀數(數字越高越好)。

　　使用canvas渲染時，描述字段顯示為FPS(Canvas)，使用WebGL渲染時，描述字段顯示為FPS(WebGL)。

　　Sprite：

　　渲染節點數量(數字越低越好)。

　　Sprite統計所有渲染節點(包括容器)，這個數字的大小會影響引擎節點遍歷，數據組織和渲染的次數。

　　DrawCall：

　　DrawCall在canvas和WebGL渲染下代表不同的意義(越少越好)。

　　Canvas下表示每幀的繪制次數，包括圖片、文字、矢量圖。盡量限制在100之下。

　　WebGL下表示渲染提交批次，每次準備數據并通知GPU渲染繪制的過程稱為1次DrawCall，在每1次DrawCall中除了在通知GPU的渲染上比較耗時之外，切換材質與shader也是非常耗時的操作。 DrawCall的次數是決定性能的重要指標，盡量限制在100之下。

　　Canvas：

　　三個數值 —— 每幀重繪的畫布數量 / 緩存類型為“normal”類型的畫布數量 / 緩存類型為“bitmap”類型的畫布數量”。

　　CurMem：僅限WebGL渲染，表示內存與顯存占用(越低越好)。

　　Shader：僅限WebGL渲染，表示每幀Shader提交次數。

　　無論是Canvas模式還是WebGL模式，我們都需要重點關注DrawCall，Sprite，Canvas這三個參數，然后針對性地進行優化。(參見“圖形渲染性能”)

　　第3節：內存優化

　　對象池