HTML5作為新的開發語言，目前已經成為行業大熱中培偉業《HTML5開發最佳實踐應用》姚老師表示，在移動設備硬件性能弱于PC的背景下，對性能的需求顯得更為重要，而HTML5性能優化前與優化后有著極大的差別，如何優化才能提高性能，對此熟知的人很少。姚老師以LayaAir引擎為例，通過代碼示例詳細介紹了6種如何利用引擎對HTML5作出性能的極致優化的方法

(一)：代碼執行基本原理

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

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

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

(二)：基準測試

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

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

（三）：內存優化

對象池，涉及到不斷重復使用對象。在初始化應用程序期間創建一定數量的對象并將其存儲在一個池中。對一個對象完成操作后，將該對象放回到池中，在需要新對象時可以對其進行檢索。

由于實例化對象成本很高，使用對象池重用對象可減少實例化對象的需求。還可以減少垃圾**器運行的機會，從而提高程序的運行速度。

資源卸載

游戲運行時總會加載許多資源，這些資源在使用完成后應及時卸載，否則一直殘留在內存中。

     關于濾鏡、遮罩

嘗試盡量減少使用濾鏡效果。將濾鏡(BlurFilter和GlowFilter)應用于顯示對象時，運行時將在內存中創建兩張位圖。其中每個位圖的大小與顯示對象相同。將第一個位圖創建為顯示對象的柵格化版本，然后用于生成應用濾鏡的另一個位圖

（四）：圖形渲染性能

優化Sprite

1.盡量減少不必要的層次嵌套，減少Sprite數量。

2.非可見區域的對象盡量從顯示列表移除或者設置visible=false。

3.對于容器內有大量靜態內容或者不經常變化的內容(比如按鈕)，可以對整個容器設置cacheAs屬性，能大量減少Sprite的數量，顯著提高性能。如果有動態內容，最好和靜態內容分開，以便只緩存靜態內容。

4.Panel內，會針對panel區域外的直接子對象(子對象的子對象判斷不了)進行不渲染處理，超出panel區域的子對象是不產生消耗的。

　優化DrawCall

1.對復雜靜態內容設置cacheAs，能大量減少DrawCall，使用好cacheAs是游戲優化的關鍵。

2.盡量保證同圖集的圖片渲染順序是挨著的，如果不同圖集交叉渲染，會增加DrawCall數量。

3.盡量保證同一個面板中的所有資源用一個圖集，這樣能減少提交批次。

優化Canvas

在對Canvas優化時，我們需要注意，在以下場合不要使用cacheAs：

1.對象非常簡單，比如一個字或者一個圖片，設置cacheAs=bitmap不但不提高性能，反而會損失性能。

2.容器內有經常變化的內容，比如容器內有一個動畫或者倒計時，如果再對這個容器設置cacheAs=bitmap，會損失性能。

可以通過查看Canvas統計信息的第一個值，判斷是否一直在刷新Canvas緩存。

關于cacheAs

設置cacheAs可將顯示對象緩存為靜態圖像，當cacheAs時，子對象發生變化，會自動重新緩存，同時也可以手動調用reCache方法更新緩存。 建議把不經常變化的復雜內容，緩存為靜態圖像，能極大提高渲染性能，cacheAs有”none”，”normal”和”bitmap”三個值可選。

1.默認為”none”，不做任何緩存。

2.當值為”normal”時，canvas下進行畫布緩存，webgl模式下進行命令緩存。

3.當值為”bitmap”時，canvas下進行依然是畫布緩存，webGL模式下使用renderTarget緩存。這里需要注意的是，webGL下renderTarget緩存模式有2048大小限制，超出2048會額外增加內存開銷。另外，不斷重繪時開銷也比較大，但是會減少drawcall，渲染性能最高。 webGL下命令緩存模式只會減少節點遍歷及命令組織，不會減少drawcall，性能中等。

設置cacheAs后，還可以設置staticCache=true以阻止自動更新緩存，同時可以手動調用reCache方法更新緩存。

cacheAs主要通過兩方面提升性能。一是減少節點遍歷和頂點計算;二是減少drawCall。善用cacheAs將是引擎優化性能的利器。

（五）：減少CPU使用量

減少動態屬性查找

JavaScript中任何對象都是動態的，你可以任意地添加屬性。然而，在大量的屬性里查找某屬性可能很耗時。如果需要頻繁使用某個屬性值，可以使用局部變量來保存它：

在相對布局中，很經常需要正確地獲取顯示對象的邊界。獲取顯示對象的邊界也有多種做法，而其間差異很有必要知道。

使用callLater

callLater使代碼塊延遲至本幀渲染前執行。如果當前的操作頻繁改變某對象的狀態，此時可以考慮使用callLater，以減少重復計算。

在完成圖片/圖集的加載之后，引擎就會開始處理圖片資源。如果加載的是一張圖集，會處理每張子圖片。如果一次性處理大量的圖片，這個過程可能會造成長時間的卡頓。

在游戲的資源加載中，可以將資源按照關卡、場景等分類加載。在同一時間處理的圖片越少，當時的游戲響應速度也會更快。在資源使用完成后，也可以予以卸載，釋放內存。

（六）：其他優化策略

1.減少粒子使用數量，在移動平臺Canvas模式下，盡量不用粒子;

2.在Canvas模式下，盡量減少旋轉，縮放，alpha等屬性的使用，這些屬性會對性能產生消耗。(在WebGL模式可以使用);

3.不要在timeloop里面創建對象及復雜計算;

4.盡量減少對容器的autoSize的使用，減少getBounds()的使用，因為這些調用會產生較多計算;

5.盡量少用try catch的使用，被try catch的函數執行會變得非常慢