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

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

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

由于實(shí)際運(yùn)行環(huán)境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會(huì)達(dá)到，所以這部分不是開發(fā)者能夠決定的，開發(fā)者能作的是盡可能通過優(yōu)化，在低端設(shè)備或低性能瀏覽器中，提升FPS幀速。

LayaAir引擎在每幀都會(huì)重繪，在性能優(yōu)化時(shí)，除了關(guān)注每幀執(zhí)行邏輯代碼帶來(lái)的CPU消耗，還需要注意每幀調(diào)用繪圖指令的數(shù)量以及GPU的紋理提交次數(shù)。

(二)：基準(zhǔn)測(cè)試

LayaAir引擎內(nèi)置的性能統(tǒng)計(jì)工具可用于基準(zhǔn)測(cè)試，實(shí)時(shí)檢測(cè)當(dāng)前性能。開發(fā)者可以使用laya.utils.Stat類，通過Stat.show() 顯示統(tǒng)計(jì)面板。

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

（三）：內(nèi)存優(yōu)化

對(duì)象池，涉及到不斷重復(fù)使用對(duì)象。在初始化應(yīng)用程序期間創(chuàng)建一定數(shù)量的對(duì)象并將其存儲(chǔ)在一個(gè)池中。對(duì)一個(gè)對(duì)象完成操作后，將該對(duì)象放回到池中，在需要新對(duì)象時(shí)可以對(duì)其進(jìn)行檢索。

由于實(shí)例化對(duì)象成本很高，使用對(duì)象池重用對(duì)象可減少實(shí)例化對(duì)象的需求。還可以減少垃圾**器運(yùn)行的機(jī)會(huì)，從而提高程序的運(yùn)行速度。

資源卸載

游戲運(yùn)行時(shí)總會(huì)加載許多資源，這些資源在使用完成后應(yīng)及時(shí)卸載，否則一直殘留在內(nèi)存中。

     關(guān)于濾鏡、遮罩

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

（四）：圖形渲染性能

優(yōu)化Sprite

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

2.非可見區(qū)域的對(duì)象盡量從顯示列表移除或者設(shè)置visible=false。

3.對(duì)于容器內(nèi)有大量靜態(tài)內(nèi)容或者不經(jīng)常變化的內(nèi)容(比如按鈕)，可以對(duì)整個(gè)容器設(shè)置cacheAs屬性，能大量減少Sprite的數(shù)量，顯著提高性能。如果有動(dòng)態(tài)內(nèi)容，最好和靜態(tài)內(nèi)容分開，以便只緩存靜態(tài)內(nèi)容。

4.Panel內(nèi)，會(huì)針對(duì)panel區(qū)域外的直接子對(duì)象(子對(duì)象的子對(duì)象判斷不了)進(jìn)行不渲染處理，超出panel區(qū)域的子對(duì)象是不產(chǎn)生消耗的。

　優(yōu)化DrawCall

1.對(duì)復(fù)雜靜態(tài)內(nèi)容設(shè)置cacheAs，能大量減少DrawCall，使用好cacheAs是游戲優(yōu)化的關(guān)鍵。

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

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

優(yōu)化Canvas

在對(duì)Canvas優(yōu)化時(shí)，我們需要注意，在以下場(chǎng)合不要使用cacheAs：

1.對(duì)象非常簡(jiǎn)單，比如一個(gè)字或者一個(gè)圖片，設(shè)置cacheAs=bitmap不但不提高性能，反而會(huì)損失性能。

2.容器內(nèi)有經(jīng)常變化的內(nèi)容，比如容器內(nèi)有一個(gè)動(dòng)畫或者倒計(jì)時(shí)，如果再對(duì)這個(gè)容器設(shè)置cacheAs=bitmap，會(huì)損失性能。

可以通過查看Canvas統(tǒng)計(jì)信息的第一個(gè)值，判斷是否一直在刷新Canvas緩存。

關(guān)于cacheAs

設(shè)置cacheAs可將顯示對(duì)象緩存為靜態(tài)圖像，當(dāng)cacheAs時(shí)，子對(duì)象發(fā)生變化，會(huì)自動(dòng)重新緩存，同時(shí)也可以手動(dòng)調(diào)用reCache方法更新緩存。 建議把不經(jīng)常變化的復(fù)雜內(nèi)容，緩存為靜態(tài)圖像，能極大提高渲染性能，cacheAs有”none”，”normal”和”bitmap”三個(gè)值可選。

1.默認(rèn)為”none”，不做任何緩存。

2.當(dāng)值為”normal”時(shí)，canvas下進(jìn)行畫布緩存，webgl模式下進(jìn)行命令緩存。

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

設(shè)置cacheAs后，還可以設(shè)置staticCache=true以阻止自動(dòng)更新緩存，同時(shí)可以手動(dòng)調(diào)用reCache方法更新緩存。

cacheAs主要通過兩方面提升性能。一是減少節(jié)點(diǎn)遍歷和頂點(diǎn)計(jì)算;二是減少drawCall。善用cacheAs將是引擎優(yōu)化性能的利器。

（五）：減少CPU使用量

減少動(dòng)態(tài)屬性查找

JavaScript中任何對(duì)象都是動(dòng)態(tài)的，你可以任意地添加屬性。然而，在大量的屬性里查找某屬性可能很耗時(shí)。如果需要頻繁使用某個(gè)屬性值，可以使用局部變量來(lái)保存它：

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

使用callLater

callLater使代碼塊延遲至本幀渲染前執(zhí)行。如果當(dāng)前的操作頻繁改變某對(duì)象的狀態(tài)，此時(shí)可以考慮使用callLater，以減少重復(fù)計(jì)算。

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

在游戲的資源加載中，可以將資源按照關(guān)卡、場(chǎng)景等分類加載。在同一時(shí)間處理的圖片越少，當(dāng)時(shí)的游戲響應(yīng)速度也會(huì)更快。在資源使用完成后，也可以予以卸載，釋放內(nèi)存。

（六）：其他優(yōu)化策略

1.減少粒子使用數(shù)量，在移動(dòng)平臺(tái)Canvas模式下，盡量不用粒子;

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

3.不要在timeloop里面創(chuàng)建對(duì)象及復(fù)雜計(jì)算;

4.盡量減少對(duì)容器的autoSize的使用，減少getBounds()的使用，因?yàn)檫@些調(diào)用會(huì)產(chǎn)生較多計(jì)算;

5.盡量少用try catch的使用，被try catch的函數(shù)執(zhí)行會(huì)變得非常慢