HTML5作為新興領(lǐng)域越來(lái)越熱。然而在移動(dòng)設(shè)備硬件性能弱于PC的背景下，對(duì)性能的需求顯得更為重要，而HTML5性能優(yōu)化前與優(yōu)化后有著極大的差別，如何優(yōu)化才能提高性能，對(duì)此熟知的人很少。本文以LayaAir引擎為例，通過(guò)代碼示例詳細(xì)闡述如何利用引擎對(duì)HTML5作出性能的極致優(yōu)化。
主題包括：
- 代碼執(zhí)行基本原理
- 基準(zhǔn)測(cè)試
- 內(nèi)存優(yōu)化
- 圖形渲染性能
- 減少CPU使用量
- 其他優(yōu)化策略
第1節(jié)：代碼執(zhí)行基本原理
LayaAir引擎支持AS3、TypeScript、JavaScript三種語(yǔ)言開(kāi)發(fā)，然而無(wú)論是采用哪種開(kāi)發(fā)語(yǔ)言，最終執(zhí)行的都是JavaScript代碼。所有看到的畫(huà)面都是通過(guò)引擎繪制出來(lái)的，更新頻率取決于開(kāi)發(fā)者指定的FPS，例如指定幀頻率為60FPS，則運(yùn)行時(shí)每個(gè)幀的執(zhí)行時(shí)間為六十分之一秒，所以幀速越高，視覺(jué)上感覺(jué)越流暢，60幀是滿幀。
由于實(shí)際運(yùn)行環(huán)境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會(huì)達(dá)到，所以這部分不是開(kāi)發(fā)者能夠決定的，開(kāi)發(fā)者能作的是盡可能通過(guò)優(yōu)化，在低端設(shè)備或低性能瀏覽器中，提升FPS幀速。
LayaAir引擎在每幀都會(huì)重繪，在性能優(yōu)化時(shí)，除了關(guān)注每幀執(zhí)行邏輯代碼帶來(lái)的CPU消耗，還需要注意每幀調(diào)用繪圖指令的數(shù)量以及GPU的紋理提交次數(shù)。
第2節(jié)：基準(zhǔn)測(cè)試
LayaAir引擎內(nèi)置的性能統(tǒng)計(jì)工具可用于基準(zhǔn)測(cè)試，實(shí)時(shí)檢測(cè)當(dāng)前性能。開(kāi)發(fā)者可以使用laya.utils.Stat類(lèi)，通過(guò)Stat.show() 顯示統(tǒng)計(jì)面板。具體編寫(xiě)代碼如下例所示：
Stat.show(0,0); //AS3的面板調(diào)用寫(xiě)法
Laya.Stat.show(0,0); //TS與JS的面板調(diào)用寫(xiě)法Canvas渲染的統(tǒng)計(jì)信息：
WebGL渲染的統(tǒng)計(jì)信息：
統(tǒng)計(jì)參數(shù)的意義：
FPS：
每秒呈現(xiàn)的幀數(shù)(數(shù)字越高越好)。
使用canvas渲染時(shí)，描述字段顯示為FPS(Canvas)，使用WebGL渲染時(shí)，描述字段顯示為FPS(WebGL)。
Sprite：
渲染節(jié)點(diǎn)數(shù)量(數(shù)字越低越好)。
Sprite統(tǒng)計(jì)所有渲染節(jié)點(diǎn)(包括容器)，這個(gè)數(shù)字的大小會(huì)影響引擎節(jié)點(diǎn)遍歷，數(shù)據(jù)組織和渲染的次數(shù)。
DrawCall：
DrawCall在canvas和WebGL渲染下代表不同的意義(越少越好)。
Canvas下表示每幀的繪制次數(shù)，包括圖片、文字、矢量圖。盡量限制在100之下。
WebGL下表示渲染提交批次，每次準(zhǔn)備數(shù)據(jù)并通知GPU渲染繪制的過(guò)程稱(chēng)為1次DrawCall，在每1次DrawCall中除了在通知GPU的渲染上比較耗時(shí)之外，切換材質(zhì)與shader也是非常耗時(shí)的操作。 DrawCall的次數(shù)是決定性能的重要指標(biāo)，盡量限制在100之下。
Canvas：
三個(gè)數(shù)值 —— 每幀重繪的畫(huà)布數(shù)量 / 緩存類(lèi)型為“normal”類(lèi)型的畫(huà)布數(shù)量 / 緩存類(lèi)型為“bitmap”類(lèi)型的畫(huà)布數(shù)量”。
CurMem：僅限WebGL渲染，表示內(nèi)存與顯存占用(越低越好)。
Shader：僅限WebGL渲染，表示每幀Shader提交次數(shù)。
無(wú)論是Canvas模式還是WebGL模式，我們都需要重點(diǎn)關(guān)注DrawCall，Sprite，Canvas這三個(gè)參數(shù)，然后針對(duì)性地進(jìn)行優(yōu)化。(參見(jiàn)“圖形渲染性能”)
第3節(jié)：內(nèi)存優(yōu)化
對(duì)象池