技术文章 | 如何将 HTML5 性能发挥到极致

本文来源于阿里云-云栖社区，原文点击这里。

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() 显示统计面板。具体编写代码如下例所示：

展开全文