HTML5作为一个新兴领域越来越受欢迎。但在移动设备硬件性能弱于PC的大背景下，性能需求显得更为重要。但是，优化前后HTML5的性能存在巨大差异。很少有人知道如何优化以提高性能。本文以LayaAir引擎为例，通过代码示例详细讲解如何使用该引擎优化HTML5的性能。主题包括：代码执行基础基准测试内存优化图形渲染性能降低CPU使用率其他优化策略第1节：代码执行基础LayaAir引擎支持AS3、TypeScript和JavaScript开发，但无论使用哪种开发语言，最终的结果执行是JavaScript代码。你看到的所有图片都是引擎绘制的，更新频率取决于开发者指定的FPS。比如指定帧频为60FPS，运行时每一帧的执行时间为六十分之一秒，所以帧频越高，视觉上感觉越流畅，60帧就是一个完整的帧。由于实际运行环境是在浏览器中，所以性能也取决于JavaScript解释器的效率。指定的FPS帧率在低性能的解释器中可能达不到，所以这部分不由开发者决定。我们所做的是尽可能通过优化来提高低端设备或低性能浏览器中的FPS帧率。LayaAir引擎会重绘每一帧。在优化性能时，除了关注每帧执行逻辑代码带来的CPU消耗外，还需要关注每帧调用的绘图指令数和提交给GPU的纹理数。Section2:BenchmarkingLayaAir引擎内置的性能统计工具可用于benchmarking实时检测当前性能。开发人员可以使用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进行渲染的过程称为DrawCall。在每次DrawCall中，除了通知GPU进行渲染外，切换材质和着色器也非常耗时。耗时的操作。DrawCall的数量是决定性能的重要指标，尽量限制在100以下。Canvas：三个值——每帧重绘的画布数量/缓存类型为“普通”类型的画布数量/数量缓存类型为“位图”类型的canvas。CurMem：仅WebGL渲染，表示内存和显存占用（越低越好）。Shader：仅WebGL渲染，表示每帧Shader提交数。是否为Canvas模式或WebGL模式，我们需要重点关注DrawCall、Sprite、Canvas这三个参数，然后有针对性地对其进行优化。（详见《图形渲染性能》）第三节：内存优化对象池对象池涉及常量对象的重用。在应用程序初始化期间创建一定数量的对象并将其存储在池中。对一个对象完成操作后，该对象将放回池中，当有新对象时可以检索该对象needed.由于实例化对象是昂贵的，使用对象池来重用对象减少了实例化对象的需要。也减少了垃圾收集器需要运行的机会，从而提高程序的运行速度。以下代码演示了Laya.utils.Pool的使用：arSPRITE_SIGN='spriteSign';varsprites=[];functioninitialize(){for(vari=0;i<1000;i++){varsp=Pool.getItemByClass(SPRITE_SIGN,Sprite)sprites.push(sp);Laya.stage.addChild(sp);}}初始化（）;在initialize中创建一个大小为1000的对象池。下面的代码会在鼠标点击时删除显示列表中的所有显示对象，并在以后的其他任务中复用这些对象：Laya.stage.on("click",this,function(){varsp;for(vari=0,len=sprites.length;i
