如何将 HTML5 性能发挥到极致

澳门新葡亰娱乐在线 3

HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下,对性能的需求显得更为重要,而HTML5性能优化前与优化后有着极大的差别,如何优化才能提高性能,对此熟知的人很少。本文以LayaAir引擎为例,通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。

性能优化的原则

1.避免过早优化:太早优化将使代码难以设计和维护,最好是针对程序的瓶颈进行优化。

澳门新葡亰娱乐在线,2.改进性能有时需要权衡:不能一味注重改进性能,一个项目要考虑各方面的利弊,比如代码的健壮性,结构性,扩展性,可读性,执行效率等等。

 

主题包括:

把耗费CPU的计算分成小而独立的段

 

参见:

Flash平台是一个单线程的平台,它不支持多线程。它运行在一个循环中,以划分的“帧”为单位进行处理。帧的执行又可划分为2个阶段:

(1)ActionScript 代码的执行

(2)显示对象(DisplayObject)的呈现

如果代码执行的时间过长,超出了给定的timeout时限,那么Flash
Player会被锁定或者停止执行代码,如:

[Fault] exception, information=Error: Error #1502:
脚本的执行时间已经超过了 15 秒的默认超时设置。

这时,我们需要将代码分为小而独立的段来进行执行。如下例

var allowedTime = 1000/fps - renderTime - otherScriptsTime;
var startTime = 0;
var savedIndex = 0;
function enterFrame() {
    startTime = getTimer();

    var i, n = array.length;
    for (i=savedIndex; i<n; i++){

        if (getTimer() - startTime > allowedTime){
            savedIndex = i;
            return;
        }

        process(array[i]);
    }

    complete();
}

 

  • 代码执行基本原理
  • 基准测试
  • 内存优化
  • 图形渲染性能
  • 减少CPU使用量
  • 其他优化策略

使用适当的对象

 不同的对象占用的内存不同,而且不同的对象,适用的情况也不同,这时,应尽量选用占内存最小的适当对象类型。

1.选用适当的基本对象:比如int和Number,分别消耗4个和8 个字节. int
类表示的值的范围是:-2,147,483,648 (-2^31) 到 2,147,483,647
(2^31-1),所以如果你的取值范围在这个范围内,最好用int而不是用Number。

 

2.选用适当的显示对象:对于非交互式简单形状,请使用 Shape
对象。对于不需要时间轴的交互式对象,请使用 Sprite
对象。对于使用时间轴的动画,请使用 MovieClip
对象。更多具体情况,参见使用合适的显示子类。

 

3.选择合适的文本对象:对于只读文本,最好使用 Flash
文本引擎,它占用较少的内存并提供更好的呈现效果。对于输入文本,最好使用
TextField 对象,因为在创建典型行为(例如,输入处理和自动换行)时需要的
ActionScript 代码较少。

 

4.尽可能使用 Vector 类而不是 Array 类:Vector 类的读写访问速度比
Array
类快。但是Vector内只能存放同一类型的数据,所以我们要根据需求来使用Vector或是Array。在使用Vector时,注意要为矢量分配特定长
度并将其长度设为固定值,因为如果不提前指定矢量的大小,则矢量大小将在矢量用完空间后增加。每次矢量大小增加时,都将分配一个新的内存块。矢量的当前内
容会复制到新内存块中。这种额外的分配和复制数据会降低性能。尽可能尝试使用
Vector 对象 API,因为它们的运行速度可能更快。

 

5.尽可能使用 String
类方法(如indexOf()、substr()或substring())代替正则表达式来实现基本字符串查找和提取:
在使用正则表达式时如果需要对元素进行分组,但不需要在结果中隔离该组的内容,请使用非捕获组(“(?:xxxx)”)代替正则表达式中的(“(xxxx)”)组。

 

第1节:代码执行基本原理

LayaAir引擎支持AS3、TypeScript、JavaScript三种语言开发,然而无论是采用哪种开发语言,最终执行的都是JavaScript代码。所有看到的画面都是通过引擎绘制出来的,更新频率取决于开发者指定的FPS,例如指定帧频率为60FPS,则运行时每个帧的执行时间为六十分之一秒,所以帧速越高,视觉上感觉越流畅,60帧是满帧。

由于实际运行环境是在浏览器中,因此性能还取决于JavaScript解释器的效率,指定的FPS帧速在低性能解释器中可能不会达到,所以这部分不是开发者能够决定的,开发者能作的是尽可能通过优化,在低端设备或低性能浏览器中,提升FPS帧速。

LayaAir引擎在每帧都会重绘,在性能优化时,除了关注每帧执行逻辑代码带来的CPU消耗,还需要注意每帧调用绘图指令的数量以及GPU的纹理提交次数。

重用对象

尽可能重复使用对象并避免重新创建对象,
因为实例化对象成本很高。而且因为内存分配有时会触发垃圾回收,所以重用对象还可以减少垃圾回收器运行的机会,从而提高应用程序运行速度。

1.避免在一个循环中创建对象,尽力将对象创建在循环外部并在循环内反复重用它。如下例,我们就重用了BitmapData对象:

// Create a single 20 x 20 pixel bitmap, non-transparent 
var myImage:BitmapData = new BitmapData(20,20,false,0xF0D062); 
var myContainer:Bitmap; 
const MAX_NUM:int = 300; 

for (var i:int = 0; i< MAX_NUM; i++) 
{ 
    // Create a container referencing the BitmapData instance 
    myContainer = new Bitmap(myImage); 

    // Add it to the display list 
    addChild(myContainer); 

    // Place each container 
    myContainer.x = (myContainer.width + 8) * Math.round(i % 20); 
    myContainer.y = (myContainer.height + 8) * int(i / 20); 
}

 

2.使用对象池,在初始化应用程序期间创建一定数量的对象并将其存储在一个池中,在需要时取用,用完放回池中。

 

第2节:基准测试

LayaAir引擎内置的性能统计工具可用于基准测试,实时检测当前性能。开发者可以使用laya.utils.Stat类,通过Stat.show()
显示统计面板。具体编写代码如下例所示:

Stat.show(0,0); //AS3的面板调用写法       
Laya.Stat.show(0,0); //TS与JS的面板调用写法

Canvas渲染的统计信息:

澳门新葡亰娱乐在线 1

WebGL渲染的统计信息:

澳门新葡亰娱乐在线 2

统计参数的意义:

FPS:

每秒呈现的帧数(数字越高越好)。
使用canvas渲染时,描述字段显示为FPS(Canvas),使用WebGL渲染时,描述字段显示为FPS(WebGL)。

Sprite:

渲染节点数量(数字越低越好)。
Sprite统计所有渲染节点(包括容器),这个数字的大小会影响引擎节点遍历,数据组织和渲染的次数。

DrawCall:

DrawCall在canvas和WebGL渲染下代表不同的意义(越少越好)。
Canvas下表示每帧的绘制次数,包括图片、文字、矢量图。尽量限制在100之下。
WebGL下表示渲染提交批次,每次准备数据并通知GPU渲染绘制的过程称为1次DrawCall,在每1次DrawCall中除了在通知GPU的渲染上比较耗时之外,切换材质与shader也是非常耗时的操作。
DrawCall的次数是决定性能的重要指标,尽量限制在100之下。

Canvas:

三个数值 —— 每帧重绘的画布数量 / 缓存类型为“normal”类型的画布数量 /
缓存类型为“bitmap”类型的画布数量”。
CurMem:仅限WebGL渲染,表示内存与显存占用(越低越好)。
Shader:仅限WebGL渲染,表示每帧Shader提交次数。

无论是Canvas模式还是WebGL模式,我们都需要重点关注DrawCall,Sprite,Canvas这三个参数,然后针对性地进行优化。(参见“图形渲染性能”)

释放内存

在 Flash Player
的发行版中无法直接启动垃圾回收器,而是被系统自动启动。想要释放一个对象,需要通过删除对象引用的方式进行。Flashplayer
debug版本提供了System.gc()接口,我们可以在程序的创作阶段利用这个函数来检验程序中的对象引用有没有被正确解除。

要正确的释放对象,需要注意如下几点:

1.必须删除对象所有的引用。

2.对象内部成员必须不存在对外部对象的引用。即删除所有内部成员的引用。

3.必须删除EnterFrame,Timer等事件监听器。对于Timer还必须先stop。

4.对于BitmapData,还需要先用dispose()方法删除内存中的像素。

5.对于加载的SWF等,需要先用loader.unloadAndStop()卸载。

6.播放完声音或一个 SoundChannel
实例被用于对声音执行 stop() 时,就已经已准备好对该声音进行垃圾回收。

 

关于弱引用


种引用不会被垃圾收集器作为判定object是否被回收的依据。它的作用是:如果当一个对象仅仅剩下弱引用时,这个对象将会被垃圾收集器在下一轮回收。但
是弱引用只支持两种类型:第一种是经常会因为内存管理机制带来麻烦的事件监听器,建议每当添加监听器时,都将其第五个参数选项,即弱引用设置为true。
下面是其对应的参数设置的例子:

    someObj.addEventListener("eventName",listenerFunction,useCapture,priority,weakReference);
    stage.addEventListener(Event.CLICK,handleClick,false,0,true);
    // the reference back to handleClick (and this object) will be weak. 

另一个弱引用支持的是Dictionary
object。一般情况下在初始化时设置其第一个参数为true,下面是例子:

    var dict:Dictionary = new Dictionary(true);
    dict[myObj] = myOtherObj;
    // the reference to myObj is weak, the reference to myOtherObj is strong 

 

注意:如果系统认为可用内存不是足够低,垃圾回收器可能不会运行。垃圾回收的执行时间不可预知。内存分配(而不是对象删除)会触发垃圾回收。

关于垃圾回收的详细讲解,可以参看Flash AS3
垃圾回收机制详解。

 

第3节:内存优化

对象池

对象池,涉及到不断重复使用对象。在初始化应用程序期间创建一定数量的对象并将其存储在一个池中。对一个对象完成操作后,将该对象放回到池中,在需要新对象时可以对其进行检索。
由于实例化对象成本很高,使用对象池重用对象可减少实例化对象的需求。还可以减少垃圾回收器运行的机会,从而提高程序的运行速度。

以下代码演示使用

Laya.utils.Pool:

ar SPRITE_SIGN = 'spriteSign';
var sprites = [];
function initialize()
{
    for (var i = 0; i < 1000; i++)
    {
        var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite)
        sprites.push(sp);
        Laya.stage.addChild(sp);
    }
}
initialize();

在initialize中创建大小为1000的对象池。

以下代码在当单击鼠标时,将删除显示列表中的所有显示对象,并在以后的其他任务中重复使用这些对象:

Laya.stage.on("click", this, function()
{
    var sp;
    for(var i = 0, len = sprites.length; i < len; i++)
    {
        sp = sprites.pop();
        Pool.recover(SPRITE_SIGN, sp);
        Laya.stage.removeChild(sp);
    }
});

调用Pool.recover后,指定的对象会被回收至池内。

使用Handler.create

在开发过程中,会经常使用Handler来完成异步回调。Handler.create使用了内置对象池管理,因此在使用Handler对象时应使用Handler.create来创建回调处理器。以下代码使用Handler.create创建加载的回调处理器:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded));

在上面的代码中,回调被执行后Handler将会被对象池收回。此时,考虑如下代码会发生什么事:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading));

在上面的代码中,使用Handler.create返回的处理器处理progress事件。此时的回调执行一次之后就被对象池回收,于是progress事件只触发了一次,此时需要将四个名为once的参数设置为false:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading, null, false));

释放内存

JavaScript运行时无法启动垃圾回收器。要确保一个对象能够被回收,请删除对该对象的所有引用。Sprite提供的destory会帮助设置内部引用为null。

例如,以下代码确保对象能够被作为垃圾回收:

var sp = new Sprite();
sp.destroy();

当对象设置为null,不会立即将其从内存中删除。只有系统认为内存足够低时,垃圾回收器才会运行。内存分配(而不是对象删除)会触发垃圾回收。

垃圾回收期间可能占用大量CPU并影响性能。通过重用对象,尝试限制使用垃圾回收。此外,尽可能将引用设置为null,以便垃圾回收器用较少时间来查找对象。有时(比如两个对象相互引用),无法同时设置两个引用为null,垃圾回收器将扫描无法被访问到的对象,并将其清除,这会比引用计数更消耗性能。

资源卸载

游戏运行时总会加载许多资源,这些资源在使用完成后应及时卸载,否则一直残留在内存中。

下例演示加载资源后对比资源卸载前和卸载后的资源状态:

var assets = [];
assets.push("res/apes/monkey0.png");
assets.push("res/apes/monkey1.png");
assets.push("res/apes/monkey2.png");
assets.push("res/apes/monkey3.png");

Laya.loader.load(assets, Handler.create(this, onAssetsLoaded));

function onAssetsLoaded()
{
    for(var i = 0, len = assets.length; i < len; ++i)
    {
        var asset = assets[i];
        console.log(Laya.loader.getRes(asset));
        Laya.loader.clearRes(asset);
        console.log(Laya.loader.getRes(asset));
    }
}

关于滤镜、遮罩

尝试尽量减少使用滤镜效果。将滤镜(BlurFilter和GlowFilter)应用于显示对象时,运行时将在内存中创建两张位图。其中每个位图的大小与显示对象相同。将第一个位图创建为显示对象的栅格化版本,然后用于生成应用滤镜的另一个位图:

澳门新葡亰娱乐在线 3

应用滤镜时内存中的两个位图

当修改滤镜的某个属性或者显示对象时,内存中的两个位图都将更新以创建生成的位图,这两个位图可能会占用大量内存。此外,此过程涉及CPU计算,动态更新时将会降低性能(参见“图形渲染性能
– 关于cacheAs)。

ColorFiter在Canvas渲染下需要计算每个像素点,而在WebGL下的GPU消耗可以忽略不计。

最佳的做法是,尽可能使用图像创作工具创建的位图来模拟滤镜。避免在运行时中创建动态位图,可以帮助减少CPU或GPU负载。特别是一张应用了滤镜并且不会在修改的图像。

预处理资源和数据

对于一些处理起来较为麻烦的资源和数据,可以进行预处理,以节约CPU资源。

1.避免使用滤镜,包括经过 Pixel Bender 处理的滤镜。
可能使用通过创作工具(例如 Adobe®
Photoshop®)创建的位图来模拟滤镜。避免在 ActionScript
中使用运行时创建的动态位图。使用外部创作的位图可帮助运行时减少 CPU 或
GPU
负载,特别是当滤镜属性不随时间更改时。如果可能,在创作工具中创建位图所需的任何效果。然后,可以在运行时中显示该位图,而无需对它进行任何处理,这样
速度要快得多。

 

2.mip 映射:尽量少用 mip
映射。尽管它可以改进缩小位图的品质,但它对带宽、内存和速度都有影响。在某些情况下,最好选择使用通过外部工具预缩放的位图版本,并将其导入到您的应用程序中。如果只需缩小位图,不要一开始就使用较大位图。

 

3.避免复杂矢量图:使用矢量(而不是位图)是节省内存的好方法。然而,使用矢量(特别是大量矢量),会显著增加对
CPU 或 GPU
资源的需求。使用位图是优化呈现的一个好方法,因为运行时在屏幕上绘制像素比呈现矢量内容需要的处理资源要少。如果矢量图过于复杂,最好是预处理成位图。

 

4.使用常量来代替反复重新计算相同的值

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图