如何将 HTML5 性能发挥到极致

时间:2017-05-04

  大多数情况下,很多文本都不需要复杂的排版,仅仅简单地显示一行字。为了迎合这一需求,Text提供的名为changeText的方法可以直接跳过排版。

var text = new Text();
text.text = "text";
Laya.stage.addChild(text);
//后面只是更新文字内容,使用changeText能提高性能
text.changeText("text changed.");

  Text.changeText会直接修改绘图指令中该文本绘制的最后一条指令,这种前面的绘图指令依旧存在的行为会导致changeText只使用于以下情况:

  文本始终只有一行。

  文本的样式始终不变(颜色、粗细、斜体、对齐等等)。

  即使如此,实际编程中依旧会经常使用到这样的需要。


  第5节:减少CPU使用量

  减少动态属性查找

  JavaScript中任何对象都是动态的,你可以任意地添加属性。然而,在大量的属性里查找某属性可能很耗时。如果需要频繁使用某个属性值,可以使用局部变量来保存它:

function foo()
{
    var prop = target.prop;
    // 使用prop
    process1(prop);
    process2(prop);
    process3(prop);
}

  计时器

  LayaAir提供两种计时器循环来执行代码块。

    1.   Laya.timer.frameLoop执行频率依赖于帧频率,可通过Stat.FPS查看当前帧频。
    2.   Laya.timer.loop执行频率依赖于参数指定时间。

  当一个对象的生命周期结束时,记得清除其内部的Timer:

Laya.timer.frameLoop(1this, animateFrameRateBased);
Laya.stage.on("click"this, dispose);
function dispose({
    Laya.timer.clear(this, animateFrameRateBased);
}

  获取显示对象边界的做法

  在相对布局中,很经常需要正确地获取显示对象的边界。获取显示对象的边界也有多种做法,而其间差异很有必要知道。

  • 共9页:
  • 上一页
  • 6/9
  • 下一页
  • 上一篇:HTML5 VideoAPI,打造自己的Web视频播放器 下一篇:解决html5中video标签无法播放mp4问题的办法

    相关文章

    最新文章