如何将 HTML5 性能发挥到极致

　　有时并不需要让游戏以60FPS的速率执行，因为30FPS已经能够满足多数情况下人类视觉的响应，但是鼠标交互时，30FPS可能会造成画面的不连贯，于是Stage.FRAME_MOUSE应运而生。

　　下例展示以Stage.FRAME_SLOW的帧率，在画布上移动鼠标，使圆球跟随鼠标移动：

Laya.init(Browser.width, Browser.height);
Stat.show();
Laya.stage.frameRate = Stage.FRAME_SLOW;

var sp = new Sprite();
sp.graphics.drawCircle(0, 0, 20, "#990000");
Laya.stage.addChild(sp);

Laya.stage.on(Event.MOUSE_MOVE, this, function()
{
	sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
});

　　此时FPS显示30，并且在鼠标移动时，可以感觉到圆球位置的更新不连贯。设置Stage.frameRate为Stage.FRAME_MOUSE：

Laya.stage.frameRate = Stage.FRAME_MOUSE;

　　此时在鼠标移动后FPS会显示60，并且画面流畅度提升。在鼠标静止2秒不动后，FPS又会恢复到30帧。

　　使用callLater

　　callLater使代码块延迟至本帧渲染前执行。如果当前的操作频繁改变某对象的状态，此时可以考虑使用callLater，以减少重复计算。

　　考虑一个图形，对它设置任何改变外观的属性都将导致图形重绘：

var rotation = 0,
	scale = 1,
	position = 0;

function setRotation(value)
{
	this.rotation = value;
	update();
}

function setScale(value)
{
	this.scale = value;
	update();
}

function setPosition(value)
{
	this.position = value;
	update();
}

function update()
{
	console.log('rotation: ' + this.rotation + '\tscale: ' + this.scale + '\tposition: ' + position);
}

　　调用以下代码更改状态：

setRotation(90); setScale(2); setPosition(30);

　　setRotation(90); setScale(2); setPosition(30);

　　控制台的打印结果是

　　rotation: 90 scale: 1 position: 0

　　rotation: 90 scale: 2 position: 0

　　rotation: 90 scale: 2 position: 30

　　update被调用了三次，并且最后的结果是正确的，但是前面两次调用都是不需要的。