如何将 HTML5 性能发挥到极致

　　3.当值为”bitmap”时，canvas下进行依然是画布缓存，webGL模式下使用renderTarget缓存。这里需要注意的是，webGL下renderTarget缓存模式有2048大小限制，超出2048会额外增加内存开销。另外，不断重绘时开销也比较大，但是会减少drawcall，渲染性能最高。 webGL下命令缓存模式只会减少节点遍历及命令组织，不会减少drawcall，性能中等。

　　设置cacheAs后，还可以设置staticCache=true以阻止自动更新缓存，同时可以手动调用reCache方法更新缓存。

　　cacheAs主要通过两方面提升性能。一是减少节点遍历和顶点计算;二是减少drawCall。善用cacheAs将是引擎优化性能的利器。

　　下例绘制10000个文本：

Laya.init(550, 400, Laya.WebGL);
Laya.Stat.show();

var textBox = new Laya.Sprite();

var text;
for (var i = 0; i < 10000; i++)
{
    text = new Laya.Text();
    text.text = (Math.random() * 100).toFixed(0);
    text.color = "#CCCCCC";

    text.x = Math.random() * 550;
    text.y = Math.random() * 400;

    textBox.addChild(text);
}

Laya.stage.addChild(textBox);

　　下面是笔者电脑上的运行时截图，FPS稳定于52上下。

　　当我们对文字所在的容器设置为cacheAs之后，如下面的例子所示，性能获得较大的提升，FPS达到到了60帧。

// …省略其他代码… var textBox = new Laya.Sprite();
textBox.cacheAs = "bitmap"; // …省略其他代码…

　　文字描边

　　在运行时，设置了描边的文本比没有描边的文本多调用一次绘图指令。此时，文本对CPU的使用量和文本的数量成正比。因此，尽量使用替代方案来完成同样的需求。

　　对于几乎不变动的文本内容，可以使用cacheAs降低性能消耗，参见“图形渲染性能 – 关于cacheAs”。

　　对于内容经常变动，但是使用的字符数量较少的文本域，可以选择使用位图字体。

　　跳过文本排版，直接渲染