javascript – 2D图形框架如Pixi.js如何使画布绘制更快？

.

现在当然,我明白他们的默认渲染器正在使用webGL,但是我现在只对原生的2D上下文性能感兴趣.我在firefox上禁用了webGL,并在产生16500个兔子后,该计数器显示FPS为25.我决定编写自己的一些非常简单的渲染循环,看看Pixi添加了多少开销.令我惊讶的是,我只有20分FPS.

我大致相当于 JSFiddle .

所以我决定看看他们的源 here ,它似乎并不是在它们的渲染代码中的魔力：

do  
{
    transform = displayObject.worldTransform;
            ...
    if(displayObject instanceof PIXI.Sprite)
    {

        var frame = displayObject.texture.frame;

        if(frame)
        {
            context.globalAlpha = displayObject.worldAlpha;

            context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);

            context.drawImage(displayObject.texture.baseTexture.source, 
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               (displayObject.anchor.x) * -frame.width, 
                               (displayObject.anchor.y) * -frame.height,
                               frame.width,
                               frame.height);
        }                      
    }

好奇的是,它似乎在使用一个链接列表的渲染循环和一个配置文件在两个应用程序显示,虽然我的版本分配相同量的cpu时间每帧,他们的实现显示cpu在尖峰的使用.

我的知识不幸在这里结束,我很好奇,如果有人可以看出发生了什么.

我认为,在我看来,它归结为如何“可编译”(可缓存)代码. Chrome和Firefox使用两种不同的JavaScript“编译器”/引擎,我们知道哪种优化和缓存代码有所不同.

画布操作

使用变换与直接坐标不应该有影响,因为设置变换只是更新矩阵,在任何情况下都与其一起使用.

位置值的类型可能会影响性能,而float与整数值,但由于您的小提琴和PIXI似乎都使用浮点数,这不是关键.

所以在这里我不认为画布是造成差异的原因.

变量和属性缓存

(我非常专注于这个答案的第一个版本的原型方面,我试图得到的本质主要是对象遍历,所以这里下面的文字被重写一下 – )

PIXI使用对象属性作为小提琴,但PIXI中的这些自定义对象的大小较小,因此与遍历较大对象(如画布或图像)所需的时间相比较,对象树的遍历所需的时间更短(像在这个对象的最后).

由于这个原因(遍历时间),这是一个众所周知的经典优化技巧来缓存变量.由于引擎变得更加智能,特别是Chrome中的V8似乎能够在内部更好地预测/缓存这种效果,而在Firefox中似乎仍然有一些影响,不会将这些变量缓存在代码中.

绩效明智吗？对于短期操作而言,将16,500只兔子绘制到画布上是非常重要的,并且要做到这一点(在FF中)可以获得好处,所以任何微优化都可以算在这样的情况下.

演示

我使用了一个缓慢的计算机(来扩大影响力),以约5 FPS的速度运行你的小提琴.缓存值后,它以6-7 fps的速度运行,这台电脑的增加幅度超过了20％,显示它确实有效果.在具有较大CPU指令缓存等的计算机上,效果可能会较小,但是它与FF引擎本身有关(免责声明：我不是声称这是科学测试,而只是一个指针： )).

/// cache object properties
var lastTime = 0,
    w = canvas.width,
    h = canvas.height,
    iw = image.width,
    ih = image.height;

var RENDER = function () {
    this.width = canvas.width;
    this.height = canvas.height;
    this.imageWidth = image.width;
    this.imageHeight = image.height;
}

结论是

基于结果和以前的经验,我可以肯定PIXI可以通过使用自定义的小尺寸对象而不是直接从大型对象(元素)(如画布和图像)获取属性来更快地运行代码.

FF引擎在对象遍历树和分支方面似乎还没有像V8引擎一样“聪明”,所以缓存变量在需求很高的时候会在FF中显示出来(例如当绘制16,500个兔子时)每“框”).