如何优化JS画布？

Question

我的impl的fillRect比context2d.fillRect慢了很多（> 3倍）。我如何优化我的代码或为什么builtin fillRect更快（某些应用程序加速？）？

我IMPL：

__fillRect : function (data, x, y)//, r, g, b) 
    { 
    var w = this.__width * 4; 
    var idx = x * 4+ y * w; 
    var idx_1 = idx + 4; 
    var idx_2 = idx + 8; 
    var idx_3 = idx + w; 
    var idx_4 = idx_3 + 4; 
    var idx_5 = idx_3 + 8; 
    var idx_6 = idx_3 + w; 
    var idx_7 = idx_6 + 4; 
    var idx_8 = idx_6 + 8; 

    function __setPixelIdx (idx) 
    { 
     data[idx + 0] = 200; 
     data[idx + 1] = 0; 
     data[idx + 2] = 0; 
     data[idx + 3] = 255; 
    } 

    __setPixelIdx (idx); 
    __setPixelIdx (idx_1); 
    __setPixelIdx (idx_2); 
    __setPixelIdx (idx_3); 
    __setPixelIdx (idx_4); 
    __setPixelIdx (idx_5); 
    __setPixelIdx (idx_6); 
    __setPixelIdx (idx_7); 
    __setPixelIdx (idx_8); 

    }, 

Answer 1

你的实现是有几个原因的要慢

• 你正在写一个数组，然后复制和转换是到画布帧缓存。
• context2d.fillRect正在运行本机代码，未解释或JIT编译的JavaScript。
• context2d可以潜在地使用图形硬件来绘制
• 你是在一次写一个字节，而即使不加速的机库可以写整个INT32像素值

我的建议是使用本地fillRect方法，除非你有一个非常好的理由不太（例如做你自己的阴影或掩蔽）。你不会接近图书馆功能的速度。

调用__setPixelIdx而不是做data访问主__fillRect函数可能没有多大帮助。

Answer 2

为什么你编写一个存在于本机代码中的函数？很显然，你无法在速度方面与它竞争。