Как оптимизировать рисование холста JS?

Question

Мое приложение fillRect много (> 3 раза) медленнее, чем context2d.fillRect. Как я могу оптимизировать свой код или почему buildin fillRect быстрее (некоторое ускорение приложения?)?

Мои осущ:

__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

Почему вы пишете функцию, которая существует в собственном коде? Очевидно, что вы не можете конкурировать с ним с точки зрения скорости.