如何優化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

爲什麼你編寫一個存在於本機代碼中的函數？很顯然，你無法在速度方面與它競爭。