Javascript 为什么对fillRect（）的多次调用比对fillRect（）的一次调用慢？

为什么会这样:

var rows = 80
var cols = 120
var tw = 5

for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
        context.fillRect(j*tw, i*tw, tw, tw)
    }
}

---

当它们填充相同数量的像素时？我天真地认为，

fillRec（）

只是填充了一堆像素，但显然它在做其他事情。它还能做什么？

在扫描线算法中，有很多代码可以优化像素的渲染。应用当前变换，然后进行剪裁，然后进行边缘排序，这必须在写入像素之前进行。随着像素数的增加，它们的效率最高

要提高速度并使GPU渲染像素，请渲染第一个矩形，然后通过drawImage调用进行复制，如下所示

var rows = 80;
var cols = 120;
var tw = 5;
ctx.fillRect(0, 0, tw, tw);
for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
        if(i+j !== 0){
            ctx.drawImage(ctx.canvas,0,0,tw,tw,j*tw, i*tw, tw, tw);
        }
    }
}

var行=80；
var-cols=120；
var-tw=5；
ctx.fillRect（0，0，tw，tw）；
对于（变量i=0；i

将比所有fillRect调用都快

---

虽然改进不会与单个渲染调用相比，但绘制位图使用硬件渲染像素，而fillRect更依赖于软件渲染（全部或部分我不确定所使用的方法）

对于每个调用，将有大量输入变量类型转换、参数验证、，调用他们正在使用的任何图形引擎等，这将很快超过实际的像素绘制。此外，像素绘图可能具有在一条指令中绘制4或8个像素的优化，这在一次绘制像素时是无法利用的。如果（i+j==0）做什么？@NickFegley阻止代码在第一个矩形上绘制。。哦，我的错应该是==

var rows = 80;
var cols = 120;
var tw = 5;
ctx.fillRect(0, 0, tw, tw);
for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
        if(i+j !== 0){
            ctx.drawImage(ctx.canvas,0,0,tw,tw,j*tw, i*tw, tw, tw);
        }
    }
}