在Firefox上運行HTML5 Canvas的速度比在Chrome上更快！ 為什么？

Question

我發現此代碼可以在畫布上繪制。 在Firefox中，它可以正常工作，但在最新的Chrome中，性能卻不足。 如果鼠標移動得非常快，則Chrome中光標后的繪制線就會出現。 為什么？

js小提琴畫布

  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    canvas.addEventListener('mousedown', function(e) {
        this.down = true;   
        this.X = e.pageX ;
        this.Y = e.pageY ;
        this.color = rgb();
    }, 0);
    canvas.addEventListener('mouseup', function() {
        this.down = false;          
    }, 0);
    canvas.addEventListener('mousemove', function(e) {

        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = "rgb(0,0,0)";
                ctx.lineWidth=3;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);

Answer 1

在每個瀏覽器中執行javascript的速度都不同，因此可以在firefox中為您更好地運行。 它還取決於您自己的PC性能。

with語句還會減慢執行速度。

這是因為with（）將額外的變量集附加到上述作用域鏈的開頭。 這個額外的項意味着，無論何時調用任何變量，Javascript引擎都必須遍歷with（）變量，然后是局部變量，然后是全局變量。

因此，with（）本質上給局部變量帶來了全局變量的所有性能缺陷，進而破壞了Javascript優化。

這個為什么不with說明一起使用來自這里