3

我发现这段代码可以在画布上绘制。在 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);
4

1 回答 1

0

每个浏览器执行javascript的速度是不同的，所以它可以在firefox中为你运行得更好。这也取决于您自己的 PC 性能。

该with语句还会减慢执行速度。

这是因为 with() 将一组额外的变量附加到上述作用域链的开头。这个额外的项目意味着无论何时调用任何变量，Javascript 引擎都必须循环遍历 with() 变量，然后是局部变量，然后是全局变量。

因此 with() 本质上为局部变量提供了全局变量的所有性能缺点，进而破坏了 Javascript 优化。

这为什么不用with解释来自这里

于 2013-07-14T13:16:43.147 回答