我发现这个代码在画布上绘制。在Firefox中,它运行良好,但在最新的Chrome中性能不足。如果鼠标移动速度非常快,则绘制的线条会在Chrome中移动光标。为什么呢?
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);
答案 0 :(得分:0)
每个浏览器执行javascript的速度都不同,所以它可以在firefox中为你运行得更好。它还取决于您自己的PC性能。
with
语句也会降低执行速度。
这是因为with()将一组额外的变量附加到上述范围链的开头。这个额外的项目意味着无论何时调用任何变量,Javascript引擎必须遍历with()变量,然后是局部变量,然后是全局变量。
因此,with()基本上为局部变量提供全局变量的所有性能缺陷,并反过来破坏Javascript优化。
为什么不使用with
解释来自here