HTML5 Canvas 在 Firefox 上比在 Chrome 上更快！为啥？

Posted 2023-02-22

【中文标题】HTML5 Canvas 在 Firefox 上比在 Chrome 上更快！为啥？

【英文标题】：HTML5 Canvas faster on Firefox than on Chrome! Why?HTML5 Canvas 在 Firefox 上比在 Chrome 上更快！为什么？

【发布时间】：2013-07-12 09:44:58

【问题描述】：

我发现这段代码可以在画布上绘制。在 Firefox 中它运行良好，但在最新的 Chrome 中性能不足。如果鼠标移动得非常快，则在 Chrome 中光标后面的画线。为什么？

js fiddle canvas

  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);

【问题讨论】：

我似乎没有和你一样的问题。也许你的电脑的强度与它有关？

但是如果我的电脑速度很慢，为什么它可以在 Firefox 中运行？

在最新的 Chrome 上运行良好。

一个插件或类似的东西可能会减慢速度。例如，fps 仪表对性能的影响非常糟糕（似乎会产生相当多的垃圾并且需要太多时间进行绘图）。

我停用了所有插件，但仍然无法使用

【参考方案1】：

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

with 语句也会减慢执行速度。

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

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

这个为什么不用with的解释来自here

【讨论】：

感谢您的建议，但它不会改变性能。我想为 chrome 开发，我该怎么办？这个在两者中都可以正常工作：sumo paint

@Dennis 对不起，我的意思是在我更正了示例代码之后，性能仍然很差

相扑颜料是用 Flash 编码的，这种东西通常更快。

总之 html5 落后于 flash？ Chrome 比 FireFox 还差？

我不会做出这样的结论。我只想说他们都有优点和缺点。