HTML5绘制图像：Chrome比Mozilla慢九倍

Question

HTML5绘制图像：Chrome比Mozilla慢九倍

3

为什么在Chrome上的代码比在Mozilla上慢9倍？我能否提高Chrome的速度？在我的电脑上，Chrome的性能为9,302次/秒，而Mozilla则是86,715次/秒，在我的笔记本电脑上差异达到20倍。Edge浏览器也比Chrome快5倍。测试链接https://jsbench.me/nuk5skh6qi/1。

<canvas id="src" width="100" height="100"></canvas>
<canvas id="mask" width="100" height="100"></canvas>
<canvas id="dest" width="100" height="100"></canvas>

var src = document.getElementById('src');
var srcCtx = src.getContext('2d');

var mask = document.getElementById('mask');
var maskCtx = mask.getContext('2d');

var dest = document.getElementById('dest');
var destCtx = dest.getContext('2d');

function test(sz) {
   srcCtx.drawImage(mask, 0, 0, sz, sz, 0, 0, sz, sz);
   destCtx.drawImage(src, 0, 0, sz, sz, 0, 0, sz, sz);
}

- Sonia Kidman

2个回答

-1

无法提高任何浏览器的速度。

渲染速度取决于多个因素，例如您的计算机处理能力（内存、CPU等）、互联网速度以及浏览器核心。

在进行测试时，请确保环境处于相同的情况下。

- Trevisan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blindman67 · Accepted Answer

检查设置

我无法在各种台式机和笔记本电脑上复制Chrome和FF之间20倍的减速，平均差异是Chrome的吞吐量约为FF的20-30%。但是大约一年前它们甚至是相同的。当大多数人使用Chrome时，你不能做太多事情。

建议您确保Chrome和GPU没有任何问题，然后转到

chrome://gpu它将列出GPU的任何问题
chrome://flags检查是否启用了"加速的2D画布"

WebGL提高性能

如果您想在各种设备和浏览器中获得良好的性能，则需要考虑WebGL，因为它使2D API变得像蜗牛一样。

渲染瓶颈

请注意，从一个渲染目标切换到另一个渲染目标可能会对某些硬件造成负担，我也不建议将其作为基于2D API构建的任何渲染流程的一部分。

如果您需要渲染到第二个画布，请一次性完成所有操作，然后将该内容呈现到另一个画布上。

例如，在Firefox和Chrome上，testA比testB慢大约10倍。这两个函数都移动相同数量的像素。

   function testA(sz = 100) {
       var count = 100;
       while (count--) {
           srcCtx.drawImage(mask, 0, 0, sz, sz, 0, 0, sz, sz);
           destCtx.drawImage(src, 0, 0, sz, sz, 0, 0, sz, sz);
       }
   }

   function testB(sz = 100) {
       var count = 100;
       while (count--) {
           srcCtx.drawImage(mask, 0, 0, sz, sz, 0, 0, sz, sz);
       }
       count = 100;
       while (count--) {
           destCtx.drawImage(src, 0, 0, sz, sz, 0, 0, sz, sz);
       }
   }

以上功能的性能结果

Chrome版本79.0.3945.130

testA.: 21,386.106 ±802.033µs OPS    46  10% Total 22,242ms 1,040 operations
testB.:  2,120.172 ±50.374µs  OPS   471 100% Total  2,035ms   960 operations

Firefox 73.0b9

testA.:  6,611.111 ±47.258µs  OPS   151  14% Total 19,635ms 2,970 operations
testB.:    907.921 ±31.091µs  OPS 1,101 100% Total  2,751ms 3,030 operations

^{OPS是每秒操作次数。一个操作是对测试函数的一次调用。}