HTML5 drawImage：Chrome 比 Mozilla 慢 9 倍

Question

Why is the code on Chrome nine times slower than on Mozilla? Can I increase the speed of Chrome? On my computer, Chrome performs 9,302 ops/s, and Mozilla 86,715 ops/s, and on my laptop the difference is 20 times. The Edge browser is also faster than chrome five times. Test link 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);
}

Answer 1

Check settings

I can not duplicate a 20 times slowdown between Chrome and FF on various desktops and laptops, average difference is Chrome about 20-30% the throughput of FF. But then a year ago (about) they were even. Not much you can do when most people use Chrome.

Suggest that you make sure you don't have any problems with chrome and the GPU nav to

• chrome://gpu it will list any problems with the GPU
• chrome://flags check you have "Accelerated 2D canvas" enabled

WebGL for performance

If you want good performance across devices and browsers you need to consider WebGL as it makes the 2D API snail like in comparison.

Rendering bottle neck

Note that switching from one render destination to another can tax some hardware, nor would I recommend doing so as part of any rendering pipeline built on the 2D API.

If you need to render to a secondary canvas do it all in one go, then render that content to the other canvas.

For example testA is ~10 times slower than testB on Firefox and Chrome. Both functions move the same number of pixels.

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

Performance result for above functions

Chrome Version 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 is Operations per second. An Operation is one call to the test function}

Answer 2

It is not possible to increase the speed of any browser.

The rendering speed is due to several factors such as the processing power of your PC (memory, CPU, etc.), the speed of your internet and finally the browser core.

When performing the tests make sure that the environment is in the same scenario.