HTML5 drawImage: Chrome в девять раз медленнее, чем Mozilla

Question

Почему код на Chrome в девять раз медленнее, чем на Mozilla? Могу ли я увеличить скорость Chrome? На моем компьютере Chrome выполняет 9 302 операций / с, а Mozilla - 86 715 операций / с, а на моем ноутбуке разница составляет 20 раз. Браузер Edge также работает быстрее, чем chrome в пять раз. Тестовая ссылка 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

Проверьте настройки

Я не могу продублировать 20-кратное замедление между Chrome и FF на различных настольных компьютерах и ноутбуках, средняя разница составляет Chrome, около 20-30% пропускной способности FF. Но через год go (примерно) они были ровными. Вы мало что можете сделать, когда большинство людей используют Chrome.

. Предложите убедиться, что у вас нет проблем с chrome, а с помощью графического процессора перейдите к

• chrome://gpu в нем будут перечислены все проблемы с графическим процессором
• chrome://flags проверьте, что у вас "Ускоренное 2D холст" включено

WebGL для производительности

Если вы хотите добиться хорошей производительности на всех устройствах и в браузерах, вам следует рассмотреть WebGL, поскольку он делает 2D API улиткой похожим на сравнение.

Рендеринг bottle шея

Обратите внимание, что переключение с одного рендера назначение другому может обложить налогом некоторое оборудование, и я бы не рекомендовал делать это как часть любого конвейера рендеринга, построенного на 2D API.

Если вам нужно выполнить рендеринг на вторичный холст, сделайте все в одном go, затем передайте этот контент на другой холст.

Например, testA в ~ 10 раз медленнее, чем testB на Firefox и Chrome. Обе функции перемещают одинаковое количество пикселей.

   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 - операций в секунду. Операция - это один вызов функции тестирования}

Answer 2

Невозможно увеличить скорость работы любого браузера.

Скорость рендеринга зависит от нескольких факторов, таких как вычислительная мощность вашего P C (память, процессор и т. Д. c.), Скорость вашего inte rnet и, наконец, ядро ​​браузера. .

При выполнении тестов убедитесь, что среда находится в том же сценарии.