Ответ 1
Я считаю, на мой взгляд, что это сводится к тому, как "компилируемый" (кэшируемый) код. Как известно, Chrome и Firefox используют два разных компилятора JavaScript/engine, которые оптимизируют и кэшируют код по-разному.
Операции холста
Использование преобразования по сравнению с прямыми координатами не должно иметь никакого влияния, поскольку установка преобразования просто обновляет матрицу, которая в любом случае используется с тем, что в ней есть.
Тип значений позиции может влиять на производительность, но значения float versus integer, но поскольку как ваша скрипка, так и PIXI, похоже, используют поплавки, это не является ключом здесь.
Итак, здесь я не думаю, что причиной разницы является холст.
Кэширование переменных и свойств
(Я был непреднамеренно слишком сфокусирован на прототипном аспекте в первой версии этого ответа. Суть, на которую я пыталась попасть, была в основном перемещением объекта, поэтому здесь следующий текст немного переформулирован -)
PIXI использует свойства объекта в качестве скрипта, но эти пользовательские объекты в PIXI меньше по размеру, поэтому перемещение дерева объектов занимает меньше времени по сравнению с тем, что требуется для перемещения большего объекта, такого как холст или изображение (свойство, такое как width также будет в конце этого объекта).
Это известная классическая оптимизация для кэширования переменных из-за этой причины (время траверса). Эффект сегодня меньше, поскольку двигатели стали более умными, особенно V8 в Chrome, которые, похоже, могут предсказать/кэшировать это лучше внутри, в то время как в Firefox, похоже, все еще есть какое-то влияние, чтобы не кэшировать эти переменные в коде.
Имеет ли значение производительность? Для коротких операций очень мало, но при этом 16,500 кроликов на холст требуют и получают выгоду от этого (в FF), поэтому любая микро-оптимизация действительно учитывается в таких ситуациях.
Demos
Я прототипировал "средство визуализации", чтобы приблизиться к PIXI, а также к кешированию свойств объекта. Это дало пакет производительности в Firefox:
http://jsfiddle.net/AbdiasSoftware/2Dbys/8/
Я использовал медленный компьютер (чтобы увеличить удар), который запускал вашу скрипку примерно на 5 FPS. После кэширования значений он работал со скоростью 6-7 кадров в секунду, что на 20% больше, чем на этом компьютере, показывая, что это имеет эффект. На компьютере с большим кэшем команд процессора и т.д. Эффект может быть меньше, но он там, поскольку это связано с самим механизмом FF (отказ от ответственности: я не утверждаю, что это научный тест, но только указатель: )).
/// cache object properties
var lastTime = 0,
w = canvas.width,
h = canvas.height,
iw = image.width,
ih = image.height;
Эта следующая версия кэширует эти переменные как свойства объекта (самого себя), чтобы показать, что это также повышает производительность по сравнению с использованием больших глобальных объектов напрямую - результат примерно такой же, как и выше:
http://jsfiddle.net/AbdiasSoftware/2Dbys/9/
var RENDER = function () {
this.width = canvas.width;
this.height = canvas.height;
this.imageWidth = image.width;
this.imageHeight = image.height;
}
В заключение
Я уверен, что на основании результатов и предыдущего опыта PIXI может быстрее запускать код из-за использования пользовательских объектов небольшого размера, а не для получения свойств непосредственно из больших объектов (элементов), таких как холст и изображение.
Механизм FF кажется еще не таким "умным", как двигатель V8 в отношении перемещения объекта по дереву и ветвям, поэтому переменные кэширования оказывают влияние на FF, который появляется, когда отображается высокий спрос (например, когда рисунок 16 500 кроликов на "рамку" ).
