Проблемы с производительностью Javascript

Question

Я создаю игровой движок с использованием холста HTML5, и я решил написать некоторые «обертки» для изображений, потому что это дает мне общий интерфейс для различных типов анимации, изображений и т. Д. Я имею в виду что каждый объект просто имеет .picture свойство, которое обеспечивает такие вещи, как draw() метода, .phi значение для вращения, в .alpha и т.д. что прохладно об этом подходе ко мне в том, что, по сути, это .picture свойства может быть что угодно:

• Изображение (обертка Picture фактически).
• Анимация (обертка для многих изображений с некоторыми функциями, такими как next() и getImage()).
• Композиция (много изображений и анимации, которые рисуются поверх друг друга или что-то другое, что есть метод рисования.)
• Состояние (по аналогии с составом)

Для удобствами, все эти обертки (изображение, анимация, композиция, состояние) переводят и вращают контекст (вы не можете успешно поворачивать контекст холста HTML5, не переведя его сначала в точку вращения). Теперь это много переводов! Первый выпуск: переводит контекст для каждого вызова ничьей дорого?

Другая проблема заключается в том, что этот дизайн подразумевает множество вызовов функций!

Вот как этот процесс идет:

• Отображатель итерацию через сцену, а затем слои сцены
• Когда он попадает в растяжимой (ob.picture != undefined), он называет это .picture «s сделать функцию (каждый видимый объект наследует от «класса» под названием Drawable, что класс на самом деле имеет место и свойство изображения)

Вот что происходит в лучшем случае:

• .picture Свойства вытяжкя является объектом Picture (обертка для изображений)
• .picture переводит контекст этого положения
• .picture вращает контекст
• В .picture звонках context.drawImage(.picture.image, etc);

Это то, что происходит в наихудшем сценарии:

• Свойство изображения представляет собой композицию или государственный объект
• Композиции начинает перебор это элементы, каждый из которых является другим изображение или анимации (или, еще хуже, другой состав/State)
• призывает свои методы отрисовки
• Они оказывают реальное изображение/перебирать их элементы, и это повторяется

Как вы видите, есть много функций вызовов отрисовки. Будет ли это серьезной проблемой скорости или вызовет функции недорого?

EDIT: Этот вопрос немного изменился. «Игра» стала «двигателем», а структура двигателя немного изменилась. Но нет ничего существенного или иного.

Answer 1

Не уверен насчет контекстного перевода, но я полагаю, что переводы не бесплатны.

Для вызовов функций это зависит от количества объектов, которые вы рисуете. Вызов функции имеет ненулевую длину выполнения. Это очень мало.

Я создал настоящий тупой и простой пример ниже измерения времени работы кучу вложенных функций: http://jsfiddle.net/luketmillar/D5sHE/

Когда речь идет о графике каждую миллисекунду отсчетов. Если вы можете избежать дополнительных вызовов функций, возможно, также.