Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего
способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе развлечения кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.

Общие замечания

Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости «родного» кода. Между тем, даже простейшая игра — это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS — язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро  принесет разочарование. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.

1. Совместимость

Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами – под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят фигу серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций

<code><canvas id="gameArea">
  <span style="color:red">Your browser doesn't supported HTML5 Canvas</span></canvas>

<script type="text/javascript">
(function(){
if(typeof ({}.__defineGetter__) != "function" && typeof (Object.defineProperty) != "function")
  alert("Your browser doesn't supported latest JavaScript version");})()
</script></code>

Все бы хорошо, да вот беда – проблемы кроссбраузерной совместимости до конца не исчерпаны. Среди современных браузеров нет единого мнения насчет названий стандартных функций. Выход – либо вообще отказаться от их использования, либо делать дорогостоящие адаптеры. Например, я не смог отказать себе в использовании описателей свойств и это дало свои негативные последствия. О том, как их использовать кроссбраузерно, хорошо описано <a href="http://habrahabr.ru/post/117803/">здесь</a>, и <a href="http://habrahabr.ru/post/108295/">здесь</a>. А вот как их заставить работать быстро — осталось загадкой.

2. Оптимизацию кода легко сломать

Не так давно на Хабре проскакивала очень полезная статья про <a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя – это скрытые классы и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель – создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.

<code>function myObject() { };
var mo = new myObject();
mo.id = 12; //лучше так не делать//Аккуратнее надо быть и с переменными.var v;
v = 12; //плохо, лучше var v = 12;
v = “12”; //так не надо, для нового типа лучше использовать новую переменнуюvar v = 15; //я искренне верю, что так никто не поступает</code>

Так же нужно стремиться сокращать область видимости переменной до минимума – это увеличивает вероятность оптимизации кода.