Game Maker - создание игр | HellRoom Games

Внимание! Данная серия статей сделана для сайта tululoo.ru и ее автором являюсь я. Без моего разрешения вы не имеете права на публикацию этих статей где-то еще.

Оптимизация Javascript: Статья первая. Факты.
Недавно стал задумываться: на технологию HTML5 возлагают такие надежды, но ведь все зависит не только от технологии, но и от программиста. Ведь не только нужно сокращать и упрощать графическую часть, но и грамотно использовать управляющую, а именно, JavaScript.

Найдя в интернете сервис для тестирования скриптов и методов javascript, http://jsperf.com (http://jsperf.com), я протестировал наиболее часто используемые в играх участки кода. Тестирование проводилось на двух совершенно разных компьютерах, в двух браузерах: Firefox и Chrome. Вот, что получилось(приготовьтесь к скупым фактам ;)):

Старый ноутбук(5 лет, Windows XP) - Браузер Firefox:
1) Действия с глобальными переменными комнаты гораздо быстрее, чем с переменными объекта.

2) Расположение различных видов сравнений и switch по убыванию скорости выполнения:
   I) if (t === 'b') { r='b'; } else if (t === 'e'){ k='b'; }
   II) if (t === 'b') { r='b'; }
   III) if (t == 'b') { r='b'; }
   IV) t === 'b' && (r = 'b');
   V) if (t == 'b') { r='b'; } else if (t == 'e'){ k='b'; }
   VI) switch(t){ case 'b':r='b';break; case 'e':k='b';break;}

3) Сравнение быстродействия операций ++x; , x=x+1; , x+=1; , x=1+x; и x++; показало, что они все примерно равны по быстроте выполнения.

4) Перебор массива с помощью for гораздо быстрее, чем с помощью while.

Старый ноутбук(5 лет, Windows XP) - Браузер Chrome:
1) Глобальные переменные комнаты гораздо быстрее, чем переменные объекта(т.е. их изменение, проверка и т.д.).

2) Расположение различных сравнений и switch по убыванию скорости выполнения:
   I) if (t == 'b') { r='b'; }
   II) if (t == 'b') { r='b'; } else if (t == 'e'){ k='b'; }
   III) if (t === 'b') { r='b'; } else if (t === 'e'){ k='b'; }
   IV) if (t === 'b') { r='b'; }
   V) t === 'b' && (r = 'b');
   VI) switch(t){ case 'b':r='b';break; case 'e':k='b';break;}

3) Сравнение быстродействия операций ++x; , x=x+1; , x+=1; , x=1+x; и x++; (убывание быстроты выполнения):
   I)++x;
   II)x=x+1;
   III)x+=1;
   IV)x=1+x;
   V)x++;

4) Перебор массива с помощью for гораздо быстрее, чем с помощью while)

Стационарный комьютер(Windows 7, довольно новый) - Браузер Firefox:
1) Переменные объекта на 97% (97 - это очень много, поверьте) медленнее, чем глобальные переменные.

2) Расположение различных сравнений и switch по убыванию скорости выполнения:
   I) if (type === 'boolean'){r = 'boolean';}
   II) if (type === 'boolean'){r = 'boolean';}else if(type === 'function'){r = 'function';} - на 0.06% медленнее.
   III) type === 'boolean' && (r = 'boolean'); - на 12% медленнее.
   IV) if (type == 'boolean'){r = 'boolean';}else if(type == 'function'){r = 'function';} - на 21% медленнее.
   V) if(type == 'boolean'){r = 'boolean';} - на 40% медленнее.
   VI) switch{case 'b':r='b';break; case 'e':k='b';break;} - на 91% медленнее.

3) При сравнении x++; , x+=1; , x=x+1; , ++x; и x=1+x; выяснилось, что все примерно равны, кроме
x=1+x, который на 33% отстает от соперников(непонятно, почему).

4) Перебор массива с помощью for всего на 9% быстрее, чем с помощью while.

Стационарный комьютер(Windows 7, довольно новый) - Браузер Chrome:
1) Локальные переменные объекта в Google Chrome уступают на 89% глобальным переменным комнаты.

2) Расположение различных сравнений и switch по убыванию скорости выполнения:
   I) if (type == 'boolean'){r = 'boolean';}else if (type == 'function'){r = 'function';}
   II) if (type === 'boolean'){r = 'boolean';}else if(type === 'function'){r = 'function';} - 1% медленнее
   III) type === 'boolean' && (r = 'boolean'); - 29% медленнее
   IV) if (type === 'boolean'){r = 'boolean';} - 32% медленнее
   V) if(type == 'boolean'){r = 'boolean';} - 40% медленнее
   VI) switch - 91% медленнее

3) Сравнение быстродействия операций ++x; , x=x+1; , x+=1; , x=1+x; и x++; в хроме ничего не дало... Тест в этом браузере все время показывает разный результат о_О

4) Перебор массива с помощью for или while: Особой разницы для хрома нет...


[h]Итоги:[/h]
Подведем итоги и составим советы по оптимизации javascript-кода:
1) Если есть возможность, заменяйте this.peremennaya на peremennaya.
2) Избегайте switch! Ставьте вместо него, что посчитаете нужным, но никогда не используйте switch!
3) Насчет извечных соревнований x+=1 и x=x+1 ничего точного сказать не могу(Лучше, просто не используйте выражения вида x=N+x;)
4) Перебирайте массивы с помощью for, вообще лучше использовать for вместо while, там, где это возможно.

А еще, решите для себя: для каких компьютеров(или телефонов) вы делаете игры. Определитесь с целями, все просчитайте. Да, не все имеют ПК с 2гб оперативной памяти и хорошим процессором. С другой стороны, мало кто установит на старый комп самую новую версию браузера и станет искать в интернете html5 игры(ну, кроме меня :D). Да и телефоны разные бывают.

Надеюсь, что моя статья чем-то вам помогла(или еще больше запутала :P).
Всем удачи =)