Внимание! Данная серия статей сделана для сайта tululoo.ru и ее автором являюсь я. Без моего разрешения вы не имеете права на публикацию этих статей где-то еще.
Оптимизация Javascript: Статья первая. Факты.Недавно стал задумываться: на технологию HTML5 возлагают такие надежды, но ведь все зависит не только от технологии, но и от программиста. Ведь не только нужно сокращать и упрощать графическую часть, но и грамотно использовать управляющую, а именно, JavaScript.
Найдя в интернете сервис для тестирования скриптов и методов javascript,
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).
Всем удачи =)
