На сегодняшний день JavaScript – самый популярный язык программирования. Он используется для различных целей — создание веб-сайтов, серверов, игр, операционных систем, роботов и еще кучи всего.
Но давайте будем честны, даже с его сумасшедшей популярностью, он не обладает той скоростью, которой мог бы обладать. Да, ведется работа по его улучшению, но ведь нам приходится ждать. Здесь, мы имеем в виду, что JS мог работать медленнее на рабочем столе, но сделайте гибридное приложение и Вам придется прибегнуть к миллиону уловок, для того, чтобы им можно было нормально пользоваться. У нас уже был такой опыт.
У Firefox есть самый быстрый переводчик JavaScript, SpiderMonkey. Загляните на Are We Fast Yet для просмотра более детальной информации и сравнений.
Есть несколько вариантов сделать JavaScript быстрее, один из них asm.js. Asm.js – это ряд параметров JavaScript, сгенерированных Emscripten, которые составляют C/C++ код к JavaScript вместе с большим количеством оптимизаций. Скомпилированные коды выглядят ужасно, поэтому Вы не можете написать оптимизированный код сами, но он, действительно, работает быстро. Мы очень рекомендуем Вам просмотреть слайды Алона Закаи Big Web App? Compile It!
Ближе к делу: О подсказках
Таким образом, нам нужно написать более быстрый код JavaScript, и вот несколько маленьких подсказок, которые помогут Вам создать код быстрее и с более эффективной памятью. Мы не говорим только о DOM и веб-приложениях, мы говорим о JavaScript с включенным DOM.
Мы собираемся добавить тест jsperf для каждой подсказки и протестировать, использую Firefox 38 и Chrome 39.
№1 Не заставляйте нас повторяться
JavaScript работает динамично, но постарайтесь не пользоваться этой функцией, если Вам нужна скорость. Постарайтесь сохранять последовательность различных шрифтов. То же самое касается массивов: старайтесь не смешивать несколько типов в одном массиве, к тому же, это главным образом оптимизировано браузерами. Это одна из причин, почему C/C++ код, примененный к JavaScript, быстрый, статичные шрифты.
Правка: Тест технически был неверным, к сожалению. Мы провели другой тест для массивов смешанных шрифтов, который, на нас взгляд, стал лучшим подтверждением этому.
{
var x = '2';
var y = 5;
x = 2;
x + y;
}Бонус: Последовательность для того, чтобы пронумеровать преобразование
Скажем, Вы должны преобразовать последовательность в число, а parseInt & parseFloat лучшие способы сделать это? Давайте посмотрим.
// Different ways of parsing integer/float from strings
parseFloat("100")
+"100"
// integer only
parseInt("100", 10)
"100"|0
"100" >> 0
"100" << 0
//Only works for positive numbers
"100" >>> 0Firefox оптимизирует логические операторы, работая с кодом примерно на 99% быстрее, чем parseInt и + оператор. Но Chrome не демонстрирует особой любви к логическим операторам, лучший из них на ~62% медленнее, чем parseInt.
parseFloat быстрее + оператор на обоих браузерах (28% на Firefox, 39% на Chrome).
Таким образом, выбор зависит от того, пишете ли Вы приложение Node / Chrome или приложение Firefox. Мы Считаем, что для основной цели подойдет parseInt.
№2 Не нужно реструктурировать объекты
Реструктуризация – вещь недешевая, следуйте подсказкам, чтобы избежать этого.
Не используйте форму оператора delete.
Delete оператор – намного медленнее, чем назначение нулевого указателя к собственности. Назначение нулевого указателя на 99% быстрее на обоих браузерах, потому что это не изменяет структуру объекта, а delete изменяет.
Правка: кажется, подсказка может немного ввести в заблуждение. Вовсе не значит, что ты не должны использовать оператор delete, он имеет свое назначение. Он предотвращает утечку памяти в объект, но в случае, если Вам нужна скорость, то Вы можете воспользоваться этой подсказкой.
Не откладывайте добавление свойств на потом
Постарайтесь не добавлять свойства в конце, лучше всего определить схему Вашего объекта с начала. Это на 100% быстрее на Firefox и на 89% быстрее на Chrome.
dynamic properties vs pre-defined structure
№3 Объединяйте строки
Объединение строк достаточно дорогая операция, но каков лучший способ сделать это? Определенно не Array.prototype.join.
Оператор += кажется на много быстрее, чем +, String.prototype.concat и Array.prototype.join на обоих браузерах. Array.prototype.join, как и ожидалось, медленнее.
Правка: Спасибо Vyacheslav Egorov за то, что отметил ошибки и исправил их. Он протестировал эту подсказку и получил более реалистичные результаты, у него прекрасные, понятные пояснения.
№4 Используйте правильный RegExp метод
Нет смысла использовать RegExp.prototype.exec, если Вы хотите провести тест против чего-либо, не так ли?
Все же есть разница в результативности между RegExp.prototype.test и String.prototype.search, давайте посмотрим, какой из методов быстрее:
RegExp.prototype.exec намного быстрее, чем String.prototype.match, но именно поэтому они друг от друга и отличаются. Объяснение разницы между ними выходит за рамки этой статьи.
RegEx.prototype.test быстрее в поиске, вероятно потому, что он не возвращает индекс найденного совпадения. String.prototype.search должен быть использован только для поиска индекса желаемого совпадения.
Все же, Вы не должны использовать RegExps, чтобы найти индекс отдельной строки внутри другой строки. Для этого есть метод String.prototype.indexOf.
String.prototype.search vs String.prototype.indexOf
Другой интересный сравнительный тест String.prototype.indexOf vs RegExp.prototype.test. Мы ожидали, что последний будет быстрее, что и произошло в случае с Firefox, но не в Chrome. RegExp.prototype.test на 32% быстрее в Firefox, а то время, как String.prototype.indexOf на 33% быстрее в Chrome. В таком случае, выбирайте тот, что Вам больше нравится.
№5 Объявите и перейдите к локальным динамичным переменным
Когда Вы вызываете функцию (например), то браузер должен сделать нечто, называемое scope lookup (определение последовательного поиска), который в большей степени основан на том, как много определений он должен найти. Попытайтесь не полагаться на глобальные/высокие определенные переменные, вместо этого, сделайте локальные динамичные переменные и перейдите к их функциям. Меньше объемов для поиска, меньше скорости придется приносить в жертву.
Этот тест показывает нам, что переход переменных к функциям и их использование от локальной области быстрее, чем поиск высоких областей для поиска переменных, как в Chrome, так и в Firefox.
internal scope vs higher scope vs global
№6 Вам не нужен jQuery для всего на свете
Большинство разработчиков используют jQuery, чтобы делать наиболее простые задачи, но ведь не обязательно использовать его, просто потому что он включен в проект. Вы считаете, что использование $val() всегда необходимо? Посмотрите пример:
$('input').keyup(function() {
if($(this).val() === 'blah') { ... }
});Это одна из важнейших причин понять, как модифицировать DOM, используя ванильный JavaScript. Так Вы можете написать более эффективный код.
Написание того же самого условия в JavaScript на МНОГО быстрее. Доказано здесь JSPerf Test.
$('input').keyup(function() {
if(this.value === 'blah') { ... }
});Подсказка-бонус: Используйте Web Workers для сложных задач
Если у Вас есть тяжелые вычисления в Вашем приложении, скажем, некоторая обработка изображения, лучше использовать Web Workers, чтобы позволить браузеру управлять задачей во второстепенной нити и дать Вам результаты асинхронно вместо того, чтобы заставлять пользователей скучать и раздражаться.
Вы можете также использовать каналы сообщения, чтобы показать прогресс задачи, скажем, у Вас есть длинная цепь (повторяющаяся по пикселям, например), Вы можете послать сообщение, чтобы указать, сколько из цепи сделано в каждом 100 повторении, и сможете показать индикатор выполнения, таким образом, пользователь будет знать, что происходит.
Вот и все. Семь подсказок и одиннадцать сравнительных тестов, которые помогут написать JavaScript быстрее. Благодаря им Вы поймете, как работает JavaScript и сможете поднять свои навыки программирования на следующий уровень.
Нам было бы очень интересно узнать Ваше мнение об этих подсказках в комментариях.
