Способы улучшения JS-кода?

Question

[Extramezz]

Читая вот эту статью: habrahabr.ru/post/235943 наткнулся на

Шаблон начинаем с модуля !function($) { … }($), который помещает глобальную переменную jQuery в локальную область – это поможет снизить нагрузку и предотвратить конфликты с другими библиотеками.

Интересует вот что:

• Зачем перед функцией знак "!" ? Для красоты?
  
• Обращение к локальным переменным действительно производит меньше нагрузки? И стоит ли помещать document, window и т.п в замыкание по этой же причине или дело касается только функций?
  
• Какие еще есть способы подобного улучшения кода? В плане нагрузки, скорости?
  

Answer 1

[Максим Дунаевский]

Знаки !, -, + заставляют интерпретатор вычислить (в данном случае - выполнить) то, что находится справа. Например, в Bootstrap всюду вставлен знак + для этого.
Однако, более правильным было бы переписать код так:

(function ($){
    "use strict";
    
}(this.jQuery));

Это тоже шаблон самовызываемой функции, описан в книге Стояна Стефанова "JavaScript. Шаблоны" (люто рекомендую читать не смотря на преклонный для литературы данного типа возраст, где взять - сами знаете).

Обращение к локальным переменным избавляет от головной боли и долгой отладки, когда непонятно, почему при клике на эту кнопку не только обновляется список записей таблицы, но и увеличивается размер шрифта в заголовке страницы. Глобальные переменные - зло, и с этим нужно бороться. Только замыкания, только хардкор.

Что касается скорости - в сравнении с перерисовкой DOM любой ваш код будет быстрым, как молния. И да, обращение к глобальным переменным дороже, чем к локальным, т.к. сначала делается поиск в локальной области видимости, и только потом - к глобальной.

document и window можете помещать, можете не помещать - разница будет только в том, что можно использовать краткие имена:

(function (W, D){ 
    // W = window   (1 символ против 6)
    // D = document (1 символ против 8)
    "use strict";

}(window, document));

Всё остальное в указанной книге ну и конечно Николас Закас, "JavaScript. Оптимизация производит....

Comments

[Extramezz]

А вот скажите, использование use strict тоже сильно снижает нагрузку? Или это сказки?

[Максим Дунаевский]

Extramezz: use strict всего лишь говорит считать ошибками разные вещи, которые в старом JS были вполне нормальными, например, использовать переменные до их объявления и подобные

Answer 2

[lega]

Зачем перед функцией знак "!" ? Для красоты?

Это "говорит" компилятору что начинается выражение, т.е. его нужно выполнить.

Обращение к локальным переменным действительно производит меньше нагрузки?

Да, локальные переменные быстрее замкнутых переменных, а глобальные ещё медленнее.

И стоит ли помещать document, window и т.п в замыкание по этой же причине

Нет, лучше поменьше к ним обращаться.

Какие еще есть способы подобного улучшения кода? В плане нагрузки, скорости?

Много и под разные движки:
* Не используйте глобальные переменные (для внутреннего кода)
* Делайте маленькие ф-ии - они лучше оптимизируются, (но сам вызов большого кол-ва ф-ий замедляет код и иногда "инлайн" код лучше).
* Не используйте try-catch (везде попало) - они отключают оптимизацию
* Не передавайте arguments по ссылке - отключается оптимизация
* Не меняйте тип переменной, например если храните число, то не меняйте на строку - лучше сделать новую переменную
* Уменьшайте кол-во неявных преобразований (+ используйте "use strict")
* Если у вас много однотипных объектов, то делайте их через "класс" (и в дальнейшем не расширяйте атрибутами)
* Используйте массивы как массивы, а не как хеш-объекты (не используйте for in), храните в них однотипные объекты
* Где нужная бо'льшая скорость можете попробовать asm.js
* Подмена "scope" через call/apply замедляет вызов (в сравнении с прямым вызовом ф-ии)
* Не используйте with/eval
...
* Пробегитесь по уже написанным статьям в интернете по оптимизации.
* Сравнивайте конкурирующие куски кода по скорости самостоятельно, например на jsperf, и делитесь результатами с сообществом.

Answer 3

[Aves]

Максим Дунаевский со скобками не более правильный, а чуть более читаемый.
Если уж о правильности говорить, то в отношении void void function(i) {console.log(i)}(10);
Переменные в замыканиях в плане отладки даже хуже глобальных переменных, а локальные действительно быстрее и тех и других.
Сейчас уже стоит ориентироваться не на приёмы пятилетней давности времён ES3, а на современные инструменты типа browserify/webpack с bebel и отлаживать в браузере красивый ES2015/ES2016 с помощью sourcemaps.

Answer 4

[Макс]

Это function expression, потому что вызывать сразу можно только их
Вот такое вызовет ошибку - Syntax error

function () {
  
}();

Comments

[Алексей Уколов]

Это вы на какой вопрос автора отвечали?

[Макс]

Алексей Уколов: "Зачем перед функцией знак "!" ? Для красоты?"
на этот

[Алексей Уколов]

Ну это я к тому, что из вашего ответа это вообще неясно - просто какая-то реплика непонятно к чему. Сравните с ответом, который дал Максим Дунаевский. Посмотрел ваши ответы - они все такие же односложные. Возможно, если бы вы отвечали подробно и развернуто, процент принятых решений у вас был бы значительно выше.