@Extramezz

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

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

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


Интересует вот что:
  • Зачем перед функцией знак "!" ? Для красоты?
  • Обращение к локальным переменным действительно производит меньше нагрузки? И стоит ли помещать document, window и т.п в замыкание по этой же причине или дело касается только функций?
  • Какие еще есть способы подобного улучшения кода? В плане нагрузки, скорости?
  • Вопрос задан
  • 371 просмотр
Решения вопроса 2
dunmaksim
@dunmaksim
Технический писатель
Знаки !, -, + заставляют интерпретатор вычислить (в данном случае - выполнить) то, что находится справа. Например, в 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. Оптимизация производит....
Ответ написан
@lega
Зачем перед функцией знак "!" ? Для красоты?

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

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

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

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

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

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

Много и под разные движки:
* Не используйте глобальные переменные (для внутреннего кода)
* Делайте маленькие ф-ии - они лучше оптимизируются, (но сам вызов большого кол-ва ф-ий замедляет код и иногда "инлайн" код лучше).
* Не используйте try-catch (везде попало) - они отключают оптимизацию
* Не передавайте arguments по ссылке - отключается оптимизация
* Не меняйте тип переменной, например если храните число, то не меняйте на строку - лучше сделать новую переменную
* Уменьшайте кол-во неявных преобразований (+ используйте "use strict")
* Если у вас много однотипных объектов, то делайте их через "класс" (и в дальнейшем не расширяйте атрибутами)
* Используйте массивы как массивы, а не как хеш-объекты (не используйте for in), храните в них однотипные объекты
* Где нужная бо'льшая скорость можете попробовать asm.js
* Подмена "scope" через call/apply замедляет вызов (в сравнении с прямым вызовом ф-ии)
* Не используйте with/eval
...
* Пробегитесь по уже написанным статьям в интернете по оптимизации.
* Сравнивайте конкурирующие куски кода по скорости самостоятельно, например на jsperf, и делитесь результатами с сообществом.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Aves
Максим Дунаевский со скобками не более правильный, а чуть более читаемый.
Если уж о правильности говорить, то в отношении void void function(i) {console.log(i)}(10);
Переменные в замыканиях в плане отладки даже хуже глобальных переменных, а локальные действительно быстрее и тех и других.
Сейчас уже стоит ориентироваться не на приёмы пятилетней давности времён ES3, а на современные инструменты типа browserify/webpack с bebel и отлаживать в браузере красивый ES2015/ES2016 с помощью sourcemaps.
Ответ написан
Комментировать
AloneCoder
@AloneCoder
[object Object]
Это function expression, потому что вызывать сразу можно только их
Вот такое вызовет ошибку - Syntax error
function () {
  
}();
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы