Динамические переменные вместо статических замедляют работу JS?

#javascript

Вопрос:

У меня есть библиотека, которая часто использует, скажем, функцию «getAttribute» узла. Поэтому вместо того, чтобы использовать его как node.getAttribute(), если у меня есть node[getAttributeStr](), я могу использовать getAttributeStr в качестве локального строкового значения «getAttribute», которое будет уменьшено, уменьшая размер кода.

Мой вопрос в том, если я сделаю это для всех наиболее часто используемых имен функций, замедлит ли это выполнение по сравнению с прямым доступом к функции с использованием статического имени?

node.getAttribute("abc");

Приведенный выше код будет заменен на.

 var getAttributeStr = "getAttribute";
node[getAttributeStr]("abc")

Моя функция выполняется довольно часто, и поэтому я боюсь, что это сильно увеличит время выполнения.

1. Вы можете измерить, насколько он медленнее, самостоятельно. Если вас беспокоит небольшой код, и вы работаете с одним и тем же узлом, вы можете уменьшить имя функции самостоятельно: let g = node.getAttribute.bind(node); g('abc') или объединить оба подхода.

2. Взгляните на этот JSPerf (не мой, я нашел его в Интернете): jsperf.com/dot-vs-square-bracket . Если вы запустите его несколько раз, вы увидите, что иногда точка выигрывает, иногда выигрывает скобка. Итак, основываясь на этом очень поверхностном и базовом тесте, я бы сказал, что различия не являются существенными.

3. Возможно, было бы лучше использовать минификатор, который может просто превратиться node.getAttribute("abc") в a.b("abc") , который даже короче, чем что-либо, использующее скобки. Также включите сжатие gzip на вашем сервере, чтобы сделать минимизацию менее важной.

4. @RomanHocke Я проверил это и не смог найти большой разницы за один раз. Думал выяснить, правильный это подход или нет, потому что ни в одном из популярных минификаторов у них нет такой опции.

5. @Thomas Как уже упоминалось, я пробовал использовать популярные минификаторы, но они этого не делают.

Ответ №1:

Я быстро собрал jsperf-тест, используя ваш пример.

https://jsperf.com/dynamic-vs-static-method-call/1

Хотя в Chrome они примерно одинаковы, обозначение скобок, похоже, намного медленнее, чем статический вызов в firefox. В Edge точечная нотация примерно в два раза быстрее на моей машине.

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

Однако на большинстве современных машин изменение одной реализации на другую будет едва заметным. Согласно тесту, вы все еще можете вызывать динамический getAttribute 300.000 раз в секунду в самых медленных браузерах. С большинством веб-сайтов возникают более серьезные проблемы, такие как загрузка 500 КБ сценариев отслеживания и зависимостей для отображения onepager, запрос неминифицированных / кэшированных источников, отображение десятков тяжеловесных объявлений и т. Д., На Которые следует обратить внимание в первую очередь.

1. спасибо за ваше время и ответ. Поскольку приложение также должно поддерживаться в старых браузерах, я думаю, для меня лучше использовать статическую реализацию за счет размера файла.

2. @jagan добро пожаловать! Не забывайте, что вы всегда можете уменьшить размер файла с помощью таких инструментов, как cssnano cssnano.co