Динамические переменные вместо статических замедляют работу JS?
У меня есть библиотека, которая часто использует, скажем, функцию «getAttribute» Node. Поэтому вместо того, чтобы иметь его как node.getAttribute(), если у меня есть node[getAttributeStr](), я могу получить getAttributeStr как локальное строковое значение «getAttribute», которое будет минимизировано, уменьшая размер кода.
Мой вопрос: если я сделаю это для всех наиболее часто используемых имен функций, замедлит ли это выполнение по сравнению с прямым доступом к функции с использованием статического имени?
node.getAttribute("abc");
Приведенный выше код будет заменен на.
var getAttributeStr = "getAttribute";
node[getAttributeStr]("abc")
Моя функция выполняется довольно часто, и поэтому я боюсь, что это сильно увеличит время выполнения.
Взгляните на этот JSPerf (не мой, я нашел его в Интернете): jsperf.com/точка-против-квадратной скобки. Если вы запустите его несколько раз, вы увидите, что иногда выигрывает точка, иногда выигрывает скобка. Итак, основываясь на этом очень поверхностном и базовом тесте, я бы сказал, что различия несущественны.
Возможно, было бы лучше использовать минификатор, который может просто превратить node.getAttribute("abc") в a.b("abc"), что даже короче, чем что-либо, использующее скобки. Также включите сжатие gzip на вашем сервере, чтобы сделать минимизацию менее важной.
@RomanHocke Я проверил это и не смог найти большой разницы ни разу. Думал выяснить, правильный это подход или нет, потому что ни в одном из популярных минификаторов нет такой опции.
@Thomas Как уже упоминалось, я пытался использовать популярные минификаторы, но они этого не делают.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я быстро собрал jsperf-тест, используя ваш пример.
https://jsperf.com/dynamic-vs-static-method-call/1
Хотя они примерно одинаковы в хроме, нотация скобок кажется намного медленнее, чем статический вызов в firefox. В Edge точечная запись примерно в два раза быстрее на моей машине.
Чтобы ответить на ваш вопрос, да, это в некоторой степени замедлит выполнение в некоторых браузерах.
Однако на большинстве современных машин смена одной реализации на другую будет едва заметной. Согласно тесту, вы все еще можете вызывать динамический getAttribute 300 000 раз в секунду в самых медленных браузерах. С большинством веб-сайтов возникают более серьезные проблемы, такие как загрузка 500 КБ скриптов отслеживания и зависимостей для отображения одностраничного веб-сайта, запрос неминифицированных/кешированных источников, отображение десятков тяжеловесных объявлений и т. д., на которые следует обратить внимание в первую очередь.
спасибо за ваше время и ответ. Поскольку приложение должно поддерживаться и в старых браузерах, я думаю, что для меня лучше использовать статическую реализацию за счет размера файла.
@jagan Добро пожаловать! Не забывайте, что вы всегда можете уменьшить размер файла с помощью таких инструментов, как cssnano cssnano.co.
Вы можете сами измерить, насколько он медленнее. Если Вас интересует небольшой код и Вы работаете с одним и тем же узлом, Вы можете сами минифицировать имя функции:
let g = node.getAttribute.bind(node); g('abc')или комбинировать оба подхода.