Влияние производительности на доступ к shadowRoot или DOM (например, querySelector) v кешированию переменных?

Question

Мне интересно, насколько эффективен доступ к DOM через document.getElementById или document.querySelctor с точки зрения производительности?Альтернатива, которую я рассматриваю, - это один раз получить доступ к элементам, let x = document.getElementById('x');, а затем использовать эту переменную вместо повторяющихся запросов DOM.

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

Кроме того, я рассматриваю возможность перехода на использование пользовательских HTML-элементов с shadowRoot s.Будет ли теневой корень действовать как JS-кеш для слоя визуализированных элементов DOM;то есть это сделает прирост производительности для кэширования элементов DOM немым?Онлайн-источники (такие как [1]) объясняют, что теневой корень предназначен для инкапсуляции и, в отличие от виртуального dom, не помогает в пакетном обновлении HTML.Но помогает ли это в доступе к элементам HTML?

Для контекста доступ будет происходить для пары десятков элементов каждый раз, когда пользователь взаимодействует с определенными полями ввода, и они не находятся в таймере / цикле.

[1] Является ли теневой DOM быстрым, как виртуальный DOM в React.js?

Answer 1

getElementById() должно быть быстрее, чем querySelector().Кроме того, хранить ссылку на элемент в переменной должно быть быстрее.

Но вы должны увидеть разницу только после сотен вызовов.

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

(Native) Shadow DOM не должен мешать, но стилизация компонента должна быть более быстрой, благодаряИнкапсуляция CSS.

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