ПРОИЗВОДИТЕЛЬНОСТЬ Доступ к родителю с использованием child.parentNode против getElementById

Question

Я хочу получить доступ к родителю элемента.Я могу получить доступ к родителю с помощью child.parentNode, но у меня есть родительский идентификатор, поэтому я также могу получить к нему доступ с помощью getElementById ()

Вопрос: какой путь лучше с точки зрения производительности?И почему это лучше?

Answer 1

Итак, вместо того, чтобы рассуждать об этом, я решил использовать jsPerf для создания некоторых тестовых случаев:

первый тестовый случай использует очень простой HTML-документструктура:

<div id="parent">
    <div id="child">
    </div>
</div>

Затем он проверяет child.parentNode на запросы id, используя document.getElementById и document.querySelector.Я запускал его несколько раз в Chrome и несколько раз в Firefox:

Как видите, child.parentNode - явный победитель над обоими id document методы выбора.querySelector - самый медленный - это гораздо более ярко выражено в Firefox, чем в Chrome, но, очевидно, самый медленный в обоих контекстах.

Второй второй тестовый пример выполняет те же тесты, нос немного более сложной структурой документа, в которой наша цель <div> вложена на несколько уровней глубиной:

<div>
    <h1>Test Code</h1>
    <p>lorem ipsum</p>
    <section>
        <h2>Inner section</h2>
        <p>lorem ipsum lorem ipsum</p>
        <div class="example">
            <h3>Example #1</h3>
        </div>
        <div class="example">
            <div id="parent"> <div id="child"> </div> </div>
        </div>
    </section>
</div>

Как указывает @ maheer-ali, мы ожидаем, что это еще больше усилит преимущество в производительностиchild.parentNode по сравнению с другими методами, потому что мы запрашиваем весь документ, но стоит проверить эксперимент.

Удивительно, не сильно отличается от результатов первого теста.Мы можем ожидать, что это изменится в некоторой степени с увеличением структуры документа, но вряд ли мы увидим появление другого лидера.

Я запускал эти тесты только в двух браузерах, всего несколько раз.Кроме того, я работаю в Ubuntu, поэтому реализация и производительность браузера могут немного отличаться по сравнению с версиями для Windows или MacOS (которые будут намного популярнее).Так что стоит протестировать это самостоятельно с несколькими различными браузерами, чтобы получить более широкий и полный набор результатов.Кроме того, я бы пригласил всех читателей этого ответа сделать то же самое.

Однако предупреждаю - хотя разница в производительности может показаться радикально другой, стоит отметить, что набор результатов показан в операций в секунду , где даже самый худший случай id с querySelector в Firefox дает примерно четыре миллиона операций в секунду .Если вы не планируете выбирать этот родительский узел с очень высокой частотой, вы, скорее всего, говорите о незначительной разнице в производительности.Кроме того, имейте в виду, что некоторые из этих результатов могут измениться - поскольку браузеры отдают приоритет новым методам, таким как querySelector, мы можем ожидать улучшения его производительности в последующих версиях этих браузеров.Удачи и удачного кодирования!