Является ли таблица хэшей быстрее, чем document.getElementById?

Question

Если у меня есть узел, как это:

<!-- lots of HTML here (including lots of nest unordered lists) --> 
    <span id="spn123">Test</span> 
    <!-- lots of html here --> 

похороненных под большим количеством уровней HTML, и я также иметь JavaScript хэш-таблицу, как это:

[ 
/* lots of nodes here */ 
{ 123 : 'Test' } 
/* lots of nodes here */ 
] 

Тогда было бы быстрее использовать

document.getElementById('spn123').innerText; 

или

data(123) 

Я бы предположил, что оба обработаны браузером изначально и очень оптимизированы, но будет ли последний быстрее из-за его плоской структуры и отсутствия дополнительного раздувания DOM?

Спасибо!

Answer 1

Возможно, было полезно узнать, почему у вас есть как объект, так и представление DOM. Я предполагаю, что хэш является единственным источником правды, а DOM соответственно делает хэш.

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

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

function getItem(id) { 
    return hash[id]; 
} 

Если позже вы найдете более оптимизированный способ для поиска ваших данных вы просто меняете эту функцию.

Обновление: Я изменил jsperf, чтобы использовать textContent, но это не будет работать в старых браузерах.

Answer 2

Я думаю, что ответ на ваш вопрос: «Это не имеет значения».

Моя мысль заключается в том, что, как говорили комментаторы, вы можете как-то сравнить ее.

Однако, если я не ошибаюсь, document.getElementById - это самый быстрый способ выбрать один элемент на вашей странице; нет необходимости пытаться оптимизировать его, если количество операций, которые вы выполняете, является экстремальным.

Answer 3

, но будет ли последний быстрее из-за его плоской структуры и отсутствия дополнительного раздувания DOM?

Если кто-то значительно и заметно медленнее, чем другой, используйте тот, который имеет наибольший смысл. Объекты предназначены для хранения и извлечения данных (среди прочего), DOM предназначен для визуального представления.

Так что используйте объект для хранения и извлечения данных, используйте DOM, чтобы отобразить его значимым образом.