Насколько дорогие вызовы функций JS (по сравнению с распределением памяти для переменной)?

Учитывая некоторый JS-код, подобный этому:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

Будет ли код быстрее, если мы поместим результат getElementsByName в переменную перед циклом и затем будем использовать переменную после этого?

Я не уверен, насколько велик эффект в реальной жизни, результат getElementsByName, обычно имеющий < 10 предметов. В любом случае, я бы хотел понять основную механику.

Кроме того, если есть что-нибудь еще, напоминающее о двух вариантах, скажите, пожалуйста.

Ответ 1

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

Идеалистический код:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

Ответ 2

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

Таким образом, объявление переменной в цикле, которая содержит значение scale_select.length, ускорит весь цикл.

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

Ответ 3

Интеллектуальная реализация DOM будет делать свое собственное кэширование, делая недействительным кеш, когда что-то изменится. Но не все DOM сегодня могут считаться такими умными (кашель IE кашель), поэтому лучше всего, если вы сделаете это самостоятельно.

Ответ 4

В принципе, будет ли код быстрее, если мы поместим результат getElementsByName в переменную перед циклом, а затем будем использовать переменную после этого?

да.

Ответ 5

Использовать переменные. Они не очень дороги в JavaScript, а вызовы функций, безусловно, медленнее. Если вы зацикливаете по меньшей мере 5 раз над document.getElementById(), используйте переменную. Идея здесь заключается не только в том, что вызов функции медленный, но эта специфическая функция очень медленная, поскольку она пытается найти элемент с данным идентификатором в DOM.

Ответ 6

@Oli

Кэширование свойства длины элементов, выбранных в переменной, также является хорошей идеей:

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

Ответ 7

Нет смысла хранить scaleSelect.length в отдельной переменной; это фактически уже в one-scaleSelect.length является всего лишь атрибутом массива scaleSelect и, как таковой, как быстрый доступ к любой другой статической переменной.

Ответ 8

Я так думаю. Каждый раз, когда он петли, движок должен переоценить оператор document.getElementsByName.

С другой стороны, если значение сохраняется в переменной, то значение hasready уже имеет значение.