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

Question

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

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

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

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

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

Answer 1

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

Идеальный код:

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

Answer 2

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

Таким образом, объявление переменной в цикле, которая содержит значение 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;

Answer 3

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

Answer 4

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

Answer 5

@ Oli

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

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

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

Answer 6

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

Answer 7

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

да.

Answer 8

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

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