JS 함수 호출은 변수에 메모리를 할당하는 것과 비교하여 얼마나 비쌉니까?

Question

여기에 이와 같은 일부 JS 코드가 제공됩니다.

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

루프 앞의 변수에 getElementsByName의 결과를 넣은 다음 그 후에 변수를 사용하면 코드가 더 빨라질까요?

실생활에서 그 효과가 얼마나 큰지는 잘 모르겠습니다. getElementsByName 일반적으로 10개 미만의 항목이 있습니다.어쨌든 기본 메커니즘을 이해하고 싶습니다.

그리고 두 가지 선택지 중 주목할 만한 점이 있다면 알려주세요.

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

속성 조회를 캐싱하면 일부 도움이 될 수 있지만루프를 시작하기 전에 배열 길이를 늘리는 것이 더 빠른 것으로 입증되었습니다.

따라서 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이 이렇게 똑똑하다고 믿을 수는 없습니다(기침 즉 기침) 따라서 이 작업은 직접 수행하는 것이 가장 좋습니다.

Answer 4

원칙적으로 getElementsByName의 결과를 루프 앞의 변수에 넣은 다음 그 후에 변수를 사용하면 코드가 더 빨라질까요?

예.

Answer 5

변수를 사용하세요.JavaScript에서는 비용이 많이 들지 않으며 함수 호출은 확실히 느립니다.document.getElementById()를 5회 이상 반복하는 경우 변수를 사용하십시오.여기서의 아이디어는 함수 호출이 느릴 뿐만 아니라 이 특정 함수가 DOM에서 지정된 ID를 가진 요소를 찾으려고 시도하기 때문에 매우 느리다는 것입니다.

Answer 6

@올리

변수에서 가져온 요소의 길이 속성을 캐싱하는 것도 좋은 생각입니다.

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

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

Answer 7

scaleSelect.length를 별도의 변수에 저장할 필요가 없습니다.실제로는 이미 하나에 있습니다. scaleSelect.length는 scaleSelect 배열의 속성일 뿐이므로 다른 정적 변수만큼 빠르게 액세스할 수 있습니다.

Answer 8

그렇게 생각해요.반복될 때마다 엔진은 document.getElementsByName 문을 다시 평가해야 합니다.

반면에 값이 변수에 저장되면 이미 값이 있는 것입니다.