document.getElementbyID 대 변수 선언 및 삭제 성능

Question

내 앱의 성능이 정말로 필요한 경우 더 적절한 방법을 알고 싶습니다. PhoneGap을 통해 교차 플랫폼 애플리케이션을 프로그래밍하고 있으며 코드 작성 방식이 매우 중요합니다.

더 적합 어느 :

document.getElementbyID('id').addEventListener() 

또는

var id = document.getElementbyID('id'); 
id.addEventListener(); 

와는 어떻게 내 응용 프로그램의 성능을 향상시키기 위해 키워드 "삭제"를 사용할 수 있습니까?

Answer 1

둘 사이의 차이는 크지 않을 것이다. 성능을 향상 시키려면 dom에 추가하는 이벤트 핸들러의 수를 최소화하고 다시 필요하지 않은 이벤트 핸들러를 제거해야합니다. 게시 한 컨텍스트에서 삭제가 의미가 없습니다. (연관) 배열의 항목을 비우거나 사용자가 만든 객체를 제거하는 데 사용해야합니다. 당신은 당신의 모범을 따르지 않습니다.

각 항목을 클릭 할 수있는 목록의 경우 목록 컨테이너에만 개별 요소가 아닌 하나의 이벤트 처리기를 연결해야합니다. 그런 다음 핸들러로 전달 된 이벤트 객체의 target 속성을 사용하여 실제 표시된 listitem을 찾을 수 있습니다.

---

편집 : li.id가 클릭 된 실제 항목을 식별하는 데 사용되는 여러 목록 항목

에 대해 하나의 이벤트 핸들러를 사용하는 방법에 대한 예. 'li'에 자식이 있으면 올바른 항목을 찾을 때까지 대상 DOM 트리를 따라 가야 할 수 있습니다.

<ul id="list"> 
    <li id="item_1">First Item</li> 
    <li id="item_2">Second Item</li> 
    <li id="item_3">Third Item</li> 
    <li id="item_4">Fourth Item</li> 
    <li id="item_5">Fifth Item</li> 
    <li id="item_6">Sixth Item</li> 
    <li id="item_7">Seventh Item</li> 
</ul> 

<script> 
    window.onload(function() { 
     document.getElementById("list").addEventListener("click", 
      function(event) { alert("" + event.target.id + " was clicked"); }); 
    }); 
</script> 

Answer 2

JavaScript는 런타임에 해석되므로 궁극적으로 컴파일러가 해당 변수 할당을 최적화할지 여부에 달려 있습니다. 어느 쪽이든 그 차이는 극히 적습니다. 몇 가지 테스트를 빌드하고 참조하십시오.

가독성에 중점을두고 (미세 최적화에 대해 걱정하지 않는 모델을 찾는 것).

어떻게 내 앱의 성능을 향상 시키려면 키워드 "delete"를 사용할 수 있습니까?

성능 집약적 인 응용 프로그램에 대해 논의하고 있으므로 JavaScript에서 적절한 가비지 수집에 관심이 있다고 가정합니다. 당신이 한 번 다른이 두 가지에 대한 동일한 시간이 소요보다 더 많은 DOM 요소를 필요로하는 경우

var id = document.getElementbyID('id'); 
id.addEventListener(); 

를 사용하는 것이 좋습니다 How does garbage collection work in JavaScript?

Answer 3

참조하십시오.

Answer 4

에 따르면 방금 jsperf.com을 만들었으므로 document.getElementbyID('id').addEventListener()이 가장 빠른 방법입니다. - Mac OS X의 Chrome에서

Try it 원하는 브라우저에서 테스트하고 편집하여 delete과 같은 기능을 추가/제거합니다.