JavaScript 이벤트가 메모리 및 성능에 미치는 영향에 대한 자세한 소개

이벤트 핸들러가 최신 웹 페이지에 강력한 대화형 기능을 추가할 수 있지만, 수많은 이벤트 핸들러를 무분별하게 추가하는 것은 정말 어리석은 일입니다.

분석해 보겠습니다. 이벤트 핸들러는 본질적으로 메모리에 저장되는 함수이자 객체입니다. 많은 수의 이벤트 핸들러를 설정하면 메모리의 객체 수가 늘어납니다. 프로그램 성능이 향상됩니다. 점점 더 나빠지고 사용자 경험도 매우 나빠질 것입니다.

이벤트 핸들러를 더욱 잘 활용하기 위해 이벤트 위임이 등장하여 성능이 향상되었습니다.

이벤트 위임

이벤트 위임: 여러 하위 노드의 동일한 이벤트 처리 기능을 상위 노드, 상위 노드에 바인딩 하위 노드에서 이벤트가 버블링됩니다. 이 기술을 이벤트 위임이라고 합니다.

추가 사항: 이벤트 위임은 상위 노드와 하위 노드에만 국한되지 않습니다. 예를 들어, 페이지 문서의 다양한 위치에 있는 많은 버튼이 모두 클릭 이벤트에 바인딩되어 있습니다. 이벤트 위임을 사용하면 이러한 이벤트를 body 요소에 바인딩한 다음 처리할 수 있습니다. 일반적으로 거의 사용되지 않음).

다음은 이벤트 위임의 장점을 점진적으로 설명하는 예입니다.

<ul id="parent-list">
    <li id="list-1">List 1</li>
    <li id="list-2">List 2</li>
    <li id="list-3">List 3</li>
    <li id="list-4">List 4</li>
    <li id="list-5">List 5</li>
</ul>

위 코드를 가정하면 이제 요구 사항이 있습니다. 위 목록(ul)의 어떤 하위 목록이 클릭(li)하면 우리가 클릭한 하위 목록을 보여주는 상자가 나타납니다.

요구는 어렵지 않죠? 요구 사항을 염두에 두고 이제 js 코드를 작성할 차례입니다. 1. 클릭 이벤트를 각 li 하위 요소에 바인딩한 다음 핸들러 함수를 설정합니다. 🎜> 2. 이벤트 위임을 사용하여 클릭 이벤트를 ul 상위 요소에 바인딩한 다음 핸들러 함수를 설정합니다.

// 方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
  alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    alert(target.firstChild.nodeValue);
  }
},false);

위 코드를 보면 두 번째의 장점을 몇 가지 적어 보겠습니다. 방법: 1. 액세스 감소 DOM의 횟수는 성능을 향상시킵니다. 2. 하위 요소의 이벤트 핸들러를 해당 상위 요소에 대한 통합 바인딩으로 메모리 사용량을 줄입니다. 3. 특정 요소에 대한 응답을 제거하는 등 이벤트 핸들러를 더 잘 관리할 수 있습니다. 이벤트 핸들러 참조

참고:

각 하위 요소에 대한 요구 사항이 다른 경우 위의 방법 2를 다음과 같이 다시 작성할 수도 있습니다.

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    switch(target.id){
      case "list-1":
        alert("学的越多，越觉得自己无知！");
        break;
      case "list-2":
        alert("爱是一种艺术！");
        break;
      case "list-3":
        target.innerHTML = "呵呵，我改了啊！";
        break;
      case "list-4":
        target.style.background = "#aaa";
        break;
      case "list-5":
        target.style.color = "red";
        target.style.fontSize = "2em";
        break;
      default:
        break;
    }
  }
},false);

왜냐하면 이벤트 위임은 이벤트 버블링 메커니즘에 의존하므로 모든 이벤트를 위임할 수는 없습니다.

이벤트 위임에 가장 적합한 이벤트로는 click, mousedown, mouseup, keydown, keyup 및 keypress가 있습니다.

이벤트 위임은 이벤트 바인딩에 대한 아주 좋은 아이디어일 뿐이므로 위의 예에만 얽매이지 말고 배워서 사용해 보세요! ^_^

이벤트 핸들러 제거

앞서 이벤트 핸들러는 메모리에 존재한다고 말했습니다.

이벤트 핸들러가 요소에 할당될 때마다 실행 중인 A 연결이 브라우저 간에 설정됩니다. 코드와 페이지 상호 작용을 지원하는 JavaScript 코드

. 이러한 연결이 많을수록 페이지 실행 속도가 느려집니다. 앞서 언급한 이벤트 위임은 설정된 연결 수를 제한하는 데 사용됩니다. 또한 사용 후 더 이상 사용되지 않는 메모리의 이벤트 핸들러도 출시되지 않으면 웹 애플리케이션의 메모리와 성능에 영향을 미칩니다.

<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
  // 提交某个表单的操作代码

  button.onclick = null; // 移除事件处理程序
  event.target.firstChild.nodeValue = "提交中。。。";
};

일반 원칙은 다음과 같습니다.

더 이상 사용하지 않는 이벤트 핸들러를 제거하고 메모리를 확보하세요!

이상은 JavaScript 이벤트가 메모리와 성능에 미치는 영향에 대한 자세한 소개입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php. CN)!