자바스크립트 성능 최적화를 위한 DOM 대화형 작업 예제 분석_javascript 기술

이 기사의 예에서는 자바스크립트 성능 최적화를 위한 DOM 대화형 작업 기술을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

JavaScript의 모든 측면에서 DOM은 의심할 여지 없이 가장 느린 부분입니다. DOM 조작 및 상호 작용에는 전체 페이지나 특정 부분을 다시 렌더링해야 하는 경우가 많기 때문에 시간이 많이 걸립니다. DOM과의 상호 작용을 최적화하는 방법을 이해하면 스크립트 완료 속도를 크게 향상시킬 수 있습니다.

1. DOM 업데이트 최소화

아래 예를 살펴보세요.

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

문서 조각화를 사용하여 DOM 업데이트를 최소화할 수 있습니다.

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

문서 조각화에 대한 자세한 내용은 이전 글 "JavaScript 문서 조각화 작업 예제 분석"

을 참조하세요.

2. innerHTML을 사용하세요

대규모 DOM 변경의 경우 innerHTML을 사용하는 것이 createElement() 및 AppendChild()보다 빠릅니다.

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3. 이벤트 위임을 활용하세요

자세한 내용은 이전 글 "자바스크립트 성능 최적화를 위한 이벤트 위임 인스턴스 상세 설명"

을 참고하세요.

4. NodeList에 주목하세요

NodeList에 대한 액세스 횟수를 최소화하면 NodeList에 액세스할 때마다 문서 기반 쿼리가 실행되므로 스크립트 성능을 크게 향상시킬 수 있습니다.

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

NodeList에 대한 자세한 내용은 이전 기사 "Javascript에서 NodeList를 배열 배열로 처리하는 방법"을 참조하세요.

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.