DOM 방문 횟수 감소 및 자바스크립트 성능 향상_javascript 팁

DOM 요소에 액세스하는 데는 비용이 들고, DOM 요소를 수정하면 브라우저가 페이지의 기하학적 변경 사항을 다시 계산하게 되므로 훨씬 더 많은 비용이 듭니다.

물론 최악의 시나리오는 루프에서 수정된 요소에 액세스하는 것입니다. 특히 HTML 요소 모음에 대한 루프 작업이 그렇습니다.

예:

코드 복사 코드는 다음과 같습니다.

이 함수는 수정을 위해 반복됩니다. 페이지 요소의 내용. 이 코드의 문제점은 각 루프 반복에서 요소가 두 번 액세스된다는 것입니다. 한 번은 innerHTML 속성을 읽고 한 번은 다시 작성합니다.

보다 효율적인 접근 방식은 로컬 변수를 사용하여 업데이트된 콘텐츠를 저장한 다음 루프가 끝난 후 한 번에 모두 작성하는 것입니다.

코드 복사 코드는 다음과 같습니다.

function innerHTMLLoop() {
var content = '';
for(var count = 0; count < 15000; count ){
content ='a'}
document.getElementById ('here').innerHTML =content;
}



DOM에 더 많이 액세스할수록 코드 실행 속도가 느려집니다. 따라서 다른 대안이 있는 경우 DOM 방문 횟수를 줄이도록 노력해야 합니다.