DOM 요소에 액세스하는 데 비용이 많이 드는 비용이 발생하며 DOM 요소 수정은 브라우저가 페이지의 기하학적 변경을 다시 계산하기 때문에 더 비싸다.
물론 최악의 경우는 루프에서 수정 된 요소, 특히 HTML 요소 컬렉션의 루프 작업에 액세스하는 것입니다.
예를 들어:
코드 사본은 다음과 같습니다.
<!-최적화 전->
<script type = "text/javaScript">
함수 innerhtmlloop () {
for (var count = 0; count <15000; count ++) {
document.getElementById ( '여기'). innerHtml+= 'a';
}
}
</스크립트>
이 함수는 페이지 요소의 내용을 수정하기 위해 고리합니다. 이 코드의 문제점은 각 루프 반복, 요소에 두 번 액세스된다는 것입니다. 일단 내부 HTML 속성을 읽고 다시 작성하면 다시 작성하십시오.
보다 효율적인 접근 방식은 로컬 변수를 사용하여 업데이트 된 컨텐츠를 저장 한 다음 루프가 끝난 후 한 번에 작성하는 것입니다.
코드 사본은 다음과 같습니다.
<!-최적화 후->
<script type = "text/javaScript">
함수 innerHtMlloop () {
var content = '';
for (var count = 0; count <15000; count ++) {
내용+= 'a';
}
document.getElementById ( '여기'). innerhtml+= content;
}
</스크립트>
DOM에 더 많이 액세스할수록 코드가 느려집니다. 따라서이를 대체 할 다른 해결책이 있으면 DOM 방문 횟수를 최소화해야합니다.