RIA(리치 인터넷 애플리케이션)를 개발할 때 페이지 요소를 수정하거나 추가하기 위해 일부 자바스크립트 스크립트를 작성하는 경우가 많습니다. 이러한 작업은 궁극적으로 DOM(문서 객체 모델)에 의해 완료되며 구현 방법은 애플리케이션의 응답 속도에 영향을 미칩니다.
DOM 작업으로 인해 브라우저는 페이지 요소 표시 방법을 결정하는 브라우저의 계산 프로세스인 재분석(리플로우)을 수행합니다. DOM을 직접 수정하거나 요소의 CSS 스타일을 수정하거나 브라우저 창 크기를 수정하면 재분석이 트리거됩니다. offsetHeithe 또는 offsetWidth와 같은 요소의 레이아웃 속성을 읽으면 재분석이 트리거됩니다. 재분석에는 계산 시간이 걸리므로 재분석이 덜 실행될수록 애플리케이션 속도가 빨라집니다.
DOM 작업은 일반적으로 기존 페이지 요소를 수정하거나 새 페이지 요소를 생성합니다. 다음 네 가지 최적화 솔루션은 DOM 노드를 수정하고 생성하는 두 가지 방법을 다루므로 브라우저 재분석을 트리거하는 횟수를 줄이는 데 도움이 됩니다.
해결 방법 1: CSS 클래스 이름을 전환하여 DOM 수정
이 솔루션을 사용하면 요소와 하위 요소의 여러 스타일 속성을 한 번에 수정하고 재분석을 한 번만 실행할 수 있습니다.
필요:
( emu note : 원본 기사의 작성자는 이 글을 작성할 때 분명히 두뇌에 단락이 있었고 여기에는 후속 Out-of-the-flow DOM Manipulation 모드에서 해결해야 할 문제를 넣었습니다. 그러나 데모 코드를 통해 작성자를 쉽게 이해할 수 있으므로 emu는 원본 텍스트를 재현하지 않습니다.
이제 하이퍼링크의 여러 스타일 규칙을 수정하는 함수를 작성해야 합니다. 구현하는 것은 매우 간단합니다. 이러한 규칙에 해당하는 속성을 하나씩 변경하면 됩니다. 그러나 문제는 스타일 속성이 수정될 때마다 페이지가 다시 구문 분석된다는 것입니다.
함수 selectAnchor(요소) {
element.style.fontWeight = '굵게';
element.style.textDecoration = '없음';
element.style.color = '#000';
}
해결책:
이 문제를 해결하려면 먼저 스타일 이름을 만들고 수정할 모든 스타일 규칙을 이 클래스 이름에 넣을 수 있습니다. 그런 다음 이 새 클래스 이름을 하이퍼링크에 추가하여 여러 스타일 규칙을 추가할 수 있습니다. 트리거되었습니다. 이 모델의 또 다른 장점은 성능과 논리의 분리를 달성한다는 것입니다.
.selectedAnchor {
글꼴 두께: 굵게;
텍스트 장식: 없음;
색상: #000;
}
함수 selectAnchor(요소) {
element.className = 'selectedAnchor';
}