자바스크립트 성능 이야기(DOM 스크립팅)

★- CSS 클래스나 규칙 사용

리스트에 있는 이미지를 선택하여 CSS를 변경할때 

잘못된 예 :

// 사진 요소를 모두 얻는다.

var aPhotoItems = document.getElementByClassName(".photo_item");

// 모든 사진 요소의 속성을 바꾼다.

for (var i=0; i < aPhotoItems.length; i++) {

aPhotoItems[i].style.backgroundColor = "#ccc"l

aPhotoitems[i].style.border = "1px solid #aaa";

}

많은 DOM 객체에 접근하는 것도 모자라 CSS 속성까지 변경한다면 심각한 성능 저하가 발생한다.

어쩔 수 없이 많은 수의 요소를 다뤄야 할 때가 있을때에는 CSS 클래스를 활용해 여러 요소에 직접 접근하지 않는 방법을 사용하자

올바른 예 :

// 사진 요소의 부모 요소를 얻는다.

var elContainer = document.getElementById("container");

// 부모 요소에 클래스 속성을 추가한다.

elContainer.className = "selected";

위의 코드는 모든 img 요소에 접근하지 않고 부모 요소의 CSS 클래스만 부여해서 사진 요소의 CSS 속성을 변경하는 코드다. 위와 같이 사용하려면 사전에 다음과 같은 CSS가 정의돼 있어야 한다.

#container.selected .photo_item {

background-color : #ccc;

border : 1px solid #aaa;

}

★- 익스플로러(IE7)에서 성능 저하를 가져오는

:hover 선택자

1. :hover 선택자를 많이 사용하면 스크롤이 느려지는 현상이 있다.

이 현상은 인터넷 익스플로러 7의 버그다. 따라서 한 문서에 :hover 선택자의 정의를 여러개 사용하지 않는 것이 좋다.

2. 앵커 요소가 아닌 요소에:hover 선택자를 사용하면 느려지는 현상이 있다.

마찬가지로 IE7의 버그다. 앵커 요소가 아닌 요소에 :hover 선택자를 사용하면 특정 상황에서 CPU 점유율이 치솟거나 화면이 느려지는 현상이 있다. 정확히 어떤 상황에서 문제가 발생하는지 구체적으로 확인되지 않았지만 마크업 구조가 복잡하거나 이미지를 많이 쓸 때 발생하는 것으로 보인다.

다음과 같이 바꾸면 성능 을 최적화 시킬 수 있다 우선 잘못된 예제부터 보자

.link:hover { background-color:#ccc;}

최적화 시킨 예제 :

a.link:hover { background-color:#ccc;}