ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 성능 이야기(DOM 스크립팅)
    My-Book(History) 2015. 3. 28. 15:13

    ★- 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;}

Designed by Tistory.