-
자바스크립트(JavaScript) 리페인트 최소화 하는방법JavaScript 2015. 3. 14. 19:12
변경전(성능 저하 예시)
// 사진 요소를 모두 얻는다
var aPhotoItems = document.getElementByClassName(".photo_item");
// 모든 사진 요소의 속성을 바꾼다
for(var i=0; i < aPhotoItems.length; i++) {
aPhotoItems[i].style.backgroundColor = "#ccc";
aPhotoItems[i].style.border = "1px solid #aaa";
}
변경후 (성능 향상 예시)
// 사진 요소의 부모 요소를 얻는다
var elContainer = document.getElementById("container");
// 부모 요소에 클래스 속성을 추가한다.
elContainer.className = "selected";
위의 코드를 사용하기 위해서는 다음과 같이 CSS를 적용해야한다.
#container.selected .photo_item {
background-color : #ccc;
border : 1px solid #aaa;
}
'JavaScript' 카테고리의 다른 글
자바스크립트 trim() 메서드 (0) 2015.04.15 자바스크립트 정규 표현식(Regular) (0) 2015.04.13 자바스크립트 컨텍스트, 클로저 (0) 2015.03.09 자바스크립트 성능 향상 방법 (0) 2015.03.08 자바스크립트(JavaScript) 전체 태그의 개수 구하는 방법! (1) 2015.03.07