약 100 개 요소가 있고 jquery를 사용하여 애니메이션을 만들려고합니다.어느 것이 더 빠릅니까? - CSS 속성 수정 또는 jquery 클래스 추가하기
<div class="box" id="a1"></div>
기능에 따라 각 요소에 특수 스타일을 추가해야합니다. 브라우저에서 더 빠르게 렌더링되는 그들의
:
추가 CSS 속성
$(this).css({'background-color':'#000'})
또는 추가 클래스
$(this).addClass("style1")
업데이트 몇 가지 내가 추가 할 :
jsPerf에 따르면 addClass는 약 50 %만큼 현저하게 빠릅니다.
여기에 크롬에 대한 jsPerf 데이터입니다하지만 내 테스트에서 동일한 사용하여 파이어 폭스에 대해이었다
$('#a1').css({ 'background-color': '#000' }) 82,043 ± 0.21 %, 48 % 느린
$('#a1').addClass("style1") 158,876 ± 0.83 % 빠름
벤치 마크 덕분에 ... 너무 스타일 시트의 크기와도 비교해야할까요 ... 나는 자바 스크립트로하고 있는데 나는 스크립트를 자동화 할 수있다. CSS는 약 25 클래스를 추가해야합니다. – Masade
jsPerf는 일정 기간 동안 실행할 수있는 작업 * js * 만 테스트합니다. 스타일에 대한 렌더링은 css 메소드로 더 빠를 수 있습니다. –
:
은 브라우저에 따라 다릅니다. 당신이 재미 있다면 몇 가지 테스트를해야합니다.
어쨌든 중요한 것은 아니며 웹 사이트의 병목 현상이 될 가능성이 거의 없습니다.
마이크로 최적화를 피하십시오. "조기 최적화가 모든 악의 근원입니다", 시간을 낭비하고 있습니다.
동의하면 특정 상황에서 가장 잘 작동하는 것을 사용하십시오. 만약 당신이 설정해야 할 속성이 하나 있다면'css()'를 사용해야한다. 그렇지 않으면'addClass()'를 사용한다. – elclanrs
@gdoron은 크롬 16.0에서 렌더링 속도가 매우 느린 것처럼 느껴진다. 단순한 배경 이상의 것을 추가하십시오. – Masade
@Masade. 100 개의 요소가 느려지 게하지 않습니다. [this] (http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/) 기사를 읽으십시오. CSS 선택기에 관한 내용이지만 문제는 같습니다. – gdoron
이 100 가지 요소의 상위 클래스를 추가하면 CSS 파일이나 페이지에서 해당 클래스를 더 빨리 정의 할 수 있습니다.
.style1 .box{
//define style here
}
당신은 단지 하나 개의 요소의 클래스를 조작해야하고 css 방법을 사용하여 (100) 요소의 스타일을 각각 수정하는 것보다 확실히 빠른이 방법.
얼마나 빠릅니까? 모든 작업은 브라우저에 따라 브라우저에 종속적 인 각 작업에서 실행되는 코드 줄 수에 따라 다릅니다.
내 접근 방식을 사용하면 확실히 빠를 것입니다.
스타일 태그 사용을 고려해 볼 수도 있습니다.
매우 빠르게 변할 수 있습니다. 예를 들어 수정해야 할 요소가 많은 경우 CSS를 한 번만 작성하면 100 개의 요소가 있다고 가정 해 봅시다. DOM은 한 번만 변경됩니다.
HTML :
<style type="text/css" id="specialStyle"></style>
<div class="oneHundredElements" id="box1"/>
<div class="oneHundredElements" id="box2"/>
...
<div class="oneHundredElements" id="box100"/>
SCRIPT :
<script>
var css = '.oneHundredElements {background-color:#000;}';
$('#specialStyle').html(css);
</script>
왜 벤치마킹하고 밖으로 찾을 수 없습니까? 나는 그것이 물질에 충분한 차이를 만들 것이라고 상상할 수 없다. –
[** 시도해보십시오. **] (http://jsperf.com/modifying-css-vs-adding-a-class) – icktoofay
어떤 맥락에서 100 가지 요소가 있습니까? 왜 하나의 요소를 사용하고 jQuery 배경 컬러 애니메이션 (http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor)을 사용하지 않겠습니까? – Dan