데이터 속성 CSS 선택기가 클래스 선택기보다 빠릅니까?

Question

몇 달 전 this article은 웹 사이트 개발을 통해 수업을 실제로 피할 수 있다고 지적했습니다.

제 질문은 클래스 선택기와 비교하여 데이터 선택기가 얼마나 효율적입니까?

간단한 예제는 인 요소와 data-component='something' 인 요소를 비교하는 것입니다.

선택기는 분할되어야하는 클래스 문자열 대 전체 값을 확인합니다. 이를 염두에두고 데이터 속성이 더 빨라야합니다.

CSS의 경우에는 클래스 선택기 또는 데이터 선택기를 사용하는 것이 더 좋습니다. 그리고 자바 스크립트 관점에서 jQuery("[data-component='something']")은 jQuery(".something")보다 더 효율적입니까?

Answer 1

나는 이라는 결론을 내리지는 않겠지 만 클래스 선택기가 더 빠르다고 생각합니다.

http://jsperf.com/data-selector-performance

편집 :

블라드의 내 jsperf 테스트 ...를 바탕으로 성능이 우려 (특히 IE) ... 클래스가 여전히

Answer 2

을 갈 수있는 방법 인 경우 저는 셀러 브라우저의 성능에 비해서도 셀렉터의 성능이 충분히 빠르다는 인상을 받았습니다. 선택기를 많이 사용하거나 데이터 속성이나 클래스 기반을 사용하려고 계획하지 않는 한 (이미 쿼리 한 선택기를 캐시하기 위해 코드를 다시 방문하도록 제안하는 경우) 그렇게 나쁘지는 않다고 생각할 수 있습니다. 그리고 나는 심지어 다른 사람들보다 스타일을 사용하는 것이 극적이지 않다고 말할 것입니다.

브라우저 공급 업체가 셀렉터에 대한 쿼리보다 가장 많이 사용되는 시나리오 (클래스에 대한 쿼리)를 개선하는 데 더 많은 시간을 할애했다고 생각합니다. 이것은 변화하고 있으며 다른 사례도 최적화되기 시작하면 놀라지 않을 것입니다.

Answer 3

그가 제공 한 BLSully의 답변과 test page을 확인한 후 여기에 비교를위한 실제 수치가 나와 있습니다.

초당 jQuery를 데이터 속성 선택기 성능 조작 VS

jQuery를 클래스 선택기 성능 : 27.0.1453

140 % 빠른 파이어 폭스 15.0.1

131% 빠른 크롬에

• 31 % 9.0
• 1,356퍼센트 빠른 10.0

IE에서 IE의 21.0

1,267퍼센트 빠른 파이어 폭스 0

Answer 4

나는이 모든 대답에 대해 모르지만 나는 자신의 테스트를 실행하고 속성이 빠릅니다.

당신은 당신의 자기 다만, 처음에 시간을 절약하는 작업을하고 최종 시간을 얻을 후 수학을

\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t').removeClass('act'); 
 
\t \t $('.t1r').addClass('act'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff); 
 

 
\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t2').attr('this-act',''); 
 
\t \t $('.t2r').attr('this-act','1'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff);