HTML 엘리먼트에 데이터를 바인딩하는 일은 좀 찝찝한 작업입니다. 일반적으로는 엘리먼트에 데이터를 담지 말라고 얘기를 하기 때문에, 넣자니 뭔가 깔끔하지가 못한 것 같고 빼자니 그 편리함 때문에 쉽게 포기할 수 없는 부분이기도 합니다. 사실 개인적으로는 마구잡이로 데이터를 넣어놓고 있기도 합니다.
HTML5에는 이를 지원하기 위해 'data-' 어트리뷰트를 제공하고 있습니다. 존 레식의 포스팅에 따르면 여려가지 이점이 있다고 하고요. 그래서 실제로 성능이 어떤지 알아보기 위해 몇가지 테스트를 해보기로 했습니다.
1. jQuery에서의 data(), attr()의 비교
테스트 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1. jQuery에서의 data(), attr()의 비교 </title>
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="example" keys-value="tomcat" data-value="tomcat" ></div>
</body>
<script type="text/javascript">
var welExample = $('#example')
, nTime
, sValue;
// 1. data- 어트리뷰트를 attr()로 가져올 시
nTime = new Date().getTime();
for(var i = 0; i < 10000; i++) {
sValue = welExample.attr('data-value');
}
console.log('attr data-');
console.log(new Date().getTime() - nTime);
// 2. attr() 사용 시
sValue = '';
nTime = new Date().getTime();
for(var i = 0; i < 10000; i++) {
sValue = welExample.attr('keys-value');
}
console.log('attr');
console.log(new Date().getTime() - nTime);
// 3. data() 사용 시
sValue = '';
nTime = new Date().getTime();
for(var i = 0; i < 10000; i++) {
sValue = welExample.data('value');
}
console.log('data');
console.log(new Date().getTime() - nTime);
</script>
</html>
그리고 테스트 결과는 다음과 같습니다. 10회 테스트의 평균치입니다.
(ms) |
IE 10 |
chrome 30.0.1 |
firefox 24.0 |
1. data- 어트리뷰트를 attr()로 가져올 시 |
42 |
18 |
99 |
2. attr() 사용 시 |
39 |
13 |
97 |
3. data() 사용 시 |
19 |
9 |
57 |
역시 data()를 사용했을 때 가장 빠른 것을 알 수 있습니다. 대신 data- 가 붙은 어트리뷰트를 attr()로 가져올 땐 더 느린 성능을 보여주고 있기 때문에 이를 잘 커플링 해주는 것 역시 필요한 것으로 보입니다.
그나저나 파이어폭스는 이제 ie보다도 느린 브라우저가 되었네요. 이제 파폭을 사용해야할 이유 중에서 성능 상의 이유는 빼야할지도 모르겠습니다.
2. 엘리먼트 드로우 시의 성능 비교
다음은 HTML을 화면에 그릴 때에 data-를 사용했을 때와 커스텀 어트리뷰트를 사용했을 때의 성능 차이를 알아보려고 합니다. 존 레식의 포스팅에 따르면 data- 사용 시에는 드로우 시에 이를 제외시키기 때문에 좀 더 빠른 드로우를 할 수 있다고 합니다만, 2008년도의 포스팅이니 한 번 테스트 해보기로 합니다.
테스트 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2. 엘리먼트 드로우 시의 성능 비교 </title>
</head>
<body>
// 1. 커스텀 어트리뷰트 사용 시
<script type="text/javascript">
var nTime = new Date().getTime();
</script>
<div id="example" keys-value="tomcat" ></div>
... 1000개
<script type="text/javascript">
console.log(new Date().getTime() - nTime);
</script>
// 2. data- 사용 시
<script type="text/javascript">
var nTime = new Date().getTime();
</script>
<div id="example" data-value="tomcat" ></div>
... 1000개
<script type="text/javascript">
console.log(new Date().getTime() - nTime);
</script>
</body>
</html>
그리고 테스트 결과는 다음과 같습니다. 30회 테스트의 평균치입니다.
(ms) | IE 10 | chrome 30.0.1 | firefox 24.0 |
1. 커스텀 어트리뷰트 사용 시 | 6.3 | 5.26 | 7.53 |
2. data- 사용 시 | 4.7 | 5.3 | 29.53 |
저희가 원했던 결과는 IE에서만 보이는 걸 알 수가 있습니다. chrome은 거의 차이가 없습니다. 그리고 안습의 firefox는... 어쩌다 이렇게 되었는지. 테스트가 1000개의 엘리먼트를 그리는 작업이다보니 firefox를 제외하고는 큰 차이가 없다고 말하는 게 맞는 것 같습니다.
결론
결국 엘리먼트에 데이터 바인딩 시에는 data-, data()를 함께 사용하는 것이 가장 나은 방법으로 보입니다. 엘리먼트 드로우 시의 차이는 firefox를 제외하고는 거의 없지만, firefox의 비중을 무시할 수 없는 서비스에서 다수의 엘리먼트를 사용할 때에는 사용을 조금 검토해보는 것이 낫다는 결론입니다.
3. 번외편 - jindo 사용 시의 attr(), data() 비교
NAVER에서 만든 js 라이브러리인 jindo에서의 성능은 어떠할 지 알아보겠습니다.
테스트 결과는 다음과 같습니다. 10회 테스트의 평균치입니다.
(ms) | IE 10 | chrome 30.0.1 | firefox 24.0 |
1. data- 어트리뷰트를 attr()로 가져올 시 | 60 | ||
2. attr() 사용 시 | 49 | ||
3. data() 사용 시 | 85 |
'의역과 오역 > Dev' 카테고리의 다른 글
| REQUIREJS API (1) | 2014.07.02 |
|---|---|
| 자바스크립트 모듈패턴 발표자료 (0) | 2014.04.28 |
| HTML5 data- 어트리뷰트 (john resig blog - 2008.07.13) (0) | 2013.10.08 |
| 왜 iOS용 Facebook앱은 성능이 떨어지는가?(UIWebViews, no Nitro) (0) | 2012.05.18 |
| 5년째 헤메고 있는 Google(from Android Gripes) (0) | 2012.01.01 |
