'가속화'에 해당되는 글 1건

  1. 2008.12.31 IE 에서 JavaScript 를 가속화(DOM 접근) 하는 방법 (8)

다음의 코드를 JavaScript의 맨 앞쪽에서 수행하면 됩니다.

/* @ cc_on _d = document; eval(‘var document = _d’) @*/


위의 코드를 IE에서 수행을 하면 document 접근이 약 5배 정도 빨라집니다.

//before
var date = new Date;

for(var i = 0; i < 100000; i++) document;
alert( new Date – date);//547

/* @ cc_on _d = document; eval(‘var document = _d’) @*/

//after
date = new Date;
for(var i = 0; i < 100000; i++) document;

alert( new Date – date);
//47


IE에서는 document에 그냥 접근하게 되면 window 객체의 내부 메서드가 실행됩니다. IE에서는 이 부분이 아주 무거운 부분인데요.


var _d = document;


이렇게 하고 _d 라는 document의 레퍼런스를 통해서 접근하면 매우 빨라집니다.
위의 코드를 몇 가지의 형태로 더 테스트 해봤습니다.
 대부분의 브라우저에서 속도가 10배 혹은 20배 이상 나타나는 경우도 있었습니다.

// Before
var date = new Date; 
for (var i = 0; i <100000; i++) document.getElementById; 			

alert ('before '+ (new Date - date)); // 100			

/*@cc_on _d=document; eval('var document=_d; var getEl=_d.getElementById;')@*/			

var _d = document;
var getEl = _d.getElementById;

// After
date = new Date; 
for (var i = 0; i <100000; i ++) getEl;  

alert ('after '+ (new Date - date)); // 4
 

Chrome 에 document.getElementById 의 DOM 메서드에 대한 테스트에서는 Before : 100s,  After : 4s 정도가 평균적으로 나타났습니다.


위의 내용은
일본의 amachang 씨가 블로그에 소개한 내용입니다.


원글 : http://d.hatena.ne.jp/amachang/20071010/1192012056
추가글 : http://d.hatena.ne.jp/uupaa/20081230/1230604575

이 글에 대한 자세한 테스트 자료가 있어서 함께 소개합니다.

신고
Posted by Rhio.kim