프로퍼티 접근과 getElementById 접근의 속도차이

1 minute read

결론은 프로퍼티 접근 느려.


관련해서 적은 글. http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=77295&page=&sfl=&stx=&sst=&sod=&spt=&page=&sca=%BD%BA%C5%A9%B8%B3%C6%AE

밑의 글의 리플에 대해서 보고있다가 글을 적습니다. 
공탱이푸님의 이야기 처럼 프로퍼티 접근이 엄청나게 늦더군요. 
테스트 URL : http://mins01.com/web_work/temp/test.20130629.html 

보통 사용시 
function fn01(f){ 
for(var i=0,m=f[‘namex[]’].length;i<m;i++){ 
f[‘namex[]’][i].value = i; 

return; 

이렇게 될텐데. 
위 함수 100000 번 루프 호출 (모든 테스트는 크롬(27.0.1453.116)으로 하였습니다. IE버려..) 
결과 : 14169msec 

=================-================================-=============== 

getElementById 로 사용할 경우. 
function fn1(f){ 
for(var i=0,m=len;i<m;i++){ 
document.getElementById(‘namex_‘+i).value = i; 

return; 

위 함수 100000 번 루프 호출 
결과 : 759msec 
——-=——– 
꽤 많은 차이가 나죠. 
하지만, 생각해볼 건. 
form속의 엘레멘트 중 name이 중복되면 배열로 처리할 수 있죠. 
즉, 최초 한번만 타겟을 설정하면 그 후에는 배열 루프초 처리가 가능합니다. 

=================-================================-=============== 
소스를 최적화 시키면 
var ta = f[‘namex[]’]; //1회만 설정되도록 함 
var len = ta.length; //1회만 설정되도록 함 

function fn0(){ 
for(var i=0,m=len;i<m;i++){ 
ta[i].value = i; 

return; 

위처럼 되어있고. 
ta와 len은 10000번 루프도는 for문 밖에서 1회만 설정합니다.(상세소스는 테스트 URL의 소스를 확인하세요) 
(즉, 10000번 루프 돌더라도 1회만 프로퍼티 접근. 그 후에는 배열로 처리) 
위 함수 100000 번 루프 호출 
결과 : 536msec 

——-=——— 
결론 
getElementById 가 꽤 빠르지만, 
form의 엘레멘트의 배열로 되어있는건 변수 선언해서 배열로 처리해라. 

——–=——— 
참고 
form속의 엘레멘트는 전부 프로퍼티 등으로 연결되어있어서, 다루기가 쉽죠. (다른 form에 같은 name이 있어도 문제 안됨) 
getElementById 로 사용할 경우 ID를 중복 없이 전부 적어줘야하죠. 그리고 몇번 루프 돌건이 알거나, 예외 처리해줘야함. 
그리고 10여번 정도 루프할 경우… 그냥 신경쓰지마요. 소스 유지보수 측면에 직접적으로 나타내는 쪽이 더 좋을 수 있어요.(루프 안 돌 경우도) 
——–=——– 
P.S 
IE 9 에서 해봤는데.. 완전 쓰레기!!!! 
0:8890msec <- 최적화 
01:13046msec <- 매번 프로퍼티 접근 
1:9916msec <- getElementById  사용 

IE10에서는 바뀐걸로 알고있는데, 누가한번 테스트 좀…


🔗original-link

Updated: