프로퍼티 접근과 getElementById 접근의 속도차이
결론은 프로퍼티 접근 느려.
밑의 글의 리플에 대해서 보고있다가 글을 적습니다.
공탱이푸님의 이야기 처럼 프로퍼티 접근이 엄청나게 늦더군요.
테스트 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에서는 바뀐걸로 알고있는데, 누가한번 테스트 좀…