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


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

관련해서 적은 글.
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에서는 바뀐걸로 알고있는데, 누가한번 테스트 좀...

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.18
4.19
4.20
4.21
4.22
4.23
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4