테이블 속에서 rows,cell 가 빠를까? querySelectorAll 이 빠를까?

테스트 소스
function test(){
let icnt = 0 , t, table;
t = performance.now()
document.querySelectorAll("#sot2 > table > * > tr >td,#sot2 > table > * > tr >th").forEach((td, i) => {
icnt+=td.colSpan;
});
;
console.log('time',performance.now()-t,icnt);
icnt = 0;
t = performance.now()
table = document.querySelector("#sot2 > table");
for(const tr of table.rows){
for(const td of tr.cells){
icnt+=td.colSpan;
}
}
console.log('time',performance.now()-t,icnt);
}

------=-------
100x100의 테이블
즉, td가 10000개

test()
time 4.475000023376197 10000
time 4.895000020042062 10000

약 4.x ms로 각각 나오는데
계속 해보면 8.x도 나온다.그냥 환경에 따른 오차인듯
결론은 

테이블 속에서 rows,cell 가 빠를까? querySelectorAll 이 빠를까?
=> 둘이 서로 비슷하다.

td중 특정 td를 지정한다면 querySelectorAll 를 사용하는 것이 편할 것이다.(class 나 attribute 지정이 가능하므로)

3번째 tr같은걸 선택할 경우
querySelectorAll 에서는 thead, tbody 등으로 감싼 경우 thead나 tbody 속의 순서를 사용하기에 원하는 결과와 다를 ㅅ 있다.
table.rows 는 thead와 tbody를 무시한 전체 tr을 가져온다. 즉, 전체 순서로 할 경우 table.rows가 더 알맞을 것이다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자
공대여자
공대여자
공대여자
공대여자