테이블 속에서 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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1