read : 테이블 속에서 rows,cell 가 빠를까? querySelectorAll 이 빠를까? : 기술 #table #rows #cells #queryselectorall::공대여자홈

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

작성자 공대여자

작성 : 2020-11-05 13:37 조회 : 648
지남 1일간

2020-11-05 - 2020-11-05

좌표
첨부된 파일이 없습니다.

테스트 소스

	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}}

내용이 너무 많습니다!

-

목록형 📷 갤러리형

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	17101
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	27539
공지	[공지] 기술 게시판	mins01	06/24 15:10	27483

일	월	화	수	목	금	토
12.1	12.2	12.3	12.4	12.5	12.6 ui_booklet e-book 1	12.7
12.8	12.9	12.10	12.11 검색엔진 로봇의 크롤링 제어 - robots.txt 검색엔진 인덱스 제어하기 - noindex , nofollow	12.12	12.13	12.14
12.15	12.16 JS에서 시간 출력 new 1 js 의 setCustomValidity 사용한 비번 체크 new pixijs 2D WebGL renderer new 1 canvas의 width와 height 의 setter를 wrap 처리 하는 방법 new	12.17 HTML Element 상속 후 element 등록하는 방법 new showPicker(). input 이나 select의 선택시 픽커 보이게 하는 메소드 new 1	12.18	12.19	12.20 vscode 에서 코파일럿 테스트 new vscode 에서 코파일럿 테스트 일반 질문 new	12.21
12.22	12.23	12.24	12.25	12.26	12.27	12.28
12.29	12.30	12.31	1.1	1.2	1.3	1.4