DOM 작업은 느리다.
-
querySelector와 같은 메서드들은 기본적으로 DOM tree를 탐색하는 루프를 수행
-
화면 갱신(reflow, repaint)을 유발
-
루프문에서는 DOM 메소드 호출을 최소화
-
DOM을 조작하는 작업은 모아서 한 번에 처리
<ul id="datalist"></ul>
const hugeArray = Array.from({ length: 1000 });길이가 1000인 배열을 반복해서 랜덤 숫자를 생성하는 코드를 예시로 보자.
<li>${Math.random()}</li>1) 느린 방식
hugeArray.map(
()=> dataList.innerHTML += `<li>${Math.random()}</li>`
);반복문을 돌며 그 안에서 DOM을 조작
2) 빠른 방식
let content = "";
hugeArray.map(
()=> content += `<li>${Math.random()}</li>`
);
dataList.innerHTML = content;단 한번의 DOM 조작
속도 차이가 엄청난 것을 알 수 있다.
색깔만 바꾸는 repaint의 경우는 다행인데 크기가 늘어나면 width: 100%와 같은 옵션도 적용되어 있는 요소도 있을 수 있어 조상의 조상, 자식요소, 형제 요소등의 위치도 변경해야 하는 reflow를 조심해야 한다.
Number
자바스크립트에서 숫자를 표현할 때 Number type을 이용한다.
1이라는 숫자만 저장할 때 실제로 wrapper object 방식으로 사용하여 HEAP 영역에 할당을 하고 stack이 해당 HEAP을 포인팅하는 방식이다.
- 64비트를 할당
- 값을 넣고 빼는 오버헤드가 크다.
하지만 모던 웹브라우저에서 스택만 사용할 수 있도록 최적화를 지원
모던 브라저는 숫자가 정수일 경우에 스택만 이용하도록 제한해주는 최적화를 지원해주며 태그 비트를 사용하여 stack만을 이용하거나 heap까지 이용
((a+b) / 2 ) | 0 을 이용하면 floor와 같은 효과 (32비트 이용만으로 floor와 같은 효과)
Array 최적화
const a = new Array();
a[0] = 1;
a[1] = 2.3;
a[2] = 'str';위와 같은 코드가 있을 때, 배열안에 다양한 타입을 넣을 수 있지만 하나씩 초기화를 하면 자바스크립트의 엔진은 배열 전체를 컨버팅하게 된다.
만개의 길이를 가진 배열을 다 숫자로 채워넣고 마지막에 str을 넣으면 배열 전체를 variant type을 가진 array로 변경하게 되는데 처음부터 variant type이라는 힌트를 제공해주면 나중에가서 전체가 컨버팅 되는 것을 방지할 수 있다.
반복문의 다양한 방식
어떤 배열을 반복할 때 다양한 방식들이 존재하지만 for문이 가장 빠르다.
Event Binding 과 Event Delegation
table 태그 안에 수백개, 수만개의 td 태그들이 존재할 때 버블링을 활용하여
Event Delegation을 한다면 DOM을 다루는 코드가 적어지게 된다.
