브라우저의 단일스레드와 repaint, reflow

속 깊은 자바스크립트의 6장 : 브라우저 환경에서의 자바스크립트를 요약

단일스레드

---

setTimeout() 시간을 0 으로 설정해 놓는다면 어떤 일이 벌어질까?

직관적으로 바로 시작된다고 생각했다.

물론 맞는 얘기일수도 있다. 하지만 정확히 실행 시간이 아닌 실행 큐에 들어가는 시간을 이야기 한다.

자바스크립트는 단일스레드다.

일하는 놈이 한 놈 밖에 없다. 한 놈이 모든 실행을 처리한다. 

이 놈이 일 할 실행 순서를 담아 놓는 큐가 있는데 setTimeout()의 시간설정은 큐에 들어가는 시간을 설정하는 것이다.

만약 setTimeout(func, 0) 으로 실행될 함수 func가 큐에 들어갔는데 그보다 앞서 실행순서를 기다리고 있던 함수들이 있다고 한다면

함수들의 실행이 모두 끝난 후 func가 실행된다.

setTimeout(func, 2000); 라고 한다면

2초 후에 실행한다는 것이 아니라는 얘기다.

2초 후에 큐에 들어간다는 것이다.

큐에 입장했는데 자기 보다 먼저 들어온 놈들이 있으면 어쨌든 기다려야 한다.

그러므로 2초 후 실행이 보장되지 않는 것이다.

이것이 브라우저 환경에서 자바스크립트가 돌아가는 환경이다.

싱글스레드.

setInterval() 역시 동일한 방식으로 이해해야 의도한대로 사용할 수 있다.

웹 워커

---

웹에서 일하는 놈은 한 명 뿐이다.

이것을 다중 쓰레드로 사용할 수 있게 만들어 주는 것이 웹 워커.

브라우저 환경에서 벗어나 별도의 스레드를 만들어서 사용할 수 있게 해준다.

브라우저 환경 밖에서 생성된 스레드이기 때문에 DOM을 직접 제어할 수는 없다.

DOM repaint

---

위치를 제외한 css가 변경될 때를 의미함.

DOM reflow

---

위치와 class가 변경될 때를 의미함. 브라우저 창 크기가 변경될 때도 발생함.

한 요소가 reflow가 일어나면 그 요소의 자식 요소들도 reflow가 일어남.

브라우저마다 reflow를 처리하는 방식은 다르지만 일반적으로 스레드 큐 하나에 자바스크립트 실행이 끝나면 실행한다.

repaint 보다 자원 소모가 크다.

DOM repaint reflow 최소화

---

크기가 변경될 DOM을 웹페이지 아래쪽에 배치하거나 변경될 요소의 자식 요소들을 많이 만들지 않는 것이 좋다.

그러므로 postion absolute나 fixed로 설정하는 것이 좋다.

상위 요소(wrapper)를 relative 속성을 주고 하위 요소는 absolute나 fixed속성을 주어서 top left를 따로 지정하지 않고 적용시키는 것도 방법이다.

이럴 경우 상위 요소(wrapper) 위치가 변경될 경우 하위 요소들만 reflow가 일어난다.

여기서 상위 요소(wrapper)는 reflow가 일어나지 않는 점이 중요하다.

요소 추가/삭제 시 DOM reflow

---

W3C에서 권장하는 DOM요소 추가 방식은 Document.createDocumentFragment() 객체를 사용하는 것이다.

DOM과 관련한 성능최적화 방안의 핵심은 최소한으로 변경시키는 것이다.

DOM 탐색 최소화

---

다음은 DOM을 탐색하는 대표 함수들이다.

document.getElementById("myElement");

document.getElementsByClassName("myElement");

document.getElementsByTagName("myElement");

document.querySelector("div#cssSelector");

document.querySelectorAll("div.myClass");

DOM을 탐색할 경우에도 컴퓨팅 자원을 소모하기 때문에 최소화하는 것이 좋다.

DOM 탐색은 자바스크립트 클로저 검색보다 자원을 더 소모한다.

DOM 탐색시 자바스크립트 변수에 담아두고 접근하는 것이 좋다.

따라서 캐시, 메모제이션 패턴을 활용하는 것도 좋다.