브라우저2 이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되는 환경을 보면 마치 동시에 처리되고 있는 것처럼 보이게 되는데 (동시성) 어떻게 하나의 작업만을 할 수 있는 단일 스레드인데 '어떻게 동시성'을 지원하는 것일까에 대한 고민으로부터 이 포스팅을 정리해보려고 합니다. 브라우저 환경을 그림으로 표현 (https://meetup.toast.com/posts/89) 위 이미지에서 보면 비동기 호출을 위해서는 자바스크립트 엔진이 아닌 Web APIs 영역에서 이루어 진다고 표현되어 있다. 이벤트루프, 태스크 큐도 엔진 외부에 위치해 있는 것을 볼 수 있다. http://stackove.. 2021. 10. 15. 브라우저 렌더링 성능 최적화 방법 Reflow, Repainting 흐름 맨 처음 브라우저가 로딩될 때 렌더링 과정을 통해 화면이 그려짐 -> 그려진 화면은 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 재구성 됨 Reflow DOM이 추가, 삭제 되거나 DOM 요소의 너비, 높이, 위치 등의 기하학적 영향을 주는 CSS 내용이 변경될 경우 '렌더 트리'가 재구성 된다. 이것을 'Reflow(재배치)' 라고 한다. Repaint 기하학적 영향을 주지 않는 CSS 속성이 변경되었을 경우에는 Reflow 과정을 건너뛰고 Paint 과정부터 수행한다. 'Reflow'가 일어나면 전체 픽셀을 다시 계산하여 재배치하는 과정을 거치기 때문에 부하가 ↑ 'Repaint'는 재배치 과정을 건너뛰고 화면에 그리는 작업만 수행하기 때문에 .. 2021. 10. 14. 이전 1 다음
