52일차 (CS 29,30)

브라우저 렌더링 과정 (예를 들어 화면에서 DOM이 어떻게 결정되고, CSS는 어떻게 입혀지는지 등)

 먼저 브라우저는 서버로부터 받은 HTML 문서를 파싱 하여 DOM 트리를 구성한다. 이후 <style> 태그 내의 CSS를 파싱 하여 CSSOM(CSS Object Model) 트리를 구성한다. 이후 DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 렌더트리가 생성된 후, 각 노드의 위치와 크기를 계산하는데, 이를 Reflow라고 한다. Reflow 단계를 통해 계산된 위치와 크기 정보를 바탕으로 브라우저는 각 노드를 화면에 그린다. 이러한 과정을 지나고 나면 마지막으로 여러 레이어 그려진 내용을 합쳐 최종적으로 화면에 표시한다.

Event bubbling 과 capturing을 비교

 Event bubbling은 이벤트가 실제로 발생한 하위 요소에서 시작해서, 가장 상위의 부모 요소까지 올라가는 단계를 의미한다. 예를 들어, 버튼을 클릭하면 해당 버튼에서 이벤트가 발생하고, 그 이벤트는 부모 요소, 그리고 그 부모의 부모 요소를 거쳐 상위 요소로 전파되는 것이다.

 

 Event capturing은 가장 상위 부모 요소에서 시작하여, 실제로 이벤트가 발생한 요소까지 내려오는 단계를 의미한다. 예를 들어, 페이지가 중첩된 여러 요소가 있을 때, 가장 바깥쪽의 요소에서 시작하여 실제 이벤트가 발생한 요소까지 이벤트가 전파되는 것이다.

 

 두 가지를 비교하자면 먼저 위에서 언급한 것처럼 출발점이 다르다는 점이 있고, 등록 방법의 차이가 있는데, 자바스크립트에서 이벤트 리스너를 등록할 때, 세 번째 인자로  'true'를 전달하면 캡처링 단계에서 이벤트를 처리하게 되고, 'false'인 경우 버블링 단계에서 이벤트를 처리한다는 차이점이 있다.