[기타]웹 브라우저 동작 방식, DOM에 관하여

- 웹 브라우저가 내부적으로 어떻게 동작하여 화면에 보여지는지 심플하게 정리한다.

- 자바스크립트 엔진과 어떤식으로 맞물려 동작하는지 심플하게 정리한다.

---

 웹 개발자인데 가장 기본적인 개념인 DOM 개념과 웹 브라우저 동작 방식을 잘 모르면 안 될 것 같아서 간단하게라도 정리하여 흐름을 이해해 두려고 한다. 자세한 디테일은 타블로그 등(출처)에 너무 잘 나와서 여기서는 빠르게 훑을 수 있도록만 정리한다.

 

1.브라우저 동작 순서

• 브라우저의 여러 구성 요소들 중, HTML, CSS를 파싱하여 브라우저에 화면을 표시하는 핵심 역할을 하는 요소가 '렌더링 엔진'
• 렌더링 엔진은 브라우저마다 각각 다르다. 크롬, 사파리는 웹킷(Webkit), 파이어폭스는 개코(Gecko)를 사용한다.
  
  • 참고로 크롬은 다른 브라우저들과 다르게 각각 탭마다 렌더링 엔진 인스턴스를 개별로 유지한다. 멀티 프로세스 개념이 적용된다.

 

 

본격적인 동작 과정의 예시 그림은 아래와 같다.

 

웹킷 엔진 동작 과정(출처: https://d2.naver.com/helloworld/59361)

 

• HTML요소는 HTML파서를 통해 브라우저가 코드를 이해할 수 있게 파싱함
• 파싱된 요소들로 DOM 트리를 만든다.
• CSS, style 요소 등은 CSS파서를 통해 CSSOM을 만든다.
• DOM과 CSSOM을 합쳐서 '렌더 트리'를 만든다.
• 렌더트리에서 레이아웃을 실행하여 그리기(paint)를 한다.

렌더 트리를 만들 때, display: none 요소는 렌더 트리에서 배제한다.

 

 

2.기타 - 자바스크립트 엔진과의 동작 과정 

 DOM생성을 하다가 <script> 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 자바스크립트 실행이 완료되면 다시 브라우저가 중지했던 시점부터 DOM 생성을 재시작한다.

 브라우저는 이와같이 동기적인 방식으로 작동한다. 자바스크립트 자체는 비동기적으로 작동하지만 렌더링엔진과 자바스크립트 엔진이 맞물리는 과정은 동기적으로 진행되는 것 같다. 우리가 흔히 <script>태그를 아래에 두는 이유도 위에서 설명한 이유때문이다.

• DOM이 완성되지 않은 채 DOM에 접근하면 에러 발생 가능성이 있다.
• <script>태그를 중간이나 위에 두면 HTML요소들이 스크립트 로딩 지연으로 인해 렌더링 지장을 받을 수 있다.

 

 중간에 생략된 요소들이 있다. (꽤 많다) 큰 흐름만 알고 가고 추후 더 필요하거나 관심이 생길 때 디테일을 붙이거나 타블로그를 참고해 공부하면 좋겠다.

 

 

출처 : https://baek-kim-dev.site/140, https://d2.naver.com/helloworld/59361, https://baek-kim-dev.site/140