Q) 브라우저의 작동방식에 대해서 설명해주세요.

브라우저 작동방식은 단계별로 이해하는 것이 좋을 것 같다.
🔗 참고링크

브라우저의 핵심 기능은 웹페이즈를 서버에 요청하고 응답받아 표시하는 역할이다.
다음은 단계별로 정리해보겠다.

• Rendering Engine
  1. HTML과 CSS를 로드한다.
  2. HTML과 CSS는 파서에 의해서 DOM tree와 CSSOM tree로 파싱된다.
  3. DOM tree와 CSSOM tree를 기반으로 Render tree를 생성한다.
• Javascript Engine
  1. Javascript를 로드한다.
  2. Javascript를 파싱하여 Syntax tree를 생성한다.

여기서 중요한 점!

HTML 파서는 HTML 파일을 파싱하다가 script 태그를 만나면 제어 권한이 script태그로 선점된다.
HTML 파싱을 중단하고 script태그의 Javascript를 파싱하며 파싱이 끝나면 중단했던 HTML 파싱 위치로 돌아가 마저 파싱한다.

이렇게 브라우저는 동기적으로 동작하기 때문에 script 태그 위치가 중요해진다.
script 태그를 body보다 하단에 위치시키거나
script 태그에 async/defer 속성을 적용하여 로딩 속도를 개선할 수 있다.

🔗 참고링크

예비답변
브라우저는 웹페이지를 서버에 요청하고 응답받아 표시하는 역할을 수행합니다.
먼저 Webkit의 Rendering Engine은 HTML 파일과 CSS 파일을 로드하고 이를 파서를 이용하여 파싱합니다.
HTML 파일은 DOM Tree로 CSS 파일은 CSSOM Tree로 파싱되어 이 둘을 기반으로 Render Tree를 생성합니다.
Javascript 파일은 HTML 파서가 HTML 파일을 파싱하다가 script 태그를 만나면 HTML 파싱을 중지하고 script의 내용을 파싱하여 Syntax Tree를 생성합니다. 이후 다시 HTML 파일을 마저 파싱하고
DOM Tree, CSSOM Tree, Syntax Tree를 이용하여 페이지를 그리는 Painting 작업을 수행합니다.