190430_TIL(웹 브라우저의 동작)

웹 브라우저의 동작

• 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹 페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.

• 브라우저는 동기(Synchronous)적으로 HTML, CSS, 자바스크립트를 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.

• script 태그의 위치에 따른 DOM 객체

  • head 요소 내부에 script 태그를 위치시키면 HTML 요소가 파싱되어 DOM 객체로 변환되기 이전에 자바스크립트가 실행되기 때문에 아직 변환되지 않은 HTML요소를 참조할 수 없다.
  • 반면에, body 요소의 가장 아래에 script 태그를 위치시키면 이미 HTML 파서가 HTML 요소를 모두 파싱하여 DOM 객체를 생성하였기 때문에 자바스크립트가 DOM 조작 시 에러가 발생하지 않는다. 또한, HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.

웹 브라우저의 동작 순서

1. 클라이언트가 서버에게 Request(요청)을 보낸다.

2. 서버가 Response(응답)을 보낸다.

3. 클라이언트가 서버의 응답을 받아서 HTML, CSS, JavaScript, 이미지 등의 파일을 Load한다.

4. 렌더링 엔진의 HTML 파서와 CSS 파서가 HTML, CSS 파일을 파싱(Parsing)한다.

   • 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

   • HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

   • 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

5. 파싱된 결과를 바탕으로 HTML은 DOM tree, CSS는 CSSOM tree, JavaScript는 syntax tree로 변환한다.

6. syntax tree에서 DOM tree와 CSSOM tree를 제어한다.

7. DOM tree와 CSSOM tree가 렌더 트리로 결합된다.

8. 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 표시한다.

참고자료

• 브라우저의 동작 원리