브라우저 동작방식

김민지·2022년 9월 24일

백엔드로드맵

목록 보기

4/13

웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다

사용자 인터페이스: 사용자가 접근할 수 있는 영역
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타냅니다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱 하여 화면에 표시합니다.
브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다.
통 신: HTTP요청과 같은 네트워크 호출에 사용됨
JS 엔진: 자바스크립트 코드를 해석하고 실행
UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림
자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스

렌더링 엔진은 위에서 설명한 것처럼 요청받은 내용을 브라우저 화면에 표시해주는 역할을 한다. 브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다르기 때문에 크로스 브라우징 이슈가 발생하곤 한다.

위 과정까지 만으로 웹 페이지를 화면에 나타내는 것은 충분합니다. 하지만 Javascript는 어떻게 처리가 될까요? Javascript 또한 렌더링 엔진에서 처리가 될까요? 아닙니다.
자바스크립트는 자바스크립트 엔진이 처리합니다. HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘깁니다. 제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 Javascript 코드 또는 src 속성에 정의된 Javascript 파일을 로드하고 파싱 하여 실행합니다. Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개합니다.
이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리합니다. 하지만 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 어떻게 될까요? 당연히 에러가 발생할 것입니다.
이것이 HTML 파일에서 Javascript 코드를 <body>태그 하단에 위치시키는 이유입니다.

안녕하세요!