브라우저의 렌더링 방식 이해하기

웹서비스는 브라우저를 통해 유저에게 서비스를 제공합니다. 따라서 브라우저에 대한 이해가 필수적입니다. 브라우저가 어떤 방식으로 html, css, javascript를 해석하고 로드하는지 알아봅시다.

우선 브라우저의 기본 구조를 알아봅시다.

1. 사용자 인터페이스 - 주소표시줄, 이전/다음버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.

2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

3. 렌더링 엔진 - 요청한 콘텐츠를 화면에 표시.

4. 통신 - http 요청과 같은 네트워크 호출에 사용. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에설 실행됨.

5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행

7. 자료 저장소 - 쿠키 같이 모든 종류의 자원을 하드 디스크에 저장. HTML5 명세에는 브라우저가 지원하는 웹데이터 베이스가 정의되어 있다.

DOM 트리를 먼저 생성하고 css를 만드는 렌더트리, 코드 중간에 자바스크립트를 불러오면 파싱이 중단되고 자바스크립트가 해석됩니다.

자바스크립트의 해석을 지연하고 싶다면 defer 속성을 사용할 수 있습니다.

참고사이트 : https://d2.naver.com/helloworld/59361