[Frontend] 브라우저와 브라우저 렌더링 원리

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ 브라우저

웹 브라우저(Web browser)는 WWW(World Wide Web)에서 콘텐츠를 표시하고 탐색하는 소프트웨어 프로그램이다.

현재 자주 쓰이는 브라우저의 종류로는 구글 크롬, 마이크로소프트 엣지, 애플 사파리, 모질라 파이어 폭스, 오페라 등이 있다.

 

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML 파일이지만 PDF나 이미지 또는 다른 형태로 존재할 수도 있다.

자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다.

 

브라우저의 주요 구성 요소는 다음과 같다.

• 사용자 인터페이스(UI) : 주소 표시줄, 이전/다음 버튼 등. 요청한 페이지를 보여주는 창을 제외한 나머지 부분.
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
• 렌더링 엔진 : 요청한 콘텐츠를 표시. (ex. 사용자가 HTML 요청 시 HTML과 CSS를 파싱해 화면에 표시함)
• 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨.
• UI 백엔드 : 콤보 박스와 창 등 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스. OS 사용자 인터페이스 체계를 사용한다.
• 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행함.
• 자료 저장소 : 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있음.

 

브라우저의 주요 구성 요소

 

 

✅ 브라우저 렌더링의 원리

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다.

참고로 크롬과 사파리는 웹킷 엔진을 이용하고 파이어 폭스는 모질라에서 만든 게코 엔진을 사용한다.

 

렌더링 엔진은 다음과 같이 동작한다.

1. HTML 파싱 후, DOM(Document Object Model) 트리 구축.
2. CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축.
3. JavaScript 실행.
   • 이때 HTML 중간에 script가 있다면 HTML 파싱이 중단됨.
4. DOM과 CSSOM을 조합하여 렌더 트리(Render Tree) 구축.
   • 이때 화면에 보이지도 않고 공간을 차지하지 않는 것은 트리에 들어가지 않음. (ex. { display: none; })
5. viewport 기반으로 렌더 트리의 각 노드가 가지는 정확한 위치와 크기 계산
   • viewport는 메타 뷰포트 태그에 의해 결정되거나 해당 태그가 없으면 기본 viewport 너비인 980px 사용.
6. 계산한 위치와 크기를 기반으로 화면에 그림

 

Critical Rendering Path

 

 

 

🔍 참조

What is a browser? https://www.computerhope.com/jargon/b/browser.htm

브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361

HTML Critical rendering path의 이해 https://blog.asamaru.net/2017/05/04/understanding-the-critical-rendering-path/