[JavaScript] 브라우저 렌더링 동작 원리

브라우저 렌더링 동작 원리

특정 웹사이트에 접근한다고 했을 때의 단계를 생각해 보면,
1. 사용자가 브라우저를 실행
2. 접속하고 싶은 사이트의 URL을 입력
3. 브라우저가 입력된 URL의 서버에게 사이트 정보를 받아와 화면에 표시

간단하게 말하자면, 보고자하는 페이지를 서버에 요청한 뒤에 받은 응답을 브라우저에 표현하게 된다. 여기서 브라우저는 우리가 알고 있는 크롬, 익스플로러, 사파리, 파이어폭스 등이고 받게 되는 응답은 HTML, CSS, JavaScript, 이미지 등이 될 것이다.

브라우저의 기본 구조

출처: https://d2.naver.com/helloworld/59361

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

렌더링 엔진

여기서 집중적으로 공부해야 하는 부분인 렌더링 엔진.
렌더링 엔진의 역할을 요청받은 내용을 브라우저 화면에 표시하는 일이다. HTML, XML 문서와 이미지를 표시하며, 플로그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형을 표시할 수도 있다.

파이어폭스, 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었는데, 파이어폭스는 모질라에서 만든 Gecko 엔진을, 사파리와 크롬은 Webkit 엔진을 사용한다.

동작 과정

통신으로부터 요청한 문서의 내용을 얻는 것으로부터 시작하며, 보통 8KB 단위로 전송된다.
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하며, 모든 HTML을  파싱할 때까지 기다리지 않고 배치와 그리기 과정을 진행한다.
네트워크로부터 나머지가 전송되기를 기다리며 받은 내용의 일부를 화면에 표시하기 시작하여 쾌적환 사용 환경을 만들어 준다.

1. DOM 트리 구축을 위한 HTML 파싱
   • 렌더링 엔진은 HTML 문서를 파싱하고, 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환
   • 외부 CSS 파일과 함께 포함된 스타일 요소 파싱
   • 스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성
2. 렌더 트리 구축
   • 렌더 트리는 색상이나 면적과 같은 시각적 속성이 있는 사각형을 포함하며, 정해진 순서대로 화면에 표시
3. 렌더 트리 배치
   • 렌더 트리가 구축된 후, 배치가 시작
   • 각 노드가 화면의 정확한 위치에 표시되는 것을 의미
4. 렌더 트리 그리기
   • UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 그려냄

참고

- https://d2.naver.com/helloworld/59361

- https://velog.io/@gay0ung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9B%90%EB%A6%AC