지난 시간에 살펴본 브라우저의 렌더링 과정은 아래 과정으로 이루어집니다. 아마 여기까지는 대부분 아실 내용일텐데요. 서버에서 HTML 파일을 수신HTML 파싱DOM 트리 생성CSSOM 트리 생성자바스크립트 파싱 및 실행DOM과 CSSOM을 결합하여 렌더트리 생성레이어레이아웃페인트Composite 아마 4번의 레이어와 레이어와 7번의 Composite 단계에 대해서는 생소하신 분도 있을 것 같습니다. 오늘은 이 두 단계에 대해 자세히 알아보겠습니다. 나머지 단계에 대해서는 지난 시간에 작성한 입문편 을 참고하시면 되겠습니다 레이어먼저 레이어 트리를 만드는 단계에 대해 알아보겠습니다. 아마 레이어 단계가 생소하신 분들이 많을텐데요.z-index 속성이나 3d transform 속성을 떠올리면 이해가 빠를 것..

오늘은 브라우저가 어떻게 화면을 렌더링 하는지를 알아보고자 합니다. 아마 흔히 보셨을 내용이지만 기억해두기 위해 책과 여러 사이트를 참고하여 정리해보았습니다. (compositor thread까지 다루는 심화편이 있으니 같이 보시면 더 풍부한 이해를 하실 수 있습니다 🤓 ) 본격적인 내용으로 들어가기 전에 과정을 간단히 보여드리겠습니다. 브라우저의 렌더링은 아래와 같은 순서로 이루어집니다.서버에서 HTML 파일을 수신HTML 파싱DOM 트리 생성CSSOM 트리 생성자바스크립트 파싱 및 실행DOM과 CSSOM을 결합하여 렌더트리 생성레이아웃페인트1. 서버에서 HTML 파일을 수신우리가 www.example.com이라는 주소로 접근한다고 가정해봅시다. 이렇게 호스트명으로만 구성된 요청에 대해 서버는 암묵적..

브라우저의 렌더링 과정에서 빼놓을 수 없는 부분이 HTML 파싱입니다. 오늘은 HTML 파싱에 어떤 과정들이 필요한지 차근차근 알아보도록 하겠습니다. 설명에 앞서 이해를 도울 수 있는 그림을 준비했습니다. 사용자가 페이지에 접속했을 때 브라우저는 서버에 HTML 파일을 요청합니다. 이때 서버는 메모리에 바이트 단위로 저장된 HTML 파일을 응답하게 됩니다. 10110100... 같은 형태로 보내게 되는 것이죠. 브라우저의 HTML 파서는 이 바이트 형태의 문서를 문자열로 변환합니다. 이때 response header에 담긴 content-type을 참고합니다. 예를 들어 content-type: text/html; charset=utf-8라고 되어있다면 utf-8 방식으로 인코딩을 하는 것이죠. cont..