[브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (2)

이전글 참고하기

2022.04.07 - [2. 개발 공부/HTML+CSS] - [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1)

[브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1)

 

※ 필자는 초초초보자입니다. 틀린 내용은 언제든지 피드백 부탁드립니다.

 

기본적인 공부 자료의 출처는 Naver D2 "브라우저는 어떻게 동작하는가?" 입니다.

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

---

✅ 브라우저가 콘텐츠를 화면에 보여주는 원리(동작 원리)

---

앞서 [브라우저 구성 요소]를 보며 아래의 그림을 확인했다.

출처: 네이버 D2, https://d2.naver.com/helloworld/59361

 

 

사용자가 [사용자 인터페이스]를 통해 웹페이지를 요청(request)하면,

1) 브라우저 엔진과 렌더링 엔진이 [통신]을 통해 서버에 HTTP 요청(request)을 한다.

2) 서버로부터 응답(response)을 받는데, 이때 HTML 문서, CSS, JavaScript, 이미지 파일 등을 전송 받는다.

     ‣ 문서의 내용은 보통 8KB 단위로 전송된다고 한다.

     ‣ 전송 받은 파일은 개발자 도구를 통해서도 확인할 수 있다. (아래 그림과 같이)

3) 받은 파일은 [렌더링 엔진]에게 전달되고

4) [렌더링 엔진]은 기본적으로 아래와 같이 동작한다.

     ‣ 자세한 내용은 #별첨1에서 정리하기로 한다.

출처 : 네이버 D2, https://d2.naver.com/helloworld/59361

     ‣ 렌더링 엔진은 (가능하면 빠르게 사용자에게 내용을 표시하기 위해서) 모든 HTML을 파싱할 때까지 기다리지 않고

        배치(리플로)와 그리기 과정을 시작한다.

     ‣ 즉, 네트워크로부터 나머지 내용(HTML 문서, CSS 파일, 이미지 등)이 전송되기를 기다리는 동시에

        받은 내용의 일부를 먼저 화면에 표시한다고 한다.

        때문에 통신은 병렬 스레드에 의해서 진행될 수 있다고 한다.

     ‣ 신기하게도 렌더링 엔진은 (통신을 제외하고) 거의 모든 경우에 단일 스레드로 동작하며

        파이어폭스, 사파리는 렌더링 엔진의 스레드가 브라우저의 주요한 스레드이며

        크롬은 렌더링 엔진의 스레드가 탭 프로세스의 주요 스레드라고 한다.

        (어떻게 #별첨1의 과정이 단일 스레드로 동작될 수 있는건가)       

 

여기까지가 웹 페이지를 화면에 나타내는 과정이라고 한다.

하지만, 여기에서 끝내기엔 한가지 아쉬운게 있다. "JavaScript"이다.

글이 너무 길어지니, 자바스크립트의 처리 방식은 다음 글에서 공부해야겠다.

 

 

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

출처2 : https://pstudio411.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

 

 

---

⚠️ 별첨1. 렌더링 엔진의 동작 과정

---

출처 : 네이버 D2, https://d2.naver.com/helloworld/59361

렌더링 엔진은 문서를 받아

1) HTML 문서를 파싱하고, 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환한다.

     ‣ 파싱(parsing)은 구문 분석이라고도 하며,

        어떤 페이지에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다. (출처 : 사이언스올)

     ‣ '파싱을 한다는 것'은 일련의 문자열을 의미있는 토큰으로 분해하고

        그 토큰들을 구문 트리(parse tree)로 만드는 과정을 말한다. (출처 : 위키백과)

     ‣ 여기에서 말하는 구문 트리(aprse tree)는 아래와 같이 트리 구조로 생긴 것을 말한다. (출처 : 위키백과)

          e.g. S(문장)는 N(명사)과 VP(동사구)로 분해되며, VP(동사구)는 또 V(동사)와 NP(명사구)로 분해되고, NP는 D(관사)와 N(명사)로 분해될 수 있다.

     ‣ 노드(node)라는 것은 트리(tree) 구조에서 데이터의 계층을 나타내는 항목을 말하는데

        HTML의 DOM(문서 객체 모델; 문서의 각 항목을 계층으로 표현한 인터페이스)은 이 노드에 정보를 저장하고 있다.

     ‣ 즉, 'DOM 노드로 변환한다'는 것은 아래와 같은 계층적 구조(DOM 트리)로 변환한다는 말이다.

그림 출처 : tcpschool, http://www.tcpschool.com/javascript/js_dom_node

 

2) 그 다음 외부 CSS 파일과 함께 스타일 요소도 파싱하고,

     ‣ 1)의 HTML 문서와 같이 외부 CSS 파일(.css)도 파싱을 한다.

     ‣ 이때 CSS 구문을 분석하면(파싱하면) CSSOM 트리로 변환된다고 한다. (출처 : 하단 참고자료1)

 

3) 스타일 정보와 HTML 표시 규칙은 "렌더 트리(render tree)"라고 부르는 또 다른 트리를 생성한다.

     ‣ 1)과 2)에서 언급한 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 형성한다. (출처: 하단 참고자료2)

     ‣ 렌더 트리(render tree)는 아래 그림과 같이 색상, 면적과 같은 시각적 속성이 있는 사각형을 포함한 트리이며

        정해진 순서에 따라 화면에 표시된다.

     ‣ DOM 트리, CSSOM 트리, Render 트리를 정리하면 아래와 같은 모습이라고 한다.

그림 출처 : web.dev Ilya Grigorik; https://web.dev/critical-rendering-path-render-tree-construction/

 

4) 렌더 트리 생성이 끝나면 [배치]가 시작된다. (배치 또는 리플로)

     ‣ 여기에서 말하는 [렌더 트리 배치]라는 것은 각 노드가 화면의 정확한 위치에 표시되는 것을 말한다.

     ‣ 노드는 앞서 말한 것과 같이 트리 구조에서 데이터 계층을 나타내는 항목을 말한다.

        쉽게 말해서 위의 그림에서 트리를 구성하는 각 항목을 노드라고 생각하면 될 것 같다.

     ‣ 참고자료2의 Ilya Grigorik님에 따르면 "렌더 트리(render tree)에서 레이아웃을 실행하여 각 노드의 기하학적 형태(치수, 모양, 상대적 위치 등)을 계산"하는 단계라고 한다.

 

5) 이후 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 [그리기 과정]을 수행한다.

     ‣ 픽셀을 화면에 렌더링하는 과정이라고 한다.

    ‣  즉, 화면에 콘텐츠를 보여주기 위해 그리는 작업이라고 할 수 있다.

 

 

사실 이 내용도 굉장히 간단하게 정리된 것이며, 각각의 과정을 더 상세하게 정리하기 힘들 것 같다.

https://d2.naver.com/helloworld/59361 글을 보면 1~5까지의 과정을 각각 상세하게 설명해주고 있으니

꼭 시간 내서 읽어보면 좋을 것 같다.

(파싱 과정, 파싱 트리가 변환되는 과정과 규칙, DOM 트리 변환하는 방법 예시, DOM트리와 CSSOM 트리를 통해 렌더 트리를 구축하는 과정, 배치의 경우 비동기 배치/동기 배치 등)

 

---

별첨 출처 및 참고자료1 : https://pstudio411.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

별첨 출처 및 참고자료2 : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko 또는 https://web.dev/critical-rendering-path-render-tree-construction/