웹 렌더링 엔진 처리과정에 대해 알아보자 🧐

surim014·2021년 8월 14일
0

Web

목록 보기
1/3
post-thumbnail

Webkit 렌더링 엔진의 처리과정 (일반적인 처리과정) 💪

DOM Tree : HTML을 읽고 파싱한 어떠한 계층

  1. 브라우저는 HTML 코드를 받고 읽음
  2. HTML 파싱
  3. DOM Tree라는 어떤 계층을 생성
    • 각각의 DOM Tree는 결국 화면에 어떤 크기로 어떤 색깔로 표현되어야 하기 때문에 CSS코드를 필요로 함

CSSOM Tree : 스타일 시트를 읽고 파싱한 어떠한 계층

  1. 스타일 시트를 받음

    • CSS는 어떤 위치나 색깔을 표시하고 있음
  2. 스타일 시트 파싱

  3. CSS Style 규칙을 구성하고 CSSOM Tree(CSS Object Tree)를 생성

  4. DOM Tree와 CSSOM Tree를 결합 (Attachment)
    - 두 가지를 합쳐서 어떤 엘리먼트에 어떤 스타일을 부여하는 작업을 함

  5. 렌더 트리를 생성

    • 각각의 DOM 트리별로 어떤 스타일 정보를 가지고 있는 지 렌더트리를 다시 실제로 소프트웨어의 어떤 객체 모델로 객체화 시킴

      객체화? key와 value로 된 구조로 만드는 것

  6. 브라우저는 렌더 트리를 읽어 Layout 혹은 Reflow라는 과정을 통해 Dom 노드의 위치와 그래픽을 계산 결정

    • 각각 어디에 배치될 지, 크기는 얼만큼인지가 모두 결정
  7. 렌더트리 완성

  8. 렌더트리를 통해 화면에 실제로 그려주는 페인팅 작업

  9. 화면에 출력

Q. 스크롤 또는 사용자의 입력으로 화면의 위치가 바뀌는 경우의 동작 과정? 🧐

렌더링 엔진은 좀 더 나은 사용자의 경험을 위해 먼저 파싱된 내용부터 화면을 그림

  • 동일한 부분을 제외하고 달라지는 부분(DOM 노드의 레이아웃에 영향을 주는 요소들이 바뀌게 되는 부분)만 파싱하여 렌더트리를 재배치하고 그리게 됨
  • 레이아웃과 관계 없는 스타일적인 요소만 바뀌게 될 경우, 렌더트리 재배치하는 일 없이 다시 그리는 과정만 수행

HTML 파싱 🛠

  • HTML 문서는 주로 <을 열고 어떤 HTML 태그를 쓰고 >를 닫게 되어 있음
  • 아래와 같이 HTML의 기본 형태를 마크업이라고도 함
<html>
  <body>
    <p>
      Hello World
    </p>
    <div>
      <img src="example.png"></div>
    </div>
  </body>
</html>
  • 위와 같은 모습으로 구성이 되어 있음

  • 트리구조를 만들어서 브라우저가 처리하게 됨

    → DOM Tree

HTML 파싱 플로우 (HTML5)

CSS 파싱 🛠

  • CSS는 Key와 Value의 구조로 되어 있음
  • HTML과 다르게 CSS 코드는 브레이스로 key와 value를 지정할 수 있음
  • CSSStyleSheet, 최상위 오브젝트 아래에 어떤 룰들이 있음
  • 객체 하단 트리 구조로 CSS를 가지게 됨

위의 내용은 Web을 공부하며 개인적으로 정리한 내용입니다.

출처 📝

profile
Junior FrontEnd Developer 😎

0개의 댓글