📘 Browser Rendering

[meɪ]·2022년 1월 3일

Browser Rendering

3. Today I Learned. Basic

목록 보기

9/11

Preface

📌 개발 공부 6개월 차인 to-be 개발자의 자습 blog🙂ﾠJan 02 ~ 08, 2022

Browser Components

User Interface
: 주소 표시줄, 이전/다음/새로고침 button, bookmark 등 web page를 제외하고 사용자와 상호작용하는 UI
Browser Engine
: user interface와 rendering engine을 연결, rendering engine에 작업 요청
Rendering Engine
: HTML과 CSS를 parsing하여 Render Tree로 합친 후 요청한 web page를 표시
Networking Module
: 각종 network 요청을 수행
Data Storage
: localStarage나 cookie같은 browser의 memory를 활용하여 data 저장
cookie에 저장되어 있는 자료는 통신하지 않고 찾기만 한 후 rendering engine에 전달
JavaScript Engine
: JavaScript code를 실행하는 interpreter
UI Backend
: checkbox나 button같은 기본적인 widget을 그림

Rendering

STEP 1. construction

사용자가 borwser로 web site에 접속
    → browser가 DNS를 통해 server의 IP 주소를 파악
    → browser가 IP 주소에 있는 server와 3 Way Handshake 완료
    → browser가 server에 HTTP Request를 하며 data 요청
    → browser가 server로부터 HTTP Response로 data 받음

※ 이 색깔은 Rendering
cf. 각 browser의 engine

Blink : Chorme, Opera, Samsung Internet, MS Edge, Whale, Brave
Webkit : Safari
Gecko : Firefox

※ Critical Rendering Path
아래의 Critical Rendering Path를 줄이면 browser가 webpage를 그리는 데에 걸리는 시간을 단축해 성능 향상에 기여

    → server로부터 받은 data에 HTML을 parsing하여 Node끼리 연결한 DOM Tree 생성
    → style tag가 나오면 CSS를 parsing하여 CSSOM Tree 생성
        (CSSOM Tree : DOM이 어떻게 화면에 표시될지 알려줌)
    → script tag가 나오면 JavaScript engine에게 권한을 넘겨 JavaScript code를 parsing하여 AST 생성하고 실행
    → DOM Tree + CSSOM Tree = Render Tree 생성
        (Render Tree : 화면에 표시되어야 하는 모든 Node의 contents, style 정보를 포함하는 tree)
     ※ meta tag나 display: none; 같은 건 renderring과 관계가 없기 때문에 Render Tree에 포함되지 않음

STEP 2. operation

    → Layout (Reflow) || rendering engine이 viewport 내에서 요소들의 크기와 위치를 계산해 Render Tree에 있는 Node를 배치
e.g. %, em, rem같은 건 기기의 viewport에 맞게 px로 변환됨
    → Paint (Repaint) || UI backend가 Render Tree의 Node들을 돌면서 화면에 UI를 그리기
    → Composition (layout 합성) || Node들의 layer를 순서대로 구성