브라우저 렌더링 원리

브라우저 렌더링

브라우저의 동작 원리

1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다.
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다.
5. 개별 노드를 화면에 페인트한다.(or 래스터화)

위는 요약적인 설명이고 좀더 구체적으로 보자면

웹 브라우저의 구조

 

이와같이 브라우저가 구성된다.

User INterface는

주소 표시줄, 이전/다음/새로고침 버튼등이있고

웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를

말한다.

Rendering Engine

HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진

이부분을 프론트엔드 개발자가 제대로 알고 있어야한다.

Browser ENgine

유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

그외 네트워킹 요청을 수행하는 네트워킹파트, 체크박스, 버튼같은

위젯을 그려주는 UI 백엔드파트, localStorage나 Cookie같은

보조 기억 장치에 데이터를 저장하는 Data Persistence가 있다.

그리고 마지막으로 자바스크립트 코드를 싱행하는 자바스크립트

인터프리터가 있다. 크롬의경우는 v8엔진을 사용한다.

---

렌더링 엔진의 목표

1.HTML,CSS,JS 이미지등 웹페이지에 포함된 모든 요소들을

화면에 보여주기 위함

2.업데이트가 필요할 떄, 효율적으로 렌더링을 할 수 있도록

자료구조를 생성한다.

Critical Rendering Path(위와같은 과정을말함)

 

 

위에그림은 간단하게, 아래그림은 상세하기 설명해둔것인데

더간단하게 축약해보자면

1.DOM Tree생성(HTML), CSSOM Tree생성(CSS)

1.html태그 토큰화(StartTag,EndTag)

2.노드객체로 변환된다. (DOM Tree생성)

3.최상위에 Document객체가 생성된다.

 

4.CSSOM트리 생성

 

여기서도 트리구조라, body태그에 속성을 하나 주면 자식들에게도

같은속성이 적용된다.

2.Render Tree생성

화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는

트리 여기서 meta나 display:none같은것은 렌더와 관련없어서

표기되지 않는다.

3.Render Tree배치 - Layout(Reflow)

view포트내에서 요소의 정확한 사이즈를 결정하는 과정

4.Render Tree그리기 - Paint(Repaint)

layout에서 결정된 이미지들이 실제 픽셀로 그려지는 과정이다.

ps.사용자 동작으로 자바스크립트를 동해 애니메이션이나, css변경이 일어날경우

Javascript->Style->**Layout**->Paint->Composite

다시 Layout이발생하는경우

주로 요소의 크기,위치가 변경될 떄 혹은 브라우저 창의 크기가

바뀌었을 떄 다시 발생

Javascript->Style->Layout->**Paint**->Composite

Paint부터 다시 발생하는경우

주로 배경이미지나 텍스트 색상, 그림자등

레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때발생

Javascript->Style->Composite

레이어의 합성만 다시 발생하는 경우

레이아웃과 페인트를 수행하지않고 레이어의 합성만 발생하기에

 

성능상으로 가장 큰 이점을 가진다.

 

 

https://csstriggers.com/

 

이곳에서 참고!

 

- 참고한 페이지

https://www.youtube.com/watch?v=sJ14cWjrNis

https://velog.io/@holasim/Browser-Rendering

Browser Rendering

https://minemanemo.tistory.com/121

Browser의 기본 구조 및 동작 과정