아래의 글은 여러 좋은 글들을 발췌해 모아 편집한 내용입니다.
발췌의 출처는 제일 하단에 모아놓았습니다.
렌더링 엔진
렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다.
브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다.
➕ 웹킷(WebKit)이란? 브라우저 렌더링 엔진의 일종.
웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크.
각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.
접두어로 붙는 css속성으로 브라우저 엔진마다 조정해줄 수 있다.
moz-: 파이어폭스 브라우저에 적용
-ms-: 익스플로어에 적용, 보통 생략
-o-: 오페라에 적용
-webkit-:구글, 사파리 브라우저에 적용
브라우저 렌더링 과정
DOM tree 생성 → CSSOM tree 생성 → Render tree 생성 → 레이아웃 → 페인트
html 파싱 → html DOM 생성 → DOM tree 생성
- 바이트 → 문자 → 토큰 → 노드 → DOM의 순서를 거처서 만들어진다.
💡 토큰이란? html이 맞는지 대조하는 과정. 토큰화라고 부른다.
- DOM은 document object model(문서 객체 모델)의 약자
- 브라우저에 기본 내장된 API(DOM API). 브라우저에서만 사용 가능하다.
- JS가 html 문서를 해석하기 위해 파싱한 결과물이며 자바스크립트로 DOM에 접근하여 제어가 가능하다.
💡 파싱(parsing)이란? 브라우저 렌더링 엔진이 HTML 파일을 위에서 아래로 한 줄씩 읽어 내려가는 것
- DOM은 마크업과 1:1 관계를 성립
- 브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성합니다. 생성된 파싱 트리를 기반으로 DOM 트리를 생성합니다.
- DOM tree는 하나하나의 node로 이루어진다.
➕ DOM tree의 node(노드)란? 가지라는 뜻. 부모와 자식관계로 묶여있다. id나 class 등의 선택자를 통해 접근이 가능하다.
- SSR, CSR, PRSR이 나뉜다.
Css 파싱 → CSSOM 생성 → CSSOM tree 생성
- CSSOM은 자바스크립트에서 CSS를 조작할 수 있는 API 집합이다. 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법이다.
- CSSOM은 DOM과 다르게 속성이 상속된다.
- 자손 노드는 부모의 속성을 덮어 씌울 수 있다.
- 따라서 점진적 렌더링 (Progressive Rendering)이 불가능하다.
➕ 점진적 렌더링 (Progressive Rendering)이란? 서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍하는 기술이다.
DOM tree + CSSOM tree ⇒ render tree 생성
- DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성. 렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.
➕ Javascript 또한 렌더링 엔진에서 처리가 될까요?
자바스크립트는 자바스크립트 엔진이 처리한다. HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성을 중지하고 Javascript 파일을 로드하고 파싱 하여 실행한다. Javascript의 실행이 완료되면 다시 HTML 파서로 돌아가 중지했던 시점에서 DOM 생성을 재개한다.
이 과정에서 완성되지 않은 DOM을 Javascript가 조작하면 에러가 발생한다. 이를 막기 위한 다양한 Javascript를 연결하는 방법이 있다.(async, defer, <script>를 body 최하단에 위치시키기)
레이아웃(리플로우)
- 렌더링 트리의 각 요소에 대한 위치와 크기를 계산 → 뷰포트 내에서 요소들이 어떻게 배치되는지를 결정한다.
- <head>, display:'none'와 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않는다. (visibility 속성에 "hidden" 값이 할당된 요소는 트리에 나타난다.)
- → 접근성을 위한 요소는 display:'none'을 쓰면 안된다.
페인트(리페인팅)
- 레이아웃 단계에서 계산된 위치와 크기를 기반으로 실제로 화면에 픽셀을 그린다. 요소들의 스타일, 배경, 그림자 등을 고려하여 화면에 표시한다.
- transform, opacity는 리플로우, 리페인팅을 생략한다 (DOM을 수정하지 X) → 웹 입장에서 쾌적하다.
- 애니메이션 효과를 Position을 쓰기보다 transform을 애용할 것을 적극 권장한다.
- 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다. (가령 그라데이션, 그림자 효과 > 단색 배경)
Reflow와 Repaint
- 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow)과정을 다시 수행하게 된다.
- 이럴경우 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow, 그리고 Reflow 된 렌더 트리를 다시 화면에 그려주는 과정을 Repaint 라고 한다.
Reflow가 일어나는 경우 Reflow가 발생하는 경우는 화면의 구조가 바뀌었을 경우
- 페이지 초기 렌더링 시 (최초 Layout 과정)
- 브라우저 리사이징 시 (Viewport 크기 변경)
- 노드 추가 또는 제거
- DOM 노드의 위치 변경
- DOM 노드의 크기 변경(margin, padding, border, width, height 등..)
- 요소의 위치, 크기 변경
- 폰트 변경과 이미지 크기 변경
Repaint Repaint가 발생하는 경우는 화면이 변경되는 모든 경우.
- Reflow만 수행되면 실제 화면에는 반영되지 않기 때문에 다시 Painting이 일어나야 한다. 이 과정을 Repaint라고 한다.
- Reflow가 발생하지 않아도 background-color 나 opacity 같이 레이아웃에 영향을 주지 않는 스타일 속성이 변했을 때는 reflow 없이 repaint만 일어난다.
Composite
- 페인트 단계의 각각의 레이어들을 전부 합성하여 화면에 출력
렌더링 최적화
1. 리플로우(reflow) 최소화하기
- Reflow가 발생하면 필연적으로 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않다. 따라서 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다.
2. CSS문서와 JS문서로 인한 비효율 줄이기
- <link>,<style>과 같은 css문서 <head> 태그 안에 배치
- 미디어 유형과 미디어 쿼리 이용 (해당 조건에 부합될 때만 로드되므로) 2.2. JSHTML 파싱 도중 <script>태그를 만나면 DOM생성을 중단하고 javascript가 실행되게 한 후 DOM생성을 재개한다.
- <script> 태그를 <body> 최하단에 위치한다.
- async 속성을 <script> 태그에 부여 : 스크립트와 html 파싱이 동시 이뤄지다가 html 파싱이 끝나면 script 실행
- defer 속성을 <script> 태그에 부여 : dom 트리를 먼저 만들어서 html 파싱이 끝나야 스크립트가 실행됨
3. 영향을 주는 노드 최소화하기
- JavaScript와 CSS를 조합해 애니메이션이나 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용하면 영향을 받는 주변 노드들을 줄일 수 있다. fixed와 같이 영향을 받는 노드가 전혀 없는 경우 Reflow과정이 전혀 필요없어지기 때문에 Repaint연산비용만 들게 되어 효율적이다.
참조링크
주소창에 www.google.com을 입력했을 때 일어나는 과정
🌏 내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정
브라우저는 어떻게 화면을 렌더링할까?(프론트엔드 개발 지망생이라면 필수 시청!!)
'CS > 브라우저' 카테고리의 다른 글
| 크로스 브라우징 (0) | 2023.07.16 |
|---|---|
| 브라우저 저장소 (0) | 2023.06.25 |
| 브라우저 렌더링 원리_민희 (0) | 2023.06.20 |
| 브라우저 렌더링 - 이도영 (0) | 2023.06.18 |
| 브라우저와 렌더링에 대하여 (1) | 2023.06.18 |