[ Web & Mark UP ] 브라우저 렌더링 과정과 렌더링 최적화 방법.
∇ 브라우저 렌더링 최적화
목 차
1. 브라우저 렌더링 과정 정리
2. Reflow & Repaint
3. 렌더링 최적화하기.
1. 브라우저의 렌더링 과정 정리
1, 사용자가 브라우저 주소창에 URL를 입력합니다.
2. DNS 서버가 입력된 도메인 네임을 실제 서버의 주소인 IP주소로 바꿔줍니다.
3. http인지 https인지에 따라서 해당 통신 방식으로 서버에 값을 요청합니다.
4. 서버의 기본 설정이 대두분 index.html로 되어있기에, 서버에서 이 파일을 클라이언트측으로 보내줍니다.
5. 브라우저는 텍스트로 이루어진 index.html 파일을 html parser로 파싱하여 DOM tree로 만듭니다.
6. 중간에 CSS파일에 대한 link 태그를 만나면,
다시 서버에 요청-응답하는 과정을 거쳐서 css파일을 가져옵니다.
7. css parser로 css 파일을 파싱하여 CSSOM tree를 만듭니다.
8. 완성된 DOM tree와 CSSOM tree를 합쳐서 Render 트리를 만듭니다.
9. 이후 노드를 어느 위치에 얼마나 크게 표기할 건지 계산하는 과정(Layout)을 거쳐서
화면에 그립니다(paint)
10. JavaScript의 경우, html parser가 중간에 script 태그를 만나면 html파싱을 중단합니다.
11. 제어 권한을 자바스크립트 엔진에게 넘기고 JavaScript 파일(.js)을 로드해서 파싱하고서 실행합니다.
※ 이 상황은 script태그에 어떠한 옵션도 쓰이지 않았을 경우에 해당됩니다.
만약 script 태그애 defer 옵션이 쓰였다면 html 파싱을 중단하지 않고 병렬적으로 .js파일을 받아옵니다.
그리고, html 파싱이 끝나면 fetch 해둔 .js 파일을 실행합니다.
2. Reflow와 Repaint
렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다고 해서
렌더링 과정이 모두 끝난 것은 아닙니다.
특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 값 등 레이아웃 수치가 수정되면,
그에 영향을 받는 자식 레벨 노드나 부모레벨 노드들을 포함하여 , Layout과정을 다시 수행하게 됩니다.
(Reflow)
그리고 결과물을 다시 화면에 그려주는 Repaint 과정을 거칩니다.
◎ Reflow가 일어나는 대표적인 예시.
- 페이지 초기 렌더링 시
- 브라우저 리사이징 시
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경
- 폰트 변경과 이미지 크기 변경
◎ Repaint가 일어나는 대표적인 예시.
- Reflow가 일어나면, 실제 화면에 반영해주기 위해서 다시 painting이 일어납니다.
- 그러나, reflow가 발생해야만 repaint가 되는 건 아닙니다.
background-color, opacity처럼 레이아웃에 영향을 주지 않는 스타일 속성의 변경은
repaint만 일어납니다.
3. 렌더링 최적화 하기
◎ Reflow와 Repaint 최소화.
: reflow가 발생하는 속성보다 repaint만 발생하는 속성을 사용하는 것이 좋습니다.
🔔 reflow가 일어나는 대표적인 속성
position, width, height, left, top, right, bottom, margin, padding, border, border-width,
clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow,
text-align, vertical-align, white-space...
🔔 repaint가 일어나는 대표적인 속성
background, background-image, background-position, ackground-repeat, background-size, border-radius,
border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibilty...
◎ 영향을 주는 노드 최소화하기.
- 애니메이션이나 레이아웃 변화가 많은 요소의 경우,
position을 absolute나 fixed를 사용하면 영향을 받는 주변 노드들을 줄일 수 있습니다.
- fixed는 주변에 영향을 주지 않아서 repaint 비용만 들기 때문에 효율적입니다.
◎ 프레임 줄이기
- ex) 0.1chakek 1px씩 이동하는 요소보다 0.3초마다 3px씩 이동하는 요소가
reflow 연산 비용이 3배 줄어든다고 볼 수 있음.
-> 부드러운 효과를 조금 줄이면서 성능을 개선 가능
'Web & MarkUp > Web' 카테고리의 다른 글
| [ Web & Mark UP ] 브라우저 환경과 렌더링 엔진의 동작 원리. (0) | 2024.10.30 |
|---|---|
| [ Web & Mark UP ] WEB 정리. (1) | 2024.10.30 |