브라우저란?
웹 서버를 이동(navigate)하며 쌍방향으로 통신하고
HTML 문서나 파일을 출력하는 GUI 기반의 응용 소프트웨어이다.
브라우저의 종류 : FireFox, Chrome, IE, Edge, Opera, Safari 등...
브라우저의 기본 구조
UI (사용자 인터페이스)
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등,
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
브라우저 엔진 (Brower Engine)
UI와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 (Rendering Engine)
요청한 콘텐츠를 표시
통신 (Network)
네트워크 호출에 사용
자바스크립트 해석기 (JavaScript Interpreter)
JavaScript 코드를 해석하고 실행한다.
JavaScript Engine 이라고도 한다.
UI 백엔드
기본적인 위젯을 그리는 인터페이스
(select, input 등...)
자료 저장소 (Data Storage)
Cookie, Local Storage 등과 같이
브라우저 메모리를 활용하여 데이터를 저장
브라우저의 동작 과정
위 그림도 헷갈린다면 아래 그림으로 이해하며 된다.
1. DOM (Document Object Model) Tree 생성
- HTML Document를 Parser로 파싱 후 DOM Tree를 생성한다.
2. Style Rule 생성
- CSS Parser는 CSS를 분석하여 Style Rule을 생성한다.
3. DOM Tree 와 Style Rule로 Render Tree를 생성
- DOM 트리의 각 Element에 Style Rule을 적용하여 렌더 트리를 생성합니다.
- <head>, <title>, <script> 는 표시되지 않는 노드 이므로 렌더 트리에 미포함
- display: none 또한 렌더 트리에 미포함
- visibility: hidden이 적용된 노드는 눈에 안보일 뿐 렌더 트리에 포함
4. Render Tree를 배치
- 생성된 렌더 트리에서 위치나 크기 정보를 계산하여 생성한다.
- 상대 값은 본 과정에서 절대 값으로 변환되어 표현됨
5. Render Tree 그리기
- 렌더 트리를 순회하면서 화면에 노드를 노출한다.
Reflow & Repaint
1. Replow
노드의 크기 또는 위치가 변경되어 현재 레이아웃에 영향을 미쳐서 배치를 다시 해야하는 경우 발생
- example
- Window Resize
- Node 추가 / 제거 / 수정
- 요소의 위치 변경
- 요소의 크기 변경
- 폰트 변경
- 텍스트 내용 변경
- 이미지 크리 변경
- 페이지 초기 렌더링
- 엘리먼트 위치 값(offset) 계산 시
2. Repaint
Reflow가 발생한 뒤나 단순한 스타일 변경 후에 발생
3. 유의 사항
- 렌더링 성능 향상을 위해서는 Reflow를 최대한 줄여야한다.
- 클래서 변화에 따른 스타일 변경 시, 최대한 DOM 주고 상 끝단에 위치한 노드에 준다.
- 인라인 스타일(sytle 속성으로 직접 Tag에 스타일 하는 것)을 배제한다.
- 애니메이션이 들어간 노드는 position을 fixed 또는 absolute로 지정한다. (fixed 또는 absolute는 전체 노드에서 분리되어 전체 노드에 Reflow 비용을 줄일 수 있음)
- 테이블 레이아웃은 점진적으로 그려지지 않고 레아이웃이 계산된 후에 화면에 그려진다. (하지만 성능상으로 table-layout:fixed이 디폴트인 auto보다 좋음)
- CSS 하위 선택자는 적은게 좋다. (parsing 시 비용이 절감됨)
- position: relative 사용 시 주의가 필요 (margin, border, padding, width, height 등 Box model을 계산 후 레이아웃을 배치한다.)
- cssText 적극 활용 및 그룹화 처리
Reference
https://d2.naver.com/helloworld/59361
https://gloriajun.github.io/frontend/2018/10/23/frontend-reflow-repaint.html
'Knowledge > Base' 카테고리의 다른 글
| 암호화 방법 간략 정리 (0) | 2021.05.13 |
|---|---|
| Context Menu의 ...(ellipses)의 의미 (0) | 2020.09.03 |
| 호스팅(hosting)이란? (0) | 2020.04.04 |
| Domain Name과 DNS이란? (0) | 2020.04.04 |
| 인터넷(Internet) (1) | 2020.04.02 |
댓글