웹 브라우저의 구조
사용자 인터페이스 (User Interface): 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외하고 사용자와 상호작용하는 부분.
브라우저 엔진 (Browser Engine): 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
렌더링 엔진 (Rendering Engine): HTML 과 CSS 를 파싱하여 요청한 웹 페이지를 표시
통신 (Networking): HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
자바스크립트 해석기 (Javascript Interpreter): 자바스크립트 코드를 해석하고 실행. 크롬일 경우엔 V8
UI 백엔드 (UI Backend): 체크박스나 버튼과 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
자료 저장소 (Data Persistance): localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
이 중 오늘 봐야할 것은 렌더링 엔진이다.
렌더링 엔진의 목표
1. HTML, CSS, JS 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 표시한다.
2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.
렌더링 엔진들
파이어폭스: 모질라에서 직접 만든 게코(Gecko) 엔진을 사용
사파리: 웹킷(Webkit) 엔진
크롬: Blink 엔진
웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다. 더 자세한 내용은 webkit.org를 참조한다.
렌더링 엔진의 동작 과정
1. DOM Tree, CSSOM Tree 생성: 서버로부터 받은 HTML, CSS를 다운받는다. 그리고 그것을 Object Model로 만든다. HTML CSS 파일은 각각 DOM Tree 와 CSSDOM 으로 만들어 진다.
2. Render Tree 생성: 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree 와 달리 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.
- Meta tag 나 display: none 경우엔 렌더와 관계가 없기 때문에 렌더트리에 포함되지 않는다.
- 브라우저마다 조금씩 다르게 생성된다.
3. Render Tree 배치 (Layout): 브라우저 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정.
4. Render Tree 그리기 (Paint): 실제 픽셀 값을 채워넣는 과정. 이 때 텍스트, 색, 이미지, 그림자 효과 등이 모두 처리되어 그려진다.
UI 가 업데이트 되는 3가지 상황
1. 다시 Layout 이 발생하는 경우: 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 발생. Reflow, Repaint 과정을 다시 하게 된다.
2. Paint 부터 다시 발생되는 경우: 주로 배경 이미지나 텍스트 색상, 그림자 등. 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생
3. 레이어의 합성만 다시 발생하는 경우: Layout 과 Paint 를 수행하지 않고 레이어의 합성만 발생하기 때문에 가장 큰 이점을 가진다.
성능 최적화
CSS Triggers
@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates
csstriggers.com
를 참고하면 위의 세가지 경우 중 어떤 경우로 업데이트 되는지 확인 할 수 있다.
예를 들어 left 대신 transform 속성을 이용하면 paint 단계는 거치지 않기 때문에 좀 더 부드러운 애니메이션 효과를 줄 수 있다.
출처:
https://boxfoxs.tistory.com/408
'기록' 카테고리의 다른 글
| Scss 를 다양하게 사용해보자! (0) | 2021.08.15 |
|---|---|
| Webstorm 에서 PostCSS 사용 (0) | 2021.07.28 |
| BFC(Block Formatting Context) (0) | 2021.02.05 |
| TypeScript (0) | 2021.01.22 |
| JAM Stack (0) | 2021.01.08 |