챗봇 퀵메뉴 구현
왜 css를 사용했을까?
동적인 작업은 스크립트로 많이 하지만 성능면으로 따졌을 때, 1. css 2. javascript 이다.
왜냐하면 css는 브라우저 렌더링의 원리를 잘 충족하고 있기 때문이다.
브라우저의 렌더링 과정에서 reflow(layout) 단계를 발생시키기 때문에 애니메이션이 부자연스럽게 끊기는 듯한 느낌을 받게 된다. 이런 점에서 바닐라 JS로 애니메이션을 구현하는 것보다 CSS로 구현하는 것이 좋다고 할 수 있다.
또, javascript는 메모리 누수도 있고 사용하는 사람마다 방식이 다르기에 css가 convention이 더 강하다고 볼 수 있다.
브라우저 렌더링 과정
브라우저(Chrome, Safari 등) 주소 창에 www.주소.com을 입력했을 때, 어떤 과정을 거쳐 페이지가 화면에 보이는지를 알아보자!!
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
🔵 브라우저의 사용자 인터페이스(UI)
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
→ 표준 명세가 없지만 서로의 장점을 모방하며 현재에 이르게 되었다.
🔵 브라우저의 기본 구조(= 구성 요소)
-
사용자 인터페이스
위에 적은 것들뿐만 아니라 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. -
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 -
렌더링 엔진
요청한 컨텐츠를 표시 -
통신
HTTP 요청과 같은 네트워크 호출에 사용된다. -
UI 백엔드
플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다. -
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행 -
자료 저장소
자료를 저장하는 계층으로, 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
🔵 렌더링 엔진
ex. FireFox(Gecko), Safari/Chrome(Webkit)
렌더링이란?
HTML, CSS, JS 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
렌더링 엔진 동작 과정
1. DOM 트리 구축을 위한 HTML, CSS 파싱
HTML 문서를 파싱하고 태그를 DOM Tree로 변환한다. 그리고 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱하여 CSSOM Tree로 만든다.
스타일 정보와 HTML 표시 규칙은 '렌더 트리'라고 부르는 또 다른 트리를 생성한다.
🧐 파싱(Parsing) 이란?
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
파싱 결과는 보통 문서 구조를 나타내는 노드 트리(= 파싱 트리)이다.
🧐 DOM(Document Object Model)이란?
HTML 문서의 객체 표현으로, '파싱 트리'는 DOM 요소와 속성 노드의 트리로서 출력 트리가 된다.<html> <body> <p>Hello World</p> <div><img src="example.png" /></div> </body> </html>
🧐 스크립트와 스타일 시트의 진행 순서
- 스크립트
<script>태그가 실행되는 동안 문서의 파싱은 중단된다. 제작자는 스크립트를 '지연(defer)'으로 표시할 수 있는데 지연으로 표시하게 되면 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후 스크립트가 실행된다.
- 스타일 시트
만약 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 된다. 왜냐하면 스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문이다. 따라서 로드 중이거나 파싱중인 스타일 시트가 있는 경우 스크립트를 중단한다.
2. 렌더 트리 구축
DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 렌더 트리는 정해진 순서대로 화면에 표시된다.
🧐 DOM 트리와 렌더 트리의 관계
렌더러는 DOM 요소에 부합하지만 1:1 대응 관계는 아니다.
실제 화면에 표현되는 노드들로만 구성되는데 'head' 요소와 같은 비시각적인 DOM 요소는 렌더 트리에 추가되지 않는다.
또, display: none; 요소는 트리에 나타나지 않는다.(visibility: hidden; 요소는 트리에 나타난다.)
3. 렌더 트리 배치(Layout)
렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
생성된 렌더 트리 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계라고 할 수 있다.
4. 렌더 트리 그리기(Paint)
UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다. Layout 계산이 완료되면 이제 요소들을 실제 화면에 그리게 된다. 이때, 처리해야 하는 스타일이 복잡할수록 Paint 단계에 소요되는 시간이 늘어난다.
렌더링 엔진의 경우, 더 나은 사용자 경험을 위해 모든 HTML을 파싱할 때까지 기다리지 않고 배치(Layout)와 그리기 과정(Paint)을 시작한다.
네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
🔵 렌더링 최적화
1) Reflow 줄이기
어떤 액션이나 이벤트에 따라 Layout을 수정하면 그에 영향을 받는 자식 노드들 모두 다시 Layout 과정을 수행해야 한다.
Reflow 예시
- 페이지 초기 렌더링 시
- 윈도우 리사이징 시
- 노드 추가 및 제거
- 요소의 위치, 크기 변경
- 폰트 변경, 이미지 크기 변경
2) Repaint 줄이기
Reflow가 수행되면 실제 화면에 반영시키기 위해 Repaint가 수행된다.
또, background-color, visibility와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때도 Repaint가 수행된다.
참고한 블로그
CSS와 JS 애니메이션 차이점
브라우저는 어떻게 동작하는가?
왜 Virtual DOM인가?
브라우저 렌더링 과정
