[2020 여름 효창공원 스터디]Rendering

Rendering(Templating)

🦋 참고한 문서

• HTML 기초 - 3 (렌더링이란?) https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80
• 브라우저 렌더링이 이루어지는 과정 https://tuhbm.github.io/2017/08/10/rendering1/
• 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361
• CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) https://wit.nts-corp.com/2017/06/05/4571
• MDN web docs - will-change https://developer.mozilla.org/ko/docs/Web/CSS/will-change

---

렌더링

= 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정(위키백과)

= 서버로부터 HTML 파일을 받아 클라이언트에 뿌려주는 과정

렌더링이 진행되는 순서를 알아보자.

Source: http://bit.ly/2Okn0fG

1. 브라우저가 서버로부터 HTML 문서를 받는다. 브라우저의 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 구성한다.
2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다. 스타일은 브라우저의 자체 스타일 - 사용자 정의 스타일 - html 안 인라인 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따른다.
3. 각각 1, 2에서 만들어진 DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성한다. 이때, 화면에 드러나지 않는 head 태그나 display: none; 이 할당된 요소는 렌더링 트리에 포함되지 않는다.
4. 기기의 view port(그래픽이 표시되는 브라우저의 영역) 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행된다. 이 단계를 레이아웃 단계 또는 리플로우 단계라고 한다. 페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작하여 렌더링 트리를 순회한다.
5. 렌더링 엔진은 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리고, 이 과정을 페인팅 또는 래스터화 라고 한다. 요소들의 위치와 크기, 스타일 등의 계산이 완료된 렌더링 트리를 이용해 실제 값을 채워 넣는다. 여기서 브라우저는 모든 HTML을 파싱할 때까지 기다리지 않고 노드 배치와 그리기 과정을 동시에 진행한다. 웹페이지에 접속했을 때 페이지가 한 번에 다 로드되지 않고 각 요소가 시간차를 두고 로드되는 것이 이 때문이다.

렌더링이 완료된 상태에서 사용자의 인터랙션에 의해 화면의 일부 영역이 변경되면 리플로우 또는 리페인트가 발생한다.

• 레이아웃이 변경될 경우 리플로우 + 리페인트
• = DOM 엘리먼트 추가, 제거 또는 변경/CSS 스타일 추가, 제거 또는 변경/CSS3 애니메이션과 트랜지션/offsetWidth, offsetHeight의 사용/가상선택자 hover/텍스트 입력/창 크기 조정 등
• 레이아웃에는 변경이 없지만 가시성에는 영향을 주는 요소가 변경될 경우 리페인트= 객체의 크기와 위치가 바뀌지 않기 때문에 리플로우는 발생하지 않는다.
• = opacity, background-color 등

Google의 리플로우 최소화 가이드라인

1. 불필요한 DOM 트리 깊이를 줄인다.
2. CSS 규칙을 최소화하고 사용되지 않는 CSS 규칙을 삭제한다.
3. 애니메이션과 같이 복잡한 렌더링을 변경하는 경우 흐름 밖에서 변경한다. 변경할 때는 절대 위치나 고정 위치를 사용한다.
4. 불필요하고 복잡한 CSS 선택자, 특히 하위 요소 선택자는 사용하지 않는다. 이 경우 선택자를 찾아내기 위해 더 많은 CPU 처리량이 필요하다.

CSS + JS에서의 리플로우 최소화 방법

1. 자바스크립트에서 DOM 객체 호출 횟수 줄이기

let div = document.getElementById('my-div');
// DOM 객체 여러 번 수정 => 리플로우 & 리페인트 과다 발생
div.style.width = '680px';
div.style.height = '360px';
div.style.margin = '35px auto';

let div = document.getElementById('my-div');
// DOM 객체 한 번 수정 => 리플로우 & 리페인트 1번만 발생
div.style.cssText = 'width: 680px; height: 360px; margin: 35px auto;';

2. 인라인 스타일 배제
3. 코드 가독성과 리플로우 비용을 줄일 수 있다. 외부 스타일을 사용하는 경우 리플로우가 한 번만 일어나는 반면, 인라인 스타일을 사용할 경우 리플로우가 여러 번 발생한다.
4. 테이블 레이아웃 배제
5. 테이블로 구성된 페이지 레이아웃은 점진적 페이지 렌더링이 지원되지 않고, 모두 계산된 후에야 화면에 보여진다.

같이 보면 좋은 글: https://sculove.github.io/slides/improveBrowserRendering/#/6

애니메이션

• VSync와 fps

애니메이션에 의한 리플로우 최소화 방법

1. 애니메이션 효과를 줄 때 position: fixed 또는 position: absolute로 지정하여 전체 노드에서 분리
2. 자바스크립트와 CSS를 활용한 애니메이션 효과에는 많은 리플로우 비용이 발생하는데, position 속성으로 fixed 또는 absolute를 주면 지정한 노드는 전체 노드에서 분리되어 해당 노드의 리플로우 비용만 발생하게 된다.
3. will-change 이용

   /* will-change 속성 4가지 */    
   will-change: auto; /* 별다른 최적화 조치 없음 */    
   will-change: scroll-position; /* 스크롤할 때 엘리먼트의 위치가 바뀔 것을 예고 */    
   will-change: contents;      /* 엘리먼트의 컨텐츠가 변경될 것을 예고 */    
   will-change: transform;  /* 변경하고 싶은 속성을 사용할 수 있음. 크롬에서는 opacity, transform, top, left, right, bottom의 6가지만 지원 */    

   브라우저는 이미 모든 요소에 대해 최적화 시도를 하고 있는데, 브라우저는 will-change 속성이 사용된 요소에는 특별히 더 많은 자원을 소모하여 최적화를 한다. 그러므로 will-change를 과도하게 사용하는 것은 오히려 성능을 더 낮출 수도 있다.

   var el = document.getElementById('element');
   
   // 요소가 hover 상태일 때 will-change 설정
   el.addEventListener('mouseenter', hintBrowser);
   el.addEventListener('animationEnd', removeHint);
   
   function hintBrowser() {
     // 애니메이션 키프레임 단락 내에서
     // 변경될 예정인 최적화 가능한 속성들
     this.style.willChange = 'transform, opacity';
   }
   
   function removeHint() {
     this.style.willChange = 'auto';
   }

4. 슬라이드처럼 주기가 짧고 변화가 확실히 예고된 경우를 제외하고는 애니메이션 동작이 끝난 뒤에 기본 상태(will-change: auto)로 되돌려야 한다. 최적화를 시도하면 비용이 발생하는데, will-change의 경우는 최적화를 길게 유지시키기 때문이다.
5. will-change 속성을 통해 변화가 예상되는 요소를 브라우저에게 미리 알려줌으로써 변화가 일어나기 전에 적절한 최적화 조치를 취한다.

렌더링 엔진

https://d2.naver.com/helloworld/59361