로딩

1. 다운로드

브라우저가 html 파일을 다운로드합니다.

2. 파싱

html파일을 해석하여 DOM tree, CSSOM 트리를 구성합니다. -> domContentLoadedEvent
이 과정에서 다운로드할 다른 파일이나 이미지를 다운로드합니다. -> loadEvent

렌더링

3. 스타일

DOM과 CSSOM을 조합하는 렌더 트리를 만듭니다.

4. 레이아웃(리플로우)

노드의 정확한 위치와 크기를 px로 계산하는 작업.

5. 페인트(리페인트)

위치와 관계없는 CSS 속성(색상, 투명도 등)을 적용합니다. 이 과정에서 포토샵의 레이어처럼 레이어화도 이루어집니다.

6. 합성 & 렌더

페인트 단계에서 생성된 레이어들을 합성하여 스크린을 업데이트 합니다.

로딩 & 렌더링 단계에서의 최적화 포인트

1. 리플로우의 최소화

리플로우가 리페인트보다 부하가 크고, 리플로우를 일으키는 명령이 없으면 다시 실행하지 않으므로 불필요한 리플로우가 없도록 관리합니다.

2. 블록 리소스 최소화

파싱 단계에서 css 또는 javascript로 파싱이 중단될 수 있습니다. 이런 블록리소스들은 페인트 단계를 지연시킵니다.

1) css

• DOM 트리는 파싱 중에 태그를 발견할 때마다 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있습니다. 즉, CSSOM 트리가 구성되지 않으면 렌더 트리를 만들지 못하고 렌더링이 차단되므로 css는 최대한 상단에 위치시킵니다.
• @import문은 css를 병렬로 다운로드하지 못하게 만드므로 피합니다.

2) js

• 외부에서 가져오는 자바스크립트의 경우에는 모든 스크립트가 다운로드되고 실행될 때까지 DOM 트리 생성이 중단됩니다. 이러한 이유로 자바스크립트도 렌더링 차단 리소스라고 하며, HTML 문서 최하단(</body> 직전)에 배치합니다.

3. 리소스 요청 수 줄이기

1) 이미지 스프라이트 사용
https://spritegen.website-performance.org/

2) css, js 번들화
웹팩 등의 사용.

3) 내부 스타일시트 사용하기
캐시 사용이 안되므로, 필요한 경우에만 사용하기

4) Data uri
이미지를 데이터로 바꾸는 것인데, 이 것도 캐시 사용이 안됩니다.

4. 리소스 용량 줄이기

1) 중복 코드 제거하기
코드 자체의 용량을 늘리는 주범이 됩니다.

2) html 마크업 최적화
태그 중첩 최소화, 권장하는 DOM 트리의 노드 수는 전체 1500개 미만, 최대 깊이는 32개, 자식 노드를 가지는 부모 노드는 60개 미만. (참조: Excessive DOM)

3) 간결한 css 선택자 사용

4) 파일 압축
https://www.websiteplanet.com/ko/webtools/jscssminifier/

5. 렌더링 최적화

1) 자바스크립트가 레이아웃을 건드리는 상황을 최대한 피하세요
2) 강제 동기 레이아웃 최적화가 되는 부분을 피하세요
ex) offsetHeight
3) dom을 변경할 거면 최대한 하위 요소로
4) 숨겨진 엘리먼트는 display: none이 유리합니다.
리플로우, 리페인트를 발생시키지 않습니다.

6. 애니메이션 최적화

1) 자바스크립트보다는 css로
2) 애니메이션이 주변에 영향을 주지 않도록 position:absolute나 fixed 처리가 좋다
3) transform은 레이어로부터 분리시키기 때문에 리플로우 리페인트를 줄임