프론트엔드 성능 최적화

https://www.youtube.com/watch?v=G1IWq2blu8c

---

프런트엔드 성능 최적화

최적화는 크게 로딩최적화와 렌더링최적화 로 나눌 수 있다.

 

브라우저 기준 로딩 최적화

 

 

 

processing: 웹 페이지 파일을 파싱하는 과정

document.readystatechange , document.DOMContentLoaded 이벤트 발생

dom 트리를 만들고 화면에 그리기 전에 JS를 주입함

 

load: css, 이미지, 동영상 등 필요한 리소스를 다운받는다.

windlow.load 이벤트 발생.

 

브라우저기준에서 최적화라하면, 두 이벤트를 시점을 앞당기고 빨리 하는 것에 목표가 있다.

 

브라우저 동작원리

1. HTML

2.HTML 파싱해서 DOM Tree

3. CSSOM Tree

4. RenderTree (Dom Tree + CSSOM Tree)

5. Layout 과정(각요소의 위치와 크기 계산)

6. Painting

 

만약, HTML 파싱하다가 CSS를 만나면 HTML파싱을 멈추고 CSSOM 을 만든다. 즉, 동기적으로 파싱이 된다.

 

HTML을 파싱하다가 CSS,JS로 인한 HTML파싱 중단이 되는데, 이것을 `블록리소스`라하고, 이 `블록리소스` 되는 것을 방지해야 한다.

 

 

1. 자바스크립트 로드 시점 최적화

HTML파싱이 끝날 때 JS를 로드할 수 있도록 `body` 태그로 위치시긴다.

혹은 async(defer) 처리를 하면 block을 시키지 않는다.

 

2. 리소스 용량 최적화

css 외부스타일을 요청하고 다운로드 받는데 시간이 걸릴 수 있다.

 

렌더링 최적화

렌더링 과정에서, 레이아웃은 DOM 요소들이 화면에 어느 위치에서 어떤 크기로 배치될 지 결정하는 계산과정이다. 일일이 계산해서 요소 간 관계를 모두 파악해야 하므로 시간이 많이 걸린다.

레이아웃 단계에서 걸리는 시간을 단축하고 최대한 다시 발생하지 않도록 해야 한다.

 

1. 자바스크립트 실행 최적화

자바스크립트 실행 시간이 긴 경우, 한 프레임 처리가 오래 걸려 렌더링 성능이 떨어진다. 많은 작업을 수행할 때 자바스크립트 실행 시간은 당연히 오래 걸린다. 그러나 코드가 단순하더라도 불필요한 레이아웃으로 인해 실행 시간이 오래 걸릴 수 있으므로 성능 저하의 원인을 잘 파악해야 한다. 또한 레이아웃을 줄일 수 있도록 DOM 및 스타일 변경을 최소화해야 한다.

 

2. 강제 동기 레이아웃 최적화

DOM의 속성을 변경하면 화면 업데이트를 위해 레이아웃이 일어날 수 있다. 원래 레이아웃은 비동기이나 특정 상황에서 동기적으로 레이아웃이 발생할 수 있다. 특정 속성을 읽을 때 최신 값을 계산하기 위해 레이아웃이 동기적으로 발생하며 이를 강제 동기 레이아웃이라고 한다. 강제 동기 레이아웃은 자바스크립트 실행 시간을 늘어나게 하므로 신경 써야 한다. 강제 동기 레이아웃이 일어나는 경우와 개선 방법은 다음과 같다.

 

https://ui.toast.com/fe-guide/ko_PERFORMANCE#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A1%9C%EB%94%A9-%EA%B3%BC%EC%A0%95