🔥 성능 최적화
- 성능 최적화는 페이지를 로드할 때, 페이지를 렌더링할 때로 분류할 수 있다.
💥 페이지 로드 최적화
1. 블록 차단 리소스 최적화
- dom tree가 만들어지는 과정에서 css, js를 만나게 되면, 돔 트리 파싱을 중단하고
해당 파일을 파싱하거나 다운로드 후 실행하게 되는 요소를 블록 차단 리소스라고 한다.
<!DOCTYPE html>
<html>
<head>
<!-- css는 head 안에! -->
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
<!-- js는 body 하단에! -->
<script>
//...
</script>
</body>
</html>때문에 인라인으로 스크립트를 실행하면 돔 생성이 차단되어 초기 렌더링이 지연된다.
css는 head 태그 안에, js는 body의 맨 하단에 위치시켜 돔 생성을 차단하는 것을 방지할 수 있다.-
css의 경우 media 속성으로 단말기 유형의 css를 명시하면 불필요한 블로킹을 방지할 수 있다.
-
js 파일을 body 끝에 몰아 넣는 방법은 js가 해석되는 도중 사용자의 상호작용이 시도된다면 재대로 동작하지 않는다. 이 문제를 해결하기 위해 브라우저가 비동기로 스크립트를 병렬로 불러오는 async 와 defer 속성을 사용한다.
-
async 스크립트는 파일을 불러오는 것만 병렬로 실행하고 파일의 로드가 끝나면, 돔 렌더를 멈추고 스크립트 파일을 해석하기 때문에 실행 순서가 보장되지 않는다. 때문에 돔에 접근하지 않거나, 다른 스크립트에 의존성이 없을 때 효과적이다.
-
defer 스크립트는 병렬로 파일을 로드한 후, 돔 렌더가 끝난 후에 실행된다.
때문에 스크립트의 선언 순서를 보장한다.
2. 리소스 용량 줄이기
- js / css 용량 최적화
- import를 사용할 때 파일 전체가 아닌 사용하고자 하는 기능만 임포트 하기
- 불필요한 코드 및 공백 제거 (tab size 2)
- css 간결한 셀렉터 사용 / 공통 스타일은 class로 정의하여 사용
- 이미지의 사용법에 따른 확장자 선택으로 용량 최소화
3. 리소스 요청 개수 줄이기
- 이미지 스프라이트 기법을 통한 이미지 요청 최소화
- 이미지 지연로딩 (보이지 않는 부분의 이미지는 보여져야 할 때 로드)
- 모듈 번들러(webpack 등)를 이용한 파일 번들링
💥 페이지 렌더링 최적화
- 레이아웃 작업에서 발생하는 비용이 크기 때문에 돔 요소의 추가, 수정 또는 위치에 영향을 주는 속성을 수정할 경우 리플로우가 발생하므로 레이아웃 작업을 최적화 시키는 것이 성능에 영향을 준다. 리플로우와 리페인트, 최적화 방법
