---
# System prepended metadata

title: 4. 웹 어플리케이션의 성능을 200% 끌어올리기 위한 코드 점검 및 개선 방법
tags: [지호, 프론트엔드 Back to the Basics]

---

# 4. 웹 어플리케이션의 성능을 200% 끌어올리기 위한 코드 점검 및 개선 방법 

###### tags: `지호`, `프론트엔드 Back to the Basics`

---

## 1. 파일 다운로드
- 파일 개수와 용량은 적게
- 도메인은 분산
- 적절한 포맷 사용 (이미지 <picture/>, WebP)
- 웹 폰트 최적화
- Link 태그 만으로 접속 시간 절약 (사용자가 다음에 갈 주소가 명확할 때)

<br/>

## 2. 컨텐츠 렌더링 & 인터랙션 가능
- 로딩 속도 개선
    - 필수 컨텐츠가 아니라면 비동기 로딩 고려: 광고, 댓글, 헤더/푸터
    - Lazy loading: 이미지/아이프레임/스크립트
    - 서버에서 불러오는 시간이 오래 걸리는 경우, placeholder로 대체 

<br/>

## 3. 계산 시간
- 다루야할 데이터의 양을 줄인다.
- 값이 필요해지기 전까지 최대한 미뤄두고 필요한 직전에 계산해서 사용

<br/>

### 웹 워커
![그림32](https://user-images.githubusercontent.com/24283401/160360473-d3e1d591-e284-4577-81b8-30fd8377f404.png)
![그림33](https://user-images.githubusercontent.com/24283401/160360485-3be6210c-378a-4cb3-a49f-0b1baf18a81a.png)
![그림34](https://user-images.githubusercontent.com/24283401/160360489-a31277db-fa0d-4c36-b57e-af56d090b6d2.png)
![그림35](https://user-images.githubusercontent.com/24283401/160360491-c4ff3270-d561-4adf-84f4-9ab12ecca110.png)

<br/>

### Lazy Evaluation
- 값이 필요해지기 전까지 계산을 미뤄두는 기법

<br/>

### Memoization
- 계산 결과를 기억해두고 반복 사용하는 기법
- 루프, 재귀 호출 등 최적화

<br/>
<br/>

## 4. 반응 시간

<br/>

![그림36](https://user-images.githubusercontent.com/24283401/160367396-cfa1a8a8-880f-4557-803f-8d71aee27d06.png)

<br/>

### 렌더링 순서
**자바스크립트**: 시각적 변화 유발
**스타일**: 어떤 규칙을 어떤 요소에 적용할 지 계산
**레이아웃**: 요소가 화면에서 차지하는 공간과 위치 계산. 다른 요소에 영향을 줄 수도 있음
**페인트**: 각 레이어에 픽셀을 그려내는 과정. 텍스트, 색, 이미지, 경계선, 그림자 등 표현
**합성**: 정해진 순서로 레이어를 합성하여 최종 결과물을 그려냄

![그림37](https://user-images.githubusercontent.com/24283401/160367401-cfc858ae-93b3-4d2d-acd4-791677f12a00.png)

<br/>

![그림38](https://user-images.githubusercontent.com/24283401/160367403-e22344a7-fc6a-40cd-be36-b9a2be9f7bcc.png)
![그림39](https://user-images.githubusercontent.com/24283401/160367407-04a969db-b1b2-4488-b0bc-a67e29469f5b.png)

<br/>
<br/>

## 5. 리소스

### 메모리 누수
- 프로그램이 필요하지 않은 메모리를 계속 점유하는 현상
- 메모리 생명주기
    - 할당: 사용할 메모리 확보
    - 사용: 메모리 사용 (읽기, 쓰기)
    - 해제: 불필요한 메모리 반환
- 자바스크립트는 JS 엔진이 추정후 해제
- 참조 카운팅 방식 사용
    - 해당 객체를 참조하는 수가 얼마나 되는지 엔진이 확인
    - 참조 수가 0이 되면, 객체를 지움

<br/>

![그림40](https://user-images.githubusercontent.com/24283401/160376827-e638147e-49c3-4de6-836f-3e03b868a7fc.png)
![그림41](https://user-images.githubusercontent.com/24283401/160376833-ca435324-6ce1-4e43-a6fe-6ad297ec681c.png)
![그림42](https://user-images.githubusercontent.com/24283401/160376838-53d2e764-204a-4ad5-9d89-639ff507cdd0.png)

<br/>

### 네트워크 트래픽
- 브라우저로 전달되는 트래픽 최소화

<br/>

![그림43](https://user-images.githubusercontent.com/24283401/160376840-b301a648-9b3a-4ba6-8806-fb469c67111c.png)
![그림44](https://user-images.githubusercontent.com/24283401/160376846-9deaad10-6d41-494f-b8d3-248b09af7425.png)

<br/>

### 정리

<br/>

![그림45](https://user-images.githubusercontent.com/24283401/160376851-5db0533d-907f-4bc8-9e4b-d252f34bd316.png)
