NHN TOAST - 프론트엔드 성능 최적화

July 08, 2020

어떤 개발을 하던지, 성능최적화를 고민하지 않을 수 없다. 실용주의 프론트엔드개발 글을 읽다가, 참고자료로 있어서 한번 보게 되었다. 이전에도 최적화에 대한 고민을 많이 했었고 많이 적용시켜 보았지만, 더 좋은 방법이 없을까 고민하지 않을 수 없었다. 이미 알고있는 내용은 배제하고, 새롭게 알게된 내용 위주로 정리를 해 보았다.

1. 리패인트와 리플로우

리플로우 : DOM이 변경 될 때마다, 렌더트리를 다시 재구성 하게 된다. 그 중에서, DOM이 추가 또는 삭제되거나, 높이와 너비 등 기하적인 요소의 영향을 주는 CSS 가 변경되는 경우 렌더트리를 재구성 하는 것을 “리플로우”라고 한다. (다시 재구성)
- Ex) “width”, “height”, “font-size”
리페인트 : 리플로우와는 반대로, 기하적인 요소에 영향을 미치지 않고 CSS가 변경되는 경우(다시 칠한다?)
- Ex) “color”, “background-color”, “visibility’
참고 : wonism - Reflow 와 Repaint

2. DOM

DOMContentLoaded vs load Event
- DOMContentLoaded 은 HTML, CSS 가 파싱되는 시점 이지만, load Event는 HTML상의 필요한 리소스가 모두 로드된 시점이라는 차이가 있다.
- Ex) <img> src에서 모든 이미지를 불러오는 동안은 DOMContentLoaded, 다 불러왔다면 load
Block resource _{(렌더링 과정에서 렌더링을 방해(Block)할 수 있는 요소들)}
- CSS는 다 파싱이 되지 않으면 CSSOM TREE를 만들지 않는다. -> 렌더트리의 생성 자체가 느려짐
- 그래서 보통 Head 태그안에 넣는다고 한다.
```
  <head>
    <link href="style.css" rel="stylesheet" />
  </head>
```
- 자바스크립트는 DOM, CSSOM을 변경할 수 있기 떄문에 <body>맨 밑에 넣어서 마지막에 변경하는 것을 보통 사용함.
- async, defer속성을 이용헤서, 병렬적 로딩하기 (IE10 이상부터)
  - async는 다 불러온뒤 HTML을 멈추고 스크립트 파싱하지만, defer는 다 불러와도 HTML전체 파싱을 기다린다.
  - 참고 : MDN - script
미디어 쿼리
- 특정 조건에서만 쓰이는 css는 script태그 에 media 속성을 명시하여 사용하기
HTML 마크업에 대한 고려

3. 그 외

라이브러리 사용하는 것만 import 하기

// bad
import _ from 'lodash'

// good
import array from 'lodash/array'

결론

공부해야 할게 엄청 많다.. 짬이 찰 수록 CS 지식이 많이 필요한 이유를 알 것 같다.
기왕 만들고 부수고 리팩토링 해야한다면, 제대로 만들기 위해서 여러가지 성능 최적화에 대해 고민해보자.
네트워크 관련 항목은 따로 정리하겠다.

Written by@Seunghun Kang

Code & Coffee

GitHub