웹에서의 성능을 개선하는 작업들을 종종 한다.
성능 개선작업에서 제일 중요한 건 무엇을 왜 개선해야하는 지를 계속 상기하는 것이다.
겪는 문제를 정확히 분류할 수 있다면, 문제가 작고 보편적인 문제로 바뀐다.
웹에서 성능의 문제가 될 내용들을 분류해보자.
크게 분류
컴퓨터 입장(브라우저가 동작하는 모든 기기)에서 생각해보자.
브라우저가 웹이란 것을 사용자에게 보여주기 위해 해야할 것은 세 가지로 정의 가능할 것 같다.
불러오기, 읽기, 그리기
즉 사용자가 현재 느리다고 느끼다면, 셋 중 하나가 느리다.
각각을 더 자세히 정의해보자.
불러오기
여기서 불러오기는 서버로부터 자원을 요청하고 다운로드하여, 브라우저 프로세스의 메모리에 적재하는 과정이다.
불러오는 것이 느린 이유들을 분류해보자.
- 서버 기기의 성능
- 서버의 위치
- 자원의 크기
- 네트워크 상태
- 브라우저 내부 설정
해당 내용은 정적 자원에서만 해당된다.
여기서 정적 자원은 브라우저가 서버에 요청을 보냈을 때 서버가 해당 자원을 이미 가지고 있는 자원들을 말한다.
요청이 왔을 때 데이터를 생성하는 경우(ex: 데이터베이스나 다른 서버에 요청하여 자원을 가져와야함)는 다음 내용이 추가된다.
+ 동적 자원을 생성하는 시간
읽기
여기서 읽기란 불러오기 이후 메모리에 올라가 있는 정보들을 브라우저가 그릴 수 있는 형태로 바꾸는 과정이다.
다음과 같은 내용들이 있다.
- HTML 파싱: HTML 문서를 해석하여 DOM 트리를 구성.
- CSS 파싱 및 CSSOM 생성: CSS 파일을 해석하여 CSSOM 트리를 구성.
- JavaScript 파싱 및 실행: JavaScript 파일을 파싱하고 실행하여 DOM과 CSSOM을 수정.
- 이미지 혹은 다른 정적 자원을 그릴 수 있는 형태로 표현
이 부분에서 생기는 문제들은 다음과 같다.
- 기기가 읽어야할 자원들의 용량이 크기 때문이다.
- 기기 성능이 읽어야할 내용들을 빠르게 읽기에 충분하지 않다.
- 필요없는 자원이나 코드를 브라우저가 읽게 하고 있다.
추가적으로 이 읽기 과정 중 Javascript로 DOM과 CSSOM을 변경하는 작업이 많은 경우, 브라우저는 매번 레이아웃을 다시 계산해야 한다.
이를 "리플로우(reflow)"라고 하며, 빈번한 리플로우는 성능에 큰 영향을 미치곤한다. [크롬 개발자 문서]
그리기
그리기는 브라우저가 그릴 수 있는 형태로 만들어진 렌더트리를 디스플레이에 출력하는 과정이다.
그리는 과정에서 성능 문제가 될만한 내용들은 다음과 같다. [크롬 개발자 문서]
- 그려야하는 요소 과다: 화면에 많은 요소가 있거나, 복잡한 스타일이 적용된 요소가 많을 경우.
- CSS 속성 과다: 그림자, 그라데이션, 투명도 등의 복잡한 CSS 속성들로 페인팅 연산 소요시간이 커짐.
- 복잡한 애니메이션: 많은 레이어가 복잡한 애니메이션을 포함하고 있다면, 각 프레임마다 레이어를 다시 합성해야함.
- 디스플레이 갱신 속도: 디스플레이의 갱신 속도(예: 60Hz)와 브라우저의 렌더링 속도가 맞지 않으면, 화면 갱신에 버벅거림 발생.
- 이미지나 영상 크기: 그려야하는 이미지와 영상 크기가 큰 경우 부하 발생
마무리
서비스가 커지다보면, 성능 문제를 피하긴 쉽지 않다.
성능 문제를 해결해야한다면 정리해 둔 글을 다시 읽어보며 이 중에 어떤 문젠 지 정확히 파악해서 공유해보자.
댓글