Web Performance Tooling의 요약입니다. 이 세션에서는 두 명이 동시에 연단에 등록하여 마치 만담을 하듯이 연기하며 성능 개선에 대한 이야기를 풀어갑니다. 종종 이런 형식을 빌려 세션을 진행하는 경우가 있는데 연기를 잘 하지는 못하지만 평범한 형식이 아니라서 개인적으로는 좋아하는 형태입니다.
- 성능은 일을 줄이는 기법이고 일을 효과적으로 진행할 수 있는 방법이다.
- 성능 개선을 진행하는 기본적인 방법
- 사용자: 사용자가 만족하게 만드는 것이 성능 개선의 목적
- 측정: 프로파일러를 사용. 살펴봐야 할 시간의 종류를 이해하는 것이 중요.
- 비용의 해석: 일어나고 있는 일을 이해하는 것
- 병목 지점의 파악: 문제가 있는 지점을 파악
- 개선 시도
- 재측정: 변화가 일으킨 결과를 확인
케이스 스터디
- android.com/auto
- 3초 동안 스피너가 돈 후에 이미지가 화면에 노출되는 문제
- 첫 추측: 이미지가 2MB가 넘을 것이며 압축을 하지 않았을 것이다.
- 이미지는 1MB를 다운로드
- 로드가 완료된 후 2초동안 네트워크로 다운로드 하는 것이 없다.
- 코드의 해석
- 이미지는 화면 크기에 따라 선택적으로 받고 있음.
- cmd + shift + p 를 사용하여 devtools의 기능을 검색할 수 있는 기능을 켠 후 search를 입력하여 검색 기능을 사용
- setInterval의 간격을 1초로 설정하여 이미지가 로드되었는지를 확인하는 코드를 발견
- 이미지 로드 후 화면에 표시할 때까지 1초가 걸리는 코드를 발견
- 이 두 가지 요소가 2초 동안 아무 동작을 하지 않는 이유를 설명해준다.
- 스크롤 기능과 관련된 성능 확인
- 어떤 인터랙션을 했는지 표시해줌
- interactions > input events 에 표시된 붉은 줄은 사용자가 터치한 후 실제 이벤트 핸들러가 메인 스레드에서 실행될 때까지 걸린 시간을 의미
- modern-web.org
- 로딩에 10초가 걸림
- bottom-up
- 메인 스레드에서 실행되는 모든 비용을 요약해서 보여줌
- youtube 이미지와 addthis 기능이 도메인 기준으로 시간을 가장 많이 소비하는 도메인임
- addthis의 기능을 뺐을 때를 간단히 확인해보기 위해 request blocking을 사용 (실험실 기능)
- network 패널에서 특정한 요청을 선택한 후 오른쪽 버튼을 클릭하여 block request domain 선택
- 개선 후 7초 이내에 로딩이 완료됨
- 모바일은 랩탑보다 더 느릴 수 있다. 이를 위해 CPU throttling 기능이 실험실에 포함되어 있음.
- Youtube는 iframe으로 로드된다. 유저의 관점에서 생각해보면 첫 비디오를 처음에 보고, 뒤에 나오는 비디오는 페이지 로드할 때 보지 않을 것이다. 따라서 인스턴스를 throttling해서 생성하거나 Intersection Observer 등을 사용하여 lazy loading과 같은 방법을 쓰면 될듯. 작업을 지연시키면 된다.
- setTimeout을 이용하여 1.5초마다 youtube 플레이어를 생성한다.
- 개선 후에는 4초 정도에서 로딩이 완료됨
- ESLint (node application의 성능 개선)
- 파일이 수백개 정도인데 기대보다 느리다.
- chrome devtools를 지원하는 node에서 옵션을 걸어 프로그램을 실행시키면 devtools을 사용할 수 있다.
- Profiles에서 cpu profiles을 선택하고 실행시키면 프로그램을 실행한다.
- 12초가 걸린다.
- Glob.Sync 부분이 매우 크다.
- 해당 bar를 클릭하면 source 패널로 이동하는데 소스 코드 좌측에 함수 실행 시간이 표시된다. 함수 단위 및 라인 레벨로 표시된다.
- 원인: 26000개의 파일을 먼저 읽은 후 eslint ignore의 값으로 필터링 한 후 lint 작업을 한다. 최종적으로 lint 대상이 되는 파일은 30개.
- 해결 방법: eslint ignore을 먼저 읽게 하고 filter object를 glob.sync에 전달하여 30개의 파일만 읽도록 함.
- 4초 정도에 실행이 완료.
- 이런 작업은 pull request로 프로그램에 반영하면 좋겠다.
- https://github.com/eslint/eslint/pull/6215
이 동영상의 주요 내용은 데모를 이용하여 설명하므로 꼭 동영상을 직접 확인하시기 바랍니다.