프로젝트 중 코드블럭에 highlighting 기능을 넣기 위해 highlight.js 라이브러리의 cdn을 이용하였는데 script의 선언 위치에 따라 브라우저의 실행속도에 영향을 미친다는 것을 알게되었다. 이에 대해 먼저 공부하기 전에 네트워크의 속도, 응답을 판단하는데 도움을 줌과 동시에 서버와 데이터를 주고 받을 때 디버깅을 할 수 있도록 도와주는 도구인 network탭에 대해서 먼저 알아보았다.
간단하게 network 탭에서도 실행 속도를 쉽고 빠르게 판단하는데 도움을 주는 요인들은 다음과 같았다.
Waterfall
Waterfall은 request가 언제,얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타낸다. Waterfall 클릭 시 '총 소요시간', 'content가 다운로드 되는데 걸린 시간', 'request를 보내는데 걸리는 시간' 등 더 디테일한 사항을 볼 수 있다.
Network 탭 최하단의 DOMContentLoaded
Waterfall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간을 나타낸다.
Network 탭 최하단의 Load
Waterfall에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree 구조를 포함하여, 이미지까지 화면에 로드되는 시간을 의미한다.
+) 특히 DOMContentLoaded와 Load는 사용자 경험을 판단하는 기준 중, 가장 기본이 되는 곳으로 프론트엔드 개발자에게 중요한 지표이다.
성장하는 개발자