서론
프론트엔드 개발자를 꿈꾸는, 지망생이라면 "크리티컬 렌더링 패스를 이해하는 것은 최적화에 도움이 된다"는 말을 한 번쯤 들어보기 마련이다. 그래서 공부를 하기 위해 찾아보면, 렌더링 패스에 대한 글은 넘쳐나지만, 서로 모순되는 내용을 담고 있어서, 무엇이 진실인지 판단하기 어렵다. 일반적으로 사실로 알려져있지만, 거짓인 것으로 보이는 내용 두 가지를 살펴보자.
본론
DOMContentLoaded는 HTML의 로딩과 파싱이 끝난 후, 바로 발생한다.
MDN에도, HTML의 파싱이 완료된 후 스타일시트의 로딩을 기다리지 않고, DOMContentLoaded 이벤트가 발생한다고 적혀있지만, 이는 사실이 아니다. DOMContentLoaded 이벤트는, HTML 파싱이 완료된 후 바로 발생할 수도 있고, CSS의 파싱이 완료되기까지 추가로 기다렸다가 발생할수도 있다. 필자가 20만 줄이 넘는 더미 스타일시트를 작성하여 크롬으로 테스트했을 때, css 파일을 preload하면, CSS의 파싱이 완료된 후, DOMContentLoaded 이벤트가 발생함을 확인할 수 있었다. 그러나 아쉽게도 CSS를 preload하는 상황 외에는, 어떤 경우에 이런 일이 일어나는지, 파악할 수 없었다. 왜 이런 일이 발생하는지 또한 알 수 없었지만, preload는 중요한 리소스를 나타내는 수단이기 때문에, 중요한 리소스가 로드되기 전까지, DOMContentLoaded 이벤트를 발생하지 않는것으로 추측하고 있다.
필자가 테스트한 화면의 일부이다. 동그라미 친 부분이, html을 파싱하는 부분이고, 외부 스타일시트의 파싱이 시작되기도 전에 완료됨을 확인할 수 있다. 하지만, 그로부터 한참이 지나고, preload한 stylesheet의 파싱이 완료되고 나서, DOM Content Loaded 이벤트가 발생했다.
(MDN의 내용이 사실일 수도 있음에 유의하자. 개발자로 커리어를 시작도 안 한 필자가 알아봤자 얼마나 알겠나. 만약 외부 스타일시트를 preload했을 때, 해당 스타일시트의 파싱이 완료되기 전까지, HTML의 파싱이 완료되지 않는 것이라면, MDN의 내용이 맞다. MDN에 22.08.08 이슈를 넣었다. 답변이 오면, 해당 내용을 추가하겠다.)
외부 스타일시트는 HTML 파싱을 막지 않는다
이 또한, 사실이 아니다. 스타일시트를 연결하는 링크 태그가, 파싱을 막는 스크립트 태그 이전에 존재하면, HTML 파싱을 막을 수 있다.
결론
크리티컬 렌더링 패스를 공부하면 할수록, 오히려 더 헷갈리는 묘한 경험을 할 수 있었다. 많은 개발자가, 잘못 알고 있다는 얘기는, 잘 몰라도 별문제가 생기지 않는다는 얘기일 수도 있다. 크리티컬 렌더링 패스를 잘 모르는 독자분이 계신다면, 혼자가 아니니 너무 걱정하지 말자.
