4일차 | Notion

🧩 오늘 한 일

<script> 태그 위치에 따른 렌더링 성능 차이 실험을 진행했다.
동일한 heavy.js 스크립트를 각각 <head> 내부, <body> 내부에 위치시킨 뒤, Chrome DevTools의 Performance 탭을 사용해 실제 렌더링 지표를 비교하였다.
측정 기준으로는 Interaction to Next Paint(INP) 값을 활용했다.
그 결과,
- <head> 내부: 약 40ms
- <body> 상단/하단: 약 32ms
로, 스크립트 위치에 따라 실제 렌더링 반응 속도(INP)에 미묘하지만 명확한 차이가 발생함을 확인했다.
index.html
heavy.js

🧠 배운 점 / 새로 알게 된 점

스크립트의 위치가 렌더링 차단 여부에 큰 영향을 준다. <head>에 스크립트를 두면 HTML 파서가 JS 실행을 기다리기 때문에 DOM 렌더링이 지연되고, 반면 <body> 하단에 두면 HTML 파싱이 모두 끝난 뒤 실행되어 렌더링이 차단되지 않는다.
INP(Interaction to Next Paint) 지표의 의미를 명확히 이해했다.
- 사용자가 인터랙션(클릭 등)을 했을 때, 다음 화면이 실제로 그려질 때까지 걸리는 시간.
- 즉, 렌더링 성능뿐 아니라 사용성(UX) 반응 속도까지 측정할 수 있는 중요한 지표임을 알게 됐다.
렌더링 최적화는 코드의 양보다 실행 시점이 더 중요하다.
- 단순히 스크립트가 무거운지가 아니라, “언제 실행되느냐”가 실제 체감 속도를 결정한다.
- 즉, 동일한 코드라도 실행 타이밍 제어가 핵심이라는 걸 체감했다.

💬 느낀 점 / 고민한 점

이번 실험을 통해 “렌더링이 왜 차단되는가?”를 이론이 아닌 직접적인 수치로 체감할 수 있었다.
수치 차이가 크진 않더라도, 실제 사용자 입장에서는 “조금이라도 빨리 화면이 그려지는 것”이 UX 향상으로 이어진다는 걸 깨달았다.
다만 브라우저나 환경에 따라 차이가 달라질 수 있기 때문에, 단순히 한 번의 측정으로 결론을 내기보다 여러 환경에서 반복 실험을 해보는 것이 필요하다고 느꼈다.