[TIL] <link>, <script>태그의 배치

Ina·2020년 8월 30일
3

TIL

목록 보기
3/20
post-custom-banner

CSS<link>를 <head></head>사이에 쓰는 것과 JS<script>를 <body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?

👉 <link>를 <head></head>사이에 쓰기

→ 사이트 UX 최적화에 도움이 되므로 좋은 방법이다.

  • 정보와 정보 표현(presentation)방식은 웹사이트에서 가장 필수적인 부분이므로, 두 가지가 우선적으로 로딩됨으로써 유의미한 화면을 빠르게 유저에게 보여줄 수 있다.(웹사이트 로딩시 HTML과 CSS가 동시에 파싱됨. 각각 DOM, CSSOM을 생성)
  • 스타일이 없는 내용이 잠깐 보이는 현상 (flashes of unstyled content: FOUC) 방지할 수 있다.

👉 <script>를 <body></body>뒤에 사용하기

  • script 태그가 </body> 직전에 위치할 경우 HTML과 CSS 로딩이 끝난 직후에 JS파일을 로딩하기 때문에 DOM렌더링 후 JS 적용까지의 시차를 최소화 할 수 있어 가장 표준적으로 많이 쓰이는 방법이다.

  • script파일은 fetching&executing 되는 동안 html 파싱을 차단하는데, 이 방법의 경우 html 로딩 모두 끝난 후 script가 읽히기 때문에 DOM 렌더링을 방해하지 않는 장점도 있다.

  • 그 외에 defer, async 속성을 이용한 script 불러오기 방식도 있다.

    🔗 script, script defer, script async 로 JS불러오기

| Reference

profile
프론트엔드 개발자. 기록하기, 요가, 등산
post-custom-banner

0개의 댓글