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 불러오기 방식도 있다.
| Reference
프론트엔드 개발자. 기록하기, 요가, 등산