왜 css <link>를 <head>내에 선언하고, js <script>를 <body> 직전에 위치시키는 것이 좋은 방법인가?
- <head>안에 <link>를 넣는 이유
<link>를 <head>안에 넣는 것은 최적화된 웹사이트를 구출할 때 적절한 스펙이다.
페이지가 처음 로드되면, HTML과 CSS가 동시에 파싱되는데, HTML은 DOM(Document Object Model)을 만들고, CSS는 CSSOM (CSS Object Model) 을 만든다.
2가지 모두 웹 사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 first meaningful paint를 할 수 있게 해준다.
(first meaningful paint은 사이트의 성능 지표중 하나)
문서 최하단에 stylescheet를 두는 것은 이에 반하는 행동이다.
또한, 점진적인 렌더링을 하는 경우 몇몇 브라우저는 스타일이 변경되면 페이지 요소를 다시 그리는 것을 막기위해 렌더링을 차단하는데,
문서 최하단에 stylescheet가 있다면 사용자는 빈화면을 보게될 것이다.
- </body> 직전에 <script>를 넣는 이유
<script>는 다운로드되고 실행되는 동안 html 파싱을 차단한다.
스크립트를 맨 아래에 두면 html를 먼저 파싱하여 사용자에게 노출시킬 수 있다.
스크립트에 document.write()가 있을 때에는 <script>를 아래쪽에 두는 것이 예외적일 수 있으나, 요즘은 document.write를 사용하지 않는 것이 좋다.
또한, <script>를 하단에 위치 시키면, 브라우저가 전체 문서 파싱완료될 때 까지 스크립트 다운로드를 할 수 없다.
이를 통해 DOM을 핸들링하는 코드가 오류를 발생시키지 않도록 해준다.
* <script>를 <head>에 넣어야 하는 경우엔 defer를 사용하자.
+ 왜 document.write를 사용하지 않는 것이 좋은가?
'개발 > FrontEnd Interview' 카테고리의 다른 글
| [Frontend Interview] CSS 선택자의 특정성은 무엇이고 어떻게 작동하는가? (0) | 2021.01.08 |
|---|---|
| [Frontend Interview] img 태그에 srcset 속성을 사용하는 이유는 무엇인가? (0) | 2021.01.08 |
| [Frontend Interview] <script> <script async> <script defer> 의 차이점 (0) | 2021.01.06 |
| [Frontend Interview] cookie, sessionStorage, localStorage 들의 차이점은? (0) | 2021.01.06 |
| [FrontEnd Interview] html data- 속성은 무엇에 좋은가? (0) | 2021.01.05 |
