일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

👩🏻‍💻 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">  <!-- CSS -->
</head>
<body>
	<script src="script.js"></script> <!-- JavaScript -->
</body>
</html>

💁🏻‍♀️ 요약하자면 ,

CSS <link> 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, <script> 요소가 <body> 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다.

CSS

일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS <link> 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 렌더링을 하지 못하게 막습니다. 이 때문에 유저에게 비어있는 흰 페이지 혹은 CSS 스타일이 적용되지 않은 페이지가 노출될 수 있습니다.

JavaScript

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면 HTML 해석을 잠시 멈추고, script 요소를 먼저 실행합니다. 때문에 <script> 요소가 <body> 요소가 끝나기 직전에 위치하지 않고 그보다 상단에 위치할 경우, HTML 해석이 채 다 끝나기 전에 HTML 파싱을 막아 DOM 렌더링을 방해해서 DOM 에서 원하는 HTML 요소를 불러오지 못할 수 있습니다.

📎 내용 참조

- velog: 기술 면접 준비

- velog: Section 1 회고

'📂 기술 면접 > Web' 카테고리의 다른 글

HTTP 메세지 구조에 대해 설명해 주세요. (0)	2023.04.10
GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. (0)	2023.04.10
SOP와 CORS에 대해서 설명해 주세요. (0)	2023.04.05
HTML의 id 속성과 class 속성의 차이에 대해서 설명해 주세요. (0)	2023.03.12
HTML의 <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요? (0)	2023.03.12

Dev. Ella

일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?