🟩 <link> 태그
해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용한다.
<link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용됩니다.
<head>
<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>⬜ <link>요소를 <head>요소의 자식 요소로 하는 이유
페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱됩니다.
HTML은 DOM을 만들고 CSS는 CSSOM을 만드는 파싱 과정을 거칩니다.
최종적으로 DOM 트리와 CSSOM트리를 합친 렌더 트리를 만들어야 화면에 그리게 됩니다.
그 말은 즉슨 DOM트리가 생성되어도 CSSOM 트리가 없으면 렌더링 되지 않습니다.
그러므로 최대한 빠르게 CSS 파일을 읽어와 렌더링을 완성하기 위해 head 요소 안에 link 요소를 자식 요소로 하여 css 파일을 불러옵니다.
🟩 <script> 태그
자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용
<script> 요소는 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니다.
하지만 src 속성이 명시된 <script> 요소에는 스크립트 코드를 직접 명시해서는 안 됩니다.
<script type="application/javascript">
document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>⬜ 스크립트의 진행 순서
일반적으로 브라우저는 HTML을 파싱하고 외부 자원인 CSS, JS 파일을 로드합니다.
여기서, JS는 <script> 태그를 만나면 파싱을 중단합니다.
하지만 스타일 시트는 이론적으로 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않습니다.
만약에 스크립트 파일을 먼저 로드하게 되는 경우를 가정하겠습니다.
스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우입니다.
스크립트가 문서를 파싱하는 동안 브라우저는 다른 작업을 수행하지 않습니다.
따라서 스타일이 파싱되지 않은 상태가 되고, 이렇게 되면 화면 레이아웃이 제대로 구성되지 않은 상태로 사용자에게 뷰를 제공할 가능성이 있습니다.
⬜ <body>요소가 끝나기 직전에 위치시키는 이유
위 문제를 해결하기 위해 <script>를 body 태그 끝에 두는 것을 권장합니다.
scirpt 요소가 head의 자식 요소로 있거나 body 요소의 중간에 위치하게 되면, HTML 문서가 파싱되지 않은 상태에서 파싱을 멈추고 js 파일을 읽습니다.
그렇게 되면 렌더링 과정에 방해가 되어 사용자에게 제대로 된 뷰를 제공하지 못해 사용자 경험을 떨어뜨리게 됩니다.
따라서 body 요소가 끝나기 직전 script 요소를 넣어 사용자의 불편을 제거합니다.
스크립트 소스를 하단에 두게 되면,
- HTML 문서를 화면에 표시하는 속도가 빨라지게 되고
- 사용자가 뷰를 보는데 필요한 웬만한 문서를 해석한 상태여서
- 사용자의 불편을 초래하지 않습니다.
🎁 참고
