script태그의 위치
<!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>
</head>
<body>
</body>
</html>
이런 기본적인 html 구조에서 script태그는 head 태그 내부 혹은 body 태그 내부에 위치한다.
- head 내부script의 js 파일을 불러오고 HTML을 띄워서 화면을 보는데 꽤 시간이 걸릴 수 있으나 최근에는 컴퓨터 성능 향상으로 큰 문제는 없다. 하지만 js파일 내부에 HTML에서 쿼리를 조회하고 조작하는 부분이 있을 때 관련 html코드가 js가 실행된 이후에 위치한다면 문제가 발생할 수 있다.
async, defer 속성으로 해결 가능
- body 내부파일을 다운로드 하기 전 HTML 코드를 모두 읽어 사용자가 화면의 content를 빨리 볼 수 있지만 HTML을 모두 읽은 뒤 js파일이 실행되기 때문에 HTML이 js에 의존적이라면 의미없는 content를 볼 수 있다. 하지만 이 역시 성능향상으로 큰 문제는 없을 듯 하다.
async
- 브라우저가 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 다운받고 난 후 바로 스크립트를 실행하는데, 실행하는 동안에는 DOM을 그리지 않는다.
defer
- 브라우저가 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 전부 다운로드 받더라도 스크립트를 바로 실행하지 않고 DOM이 전부 그려질 동안 기다렸다가 스크립트가 실행된다.
매일 꾸준히