JavaScript의 위치
1. head 안에 script를 넣은 경우.
<!DOCTYPE html>
<html lang="ko">
<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">
<!-- head안에 script -->
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<!-- body 내용 -->
</body>
</html>
- 태그의 맨 위에서부터 HTML 을 분석한다. (parsing)
- script 태그를 만남.
- HTML 분석을 멈추고 필요한 js 파일을 서버로부터 다운한다. (fethcing)
- js를 실행한다. (executing)
- 나머지 HTML을 분석한다. (parsing)
단점
- js파일을 엄청 크거나, 인터넷 속도가 느리면 사용자가 웹 사이트를 보는데까지 오랜 시간이 걸린다.
- HTML이 실행되기도 전에 js가 실행되어 문제가 발생할 수 있다.
2. body의 끝부분에 script를 넣은 경우.
<!DOCTYPE html>
<html lang="ko">
<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 내용 -->
<!-- body 끝에 script -->
<script src="script.js"></script>
</body>
</html>
- 태그의 맨 위에서부터 HTML 을 분석한다. (parsing)
- HTML이 끝나고 필요한 js 파일을 서버로부터 다운한다. (fethcing)
- js를 실행한다. (executing)
장점
- HTML을 빨리 불러올 수 있다.
단점
- js 너무 의존적인 사이트일 경우에, js를 늦게 불러오게 되므로 정상적인 페이지를 보는데 오래 걸릴 수 있다.
3. head 안에 script + async를 넣은 경우.
<!DOCTYPE html>
<html lang="ko">
<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">
<!-- head안에 script + async -->
<script async src="script.js"></script>
<title>Document</title>
</head>
<body>
<!-- body 내용 -->
</body>
</html>
- 태그의 맨 위에서부터 HTML 을 분석한다. (parsing)
- script + async 를 만남.
- HTML 분석과 동시에 js 파일을 서버로부터 다운한다.
(parsing + fethcing)- js 다운이 완료되면 HTML분석을 잠시 멈추고, js를 실행한다. (executing)
- 나머지 HTML을 분석한다. (parsing)
장점
- parsing과 fetching을 동시에 진행하여 시간을 절약할 수 있다.
단점
- js 실행 (executing) 하는 동안에는 멈추기때문에 상대적으로 시간이 걸린다.
- HTML이 실행하기도 전에 js가 실행되어 문제가 발생할 수 있다.
4. head 안에 script + defer를 넣은 경우.
<!DOCTYPE html>
<html lang="ko">
<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">
<!-- head안에 script + defer -->
<script defer src="script.js"></script>
<title>Document</title>
</head>
<body>
<!-- body 내용 -->
</body>
</html>
- 태그의 맨 위에서부터 HTML 을 분석한다. (parsing)
- script + defer 를 만남.
- HTML 분석과 동시에 js 파일을 서버로부터 다운한다.
(parsing + fethcing)- js 다운 (fetching) 이 완료되더라도 계속해서 HTML 분석(parsing) 을 진행한다.
- HTML 분석 (parsing) 이 완료되면, js를 실행한다. (executing)
다른 방법들과 비교했을 때, 가장 좋은 방법으로 추천함.
Reference.
I'm SHORRY about that