스크립트를 html에 포함하는 방식은 여러 방식이 존재한다.
그중 제일 많이 쓰이는 방법은 head안에 script를 넣는 방식 혹은 body 맨 뒤에 script를 포함하는 방식을 많이 사용한다.
그중 script를 head안에 포함하는 방식중 defer속성과 async 속성을 이용해 script가 발생하는 오류를 줄일 수 있다
1. script를 head안에 작성하는 것 !
<!DOCTYPE html>
<html lang="en">
<head>
<script src="main.js"></script>
</head>
<body>
</body>
</html>html 문서를 parsing하다가 script를 만나면 parsing을 멈추고 js파일을 불러오는 작업을 실행하게 된다. 실행이 모두 완료 된 후에 html 문서를 다시 parsing한다.
단점:
js파일이 사이즈가 크고, 인터넷이 느리면 사용자가 웹사이트를 보는데 많은 시간이 소요된다. 혹은 js파일이 먼저 로드가 되었지만 html을 아직 parsing하지 않아 오류가 발생하는 일이 생긴다
2. script를 body 맨 뒤에 작성하는 것
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="main.js"></script>
</body>
</html>장점 :
html이 parsing이 완료 된 후에 js파일을 읽고 실행하기 때문에 js파일이 먼저 로드되어 발생하는 문제점이 생기지 않는다. 사용자의 경우 브라우저에 출력되는 html파일을 js로드 없이 먼저 볼 수 있게 된다
단점 :
웹사이트가 js파일의 의존도가 높아지게 된다면, 역시나 기다림이 존재할수 밖에 없게 된다.
3. script를 head안에 작성하고 async 속성추가
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="main.js"></script>
</head>
<body>
</body>
</html> async속성을 이용하면 브라우저가 html을 parsing하다가 async를 만나게 되면 js파일이 실행하도록 명령만 해놓고 html parsing을 계속 진행한다.
그러다 js파일이 모두 load가 완료 되었을때 html parsing을 멈추고 js파일을 실행시킨다. 실행완료후 멈췄던 html parsing을 다시 진행시킨다
장점 :
js파일을 다운받는데 걸리는 시간을 절약할 수 있다.
단점 :
js파일이 순서에 의존하는 경우 , js파일이 완료되는 대로 진행이 되기 때문에 문제가 발생할 수도 있고, js파일이 실행하기 위해서는 html을 멈춰야하기때문에 시간적인 문제가 발생할 수도 있다.
4. script를 head안에 작성하고 defer속성추가
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html> defer속성을 이용하면 html을 parsing하다가 js파일을 만나면 js파일이 실행할수 있도록 로드를 하는 명령을 내려놓는다. html parsing은 계속 진행을 하고, 파싱이 완료가 되면 js파일을 순차적으로 실행시킨다
장점 : html 파싱이 완료 되고 , js파일을 실행하는데 사용자가 브라우저를 보는데 문제가 발생할 일이 적어진다. 또한 js파일이 파싱이 끝난 시점에는 미리 명령을 내려 실행할 준비를 하고 있기 때문에 시간적인 측면에서 절약이 된다.
