TIL : Javascript 실행 방법 총정리!
18535 단어 JavaScriptJavaScript
javascript 포함 방법
Header에 추가
<!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>
<script src="main.js"></script>
</head>
<body></body>
</html>
-
브라우저가 html파일을 다운받을 때, 위에서 부터 한 줄 한 줄 읽으면서 내려오게 된다. 이 때, script 부분을 만나면 javascript를 다운로드 받게 된되는 것.
-
이렇게 한 줄, 한 줄 읽으면서 이해한 것(parsing하는 것)을 css와 결합하여 dom 요소를 생성하게 된다.
-
그런데,
<script>
부분을 위와 같이 입력해 주었을 경우, 문제점이 생길 수 있다. 만약 내가 작성한 js 파일이 어어어어ㅓㅓㅓㅁ청 크다면!? -
js파일을 다운 받는 시간이 길어지면서 사용자에게 노출되는 시간도 그만큼 지연될 것이다!!!
-
왜냐면 필요한 js 파일을 서버에서 모두 다운 받고 실행(fetching -> excuting) 한 이후에 parsing을 계속 이어가기 때문이다!
따라서 이와 같이 header에
<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>
</head>
<body>
<div>blah~ blah</div>
<script src="main.js"></script>
</body>
</html>
- 요렇게 하면 어떨까!!
- 브라우저가 html을 다운받아 쭈우욱~ parsing 하면서, page가 준비된 이후에 js를 다운 받는 방식!
- 여기서도 단점이 존재! 사용자가 페이지(html)을 빠르게 볼 수 있는 이점은 존재하지만, 역시나 javascript를 fetching(가져오고) excuting 하기 까지는 여전히 시간이 소요된다. ( 내가 의도한 페이지를 온전히 보여주기 까지는 여전히 딜레이가 걸릴 가능성이 존재한다는 것!)
따라서 이 방법도 Nope!!
async
<!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" />
<script async src="main.js"></script>
<title>Document</title>
</head>
<body>
<div>blah~ blah</div>
</body>
</html>
- async는
boolean
타입으로 선언만 해주면 true로 인식! - 이 방식은 브라우저가 html을 쭈욱 parsing 하다가 async를 만나는 순간 병렬적으로 이를 실행한다!
- javascript파일을 다운받아!! 해놓고 계속 자기 할 일을 하는 것(parsing)
- 이 때, javascript 파일을 모두 다운 받은 이후 parsing을 멈추고 javasciprt를 실행시킨다.
- javasciprt를 모두 실행한 이후, 다시 html 마저 parsing!
장단점
- 이 방식에도 단점이 존재한다.
- body태그 하단에
<script>
를 위치시키는 것 보다 시간은 단축 시킬 수 있다는 장점! - 그러나 html parsing을 중단하고 js를 실행시키는 것이기 때문에 미처 html로 정의하지 못한 부분을 js가 호출하는 경우가 발생 할 수 있다! (아래와 같은 경우!)
- 또한 여러 js 파일을 다운로드 받을 경우, 순서가 보장되지 않는 단점도 존재한다.
- 순서가 아닌, 먼저 다운로드 완료된 js파일을 먼저 실행 시켜 버린다!
document.querySelector()
- 그리고 body태그 하단에 위치한 것 보다 나을 뿐이지 여전히 사용자가 의미 있는 페이지를 보기 까지는 딜레이 발생 가능성 존재
defer
<!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" />
<script defer src="main.js"></script>
<title>Document</title>
</head>
<body>
<div>blah~ blah</div>
</body>
</html>
- async 대신에 defer를 넣는 경우!
- async 처럼 js파일을 모두 다운 받은 경우 parsing을 멈추지 않는다!
- 병렬적으로 js파일을 다운로드 시키고 html파일을 모두 받은 이후 js 파일을 실행!
- 또한, 여러 js파일을 다운받더라도 모두 다운받고 순차적으로 실행을 하기 때문에 async에서는 보장받지 못한 js파일의 실행 순서도 보장할 수 있다!
결론은 defer 써라!
Tip) strict 모드?!
- javascript는 매우 유연한 언어
- But! 유연하다는 것은 위험 요소도 존재한다는 의미
strict 모드를 사용하면 선언도 안된 변수를 허용한다던지 하는 요상한 경우를 미연에 방지 가능!
<use strict>
일단 맨 위에 이거 치고 생각하쟈 ㅎㅎ
Author And Source
이 문제에 관하여(TIL : Javascript 실행 방법 총정리!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pgy93/TIL-Javascript-실행-방법-총정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)