여태까지 <body>태그 맨 끝에 <script src="main.js"></script>를 사용해왔는데
드림코딩앨리강의를 듣게되며 script사용방법및이유와 장단점에 대해 정리해보려한다 : >👍🏻
1. <script>사용방법
1) <script src="main.js"></script>를 <head>안에 쓰면 안되는 이유
HTML을 한줄한줄씩 차례대로 실행되다가 js연결해달라는 코드를 보면 HTML읽는것을 멈추고 js를 다운받고 실행한 후에 HTML을 다시 실행하는과정을 갖는다.
이러면 화면에 로딩되는 시간이 가장 길어 제일 최악의 연동방법이된다.
2)<script src="main.js"></script>를 <body>태그 맨 끝에 사용하면 안좋은점
body안에있는 HTML요소들이 실행되고 페이지가 완전히 준비된 후에 JS를 다운받고 실행하는 과정
- 장점 : 사용자가 로딩없이 기본적인 HTML을 볼 수 있음
- 단점 : JS에 동적인 의미있는 내용들을 보는데에는 결국 시간이 소요된다. 로딩시간은 어차피 똑같은셈이 된다 😥
3) <script src="main.js"></script>를 <head>안에 async속성과 사용한다면?
HTML요소들을 읽는것과 병렬로 JS를 다운받고 JS가 실행되는동안에는 HTML을 읽는것을 멈추고 로딩시간이 있고 난 후에 JS실행이 끝나면 남은 HTML요소를 읽는과정이다.
- 장점 : 병렬로 각각 실행되어 앞에 있는 방법보다는 다운시간을 절약함
- 단점
- JS가 HTML완전실행되어 페이지를 구성하기전에 실행되기에 JS에서 DOM조작을 했을경우 HTML에서 정의되어있지 않을경우가 발생한다.😥
- JS를 실행하기위해 언제멈출수있어서 여전히 시간이 든다..
(async는 불리언값의 속성타입이기에 그냥 설정하는것만으로도 true가 기본값이된다.)
다수의 JS를 사용했을때 발생하는 문제점이 가장 확연하게 볼 수 있다.
저렇게 blocked 로딩시간이 많아지면 정말 짜증이 나서 페이지를 안들어가는건 당연지사🙅🏻♀️
4) <script src="main.js"></script>를 <head>안에 defer속성과 사용한다면?
3번과같이 HTML요소들을 읽는것과 병렬로 JS를 다운받고 실행하지만, defer속성을 사용했을떄는 HTML요소들을 다 실행하고 페이지가 준비되고나서 JS파일이 실행이된다!!
이렇게되면 3번의 단점들을 다 보완해주고 로딩시간도 가장 단축되어 제일 효율적인 방법이 되는것이다.
다수의 JS를 사용했을때 blocked이 없어 마음이 편-안 해진다 ㅎㅎ
이로써 <script src="main.js"></script>를 사용할때는 <head>안에 defer속성을 사용하여 해야 되는 이유를 알아보았다.
또한, JS는 매우 유연한 언어이기에 use strict;를 작성해줘야 엄격한모드로 오류가나도록 해준다.
🎯개념정리
강의를 듣고, async와 defer를 차이와 사용하는 방법은 알았지만, 그래도 이 속성들이 무엇을 의미하는지 명확하지않아 구글신으로 찾아보고 공부를했다.
1. async
<script>태그의 async 속성- 스크립트가 나머지 페이지와는 비동기적으로 실행
- 브라우저가 페이지를 파싱하는 동안에도 스크립트가 사용가능해지면 곧바로 실행
- async 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값
<script>요소가 외부 스크립트를 참조하는 경우에만 사용- src 속성이 명시된 경우에만 사용
2. defer
<script>태그의 defer속성- 페이지(HTML)가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시
- defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값
<script>요소가 외부 스크립트를 참조하는 경우에만 사용- src 속성이 명시된 경우에만 사용
🚀참고자료
