-
[드림코딩 by 엘리] 자바스크립트 기초 강의(2)스터디플래너/복습하기 2021. 10. 11. 21:58
콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) https://youtu.be/tJieVCgGzhs
HTML 웹 문서 안에 script가 있을 때, script가 어디에 있는지 그 순서에 따라 작동하는 방식이 조금씩 다르다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="script.js"></script> </head> <body></body> </html>
위 코드는 <head> 안에 script 문이 있다. 이 경우 <title>까지 파싱한 후 script문을 받아오고 실행한 다음 </head>부터 다시 parsing한다. </html>까지 모두 파싱하면 페이지가 준비되어 볼 수 있다. 이 경우 js 파일의 용량이 크다면 다운받고 실행하는데 오랜 시간이 걸린다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body></body> <script src="script.js"></script> </html>
위 코드는 <body> 태그 아래에 script문이 있다. 이 경우 html문 내 모든 태그를 파싱하고 페이지를 보여준다. 그리고 나서 js 파일을 다운/실행한다. 이 경우에는 html이 js에 의존적이라면 html이 먼저 실행된 뒤 js가 실행되므로 js가 적용된 부분을 제대로 보기 어렵다.
나는 프로젝트를 할 때, 대부분의 코드를 이렇게 작성했다. 지금 이 설명을 듣고나서 보니 나의 경우 페이지 내에 수량 변경이나 서버에 데이터를 보내는 일이 많아 문제가 없었지만, 페이지에 효과를 주거나 js로 계산하여 그 내용을 페이지에 보여주는 경우였다면 제대로 표기되지 않았을 것 같다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script async src="script.js"></script> </head> <body></body> </html>
이번엔 script 태그 내 async 옵션을 추가했다. 이 경우 html parsing과 js fetching을 거의 동시에 실행한다. 그리고 js를 실행할 때까지 기다렸다가 실행이 끝나면 html문을 parsing 한다. html parsing과 js fetching을 동시에 하기 때문에 시간을 절약할 수 있다는 장점이 있지만, DOM 조작 시점에 정의가 안되어 있을 수도 있다는 단점이 있다. 그리고 여러개의 script 태그가 있다면 각각의 js를 다운받은 후 바로 실행하기 때문에 각각의 js 순서에 의존적이라면 좋지 않다.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script defer src="script.js"></script> </head> <body></body> </html>
마지막으로 script태그 내 defer 옵션을 추가한 경우이다. 이 경우 html parsing과 js fetching을 동시에 진행하고, 페이지가 준비되면 js를 실행한다. 위 유형 중 가장 이상적인 방식이다.
'스터디플래너 > 복습하기' 카테고리의 다른 글
[자바로 구현하고 배우는 자료구조] 2.선형 자료구조(연결 리스트&배열)(2) (0) 2021.10.18 [자바로 구현하고 배우는 자료구조] 2.선형 자료구조(연결 리스트&배열)(1) (0) 2021.10.11 [드림코딩 by 엘리] 자바스크립트 기초 강의(1) (0) 2021.10.10 [자바로 구현하고 배우는 자료구조] 1.자바 특성 및 알고리즘 기본(2) (0) 2021.10.10 [자바로 구현하고 배우는 자료구조] 1.자바 특성 및 알고리즘 기본(1) (0) 2021.10.09