script async 와 defer의 차이점 콘솔 출력

콘솔 출력

node.js

node.js에서 브라우저에서 출력되는 console log를 똑같이 확인 가능하다 -> console API가 있기때문에 똑같이 확인가능 브라우저가 이해 할 수 있는 함수

문법관련 공부할때 참조 (MDN)

https://developer.mozilla.org/en-US/docs/Learn

js 를 header 에 넣었을때

js를 먼저 다운로드하고 parsing html을 해주기때문에 페이지가 구성되는 속도가 느려질 수 있다.

js 를 body 끝나기 전에 넣었을때

• 페이지의 기본 구조가 완성된후에 js가 실행하게됨

• 단점은 js에 많이 의존하는 페이지는 parsing HTML이 끝난 후에 시작되므로 사용자들이 정상적인 화면을 보기까지의 시간이 길어짐

async

• 병렬로 js를 다운로드 받자 명령한 후에 다시 parsing HTML을 하다가

  js가 다 다운로드완료가 되면 parsing을 멈추고 js 를 실행하고 parsing을 다시시작함

  시간이 단축되는 장점이 있다. ​

  ​

• parsing HTML js를 다운받기위해 언제든 멈출 수 있기때문에 사용자가 페이지를

  보는데 시간이 더 걸릴 수 있는 단점이 있다.

defer

• 사용자들에게 정상적인 페이지를 먼저 보여준 뒤 에 js가 실행함 a,b,c의 js가 있을때 순서대로 다운받은후에 실행시켜준다. -> 필요한것을 다 다운받은 후에 순서대로 실행됨

• 제일 실용적이고 효율적임

'use strict';

• added ECMAS SCRIPT 5

• 바닐라스크립트를 쓸때는 선언하는것이 좋

• 파일 제일 위에 선언하면 좋다. 자바스크립트 엔진이 좀 더 효율적이게 실행시켜줌