[TIL] JavaScript: console, async vs defer

🔑 Point!
🎉 async
🎉 defer

1. console

• console은 언어 자체는 아니지만 통상적으로 많이 쓰는 아이기 때문에 node.js, web APIs에서 공통적으로 포함되어 있다.
  따라서 똑같은 console API로 node.js와 브라우저(콘솔 창)에 둘 다 출력할 수 있는 것이다.
• javascript는 프로그램이 아니다. (node.js에는 js 엔진이 있는 것이고, consolw API는 브라우저가 이해할 수 있는 함수를 제공)

2. async vs defer ✨

JS file을 HTML에 연결하는 방법은 몇 가지가 있다.
그 중에 어떻게 연결하는 방법이 효율적인지 이유를 알고 사용해야 한다.

브라우저가 HTML을 읽고 보여주는 과정은 크게 
parsing HTML, fetching js, executing js, page is ready 로 구성되어 있으며
head의 위에서 아래로 순차적으로 진행한다. 

1. head + script

• parsing HTML 을 하다가 js파일을 fetching js > executing js 을 한 후에 다시 parsing HTML을 하는데 js파일 크기가 클 경우 시간이 오래걸린다.

2. body + script

• parsing HTML을 다 한후에 사용자에게 페이지가 보여지고 나서야 js파일을 다운받고 실행한다.
• 이 경우 HTML은 빨리 볼 수 있지만, javascript에 의존하는 요소가 있는 경우에, 그리고 의존도가 높으면 정상적인 웹페이지를 보기 까지에는 오랜 시간이 걸린다.

3. head + script asyns

asyns (Asynchronous :동시에 일어나지 않는, 비동기)

• parsing HTML, fetching js는 함께 진행될 수 있지만, fetching js가 된 후에 js실행까지 완료하기 까지 HTML parsing이 완료 되지 않는다. executing js 완료 후에서야 parsing HTML가 마무리 된다.

• 즉 parsing이 안된 HTML을 조작해야하는 상황이 올 수 도 있다.

• 사용자가 페이지를 보는데 여전히 시간이 많이 걸림

• js파일이 여러개일 경우, 정의된 스크립트 순서에 상관없이 다운로드 되며 순서에 의존적인 js라면 문제가 있다.

4. head + script defer

defer (연기하다, 미루다)

• script에 defer을 넣어서 executing js를 제일 마지막으로 미룬다. 그러면 parsing HTML, fetching js는 완료된 상태에서 사용자에게 페이지를 보여줌

• 이는 비교적 보여지는 시간이 빠르면서 도 이미 다운받은 js파일을 실행만 하면 되기에 더 효율적이다.

• 또한 여러개의 js파일을 가져올 때에도 다운은 미리 받아둔 상태에서 page ready가 끝난 후 순차적으로 실행하기에 순서에 의존적인 JS파일이라도 문제가 없다.

참고 자료
👉Console MDN