[JS] JavaScript - async와 defer 차이

 

Web APIs

• API
  • Application Programming Interfacer 의 약자
  • 소프트웨어 프로그램 내부에 존재하는 기능 및 규칙의 집합
  • 개발자가 앱을 통해 사용자의 웹브라우저에서 상호작용할 수 있도록 하는 코드기능들, 사용자의 컴퓨터 상에 있는 다른 소프트웨어 및 하드 웨어, 또는 서드파티 웹사이트나 서비스의 집합을 의미
  • 개발자가 어떻게 동작하는 지 몰라도 사용법만 알면 기능을 쉽게 쓸 수 있도록 도와준다.
• console.log(' hello world'); 가 가능한 것은 브라우저가 WebAPI를 통해 함수를 제공해주기 때문이다.

 

js 파일의 기본적인 위치

⇒ HTML에서 javaScript를 포함할 때 쓸 수 있는 방법들

1. js 파일의 head태그 안에 위치 시켰을 때
   • 순서 : parsing HTML → fetching js → excuting js → parsing HTML : 페이지 준비 끝
     • parsing : HTML파일을 한 줄 씩 읽음
     • fetching : js 파일 다운받음
     • excuting : js 파일 실행
   • 단점 : 사용자가 js파일을 받는 동안에는 화면이 완성되지 않은 상태일 수 있음 → No good
2. js 파일을 body태그 맨 끝에 위치 시켰을 때
   • 순서 : parsing HTML → fetching js → excuting js : 페이지 준비 끝
   • 장점 : 사용자가 html화면을 빨리 볼 수 있다.
   • 단점 : 페이지에서 js가 중요한 역할을 한다면,
             사용자가 의미있는 페이지를 보는데 걸리는 시간이 길어진다. → No good
3. async와 defer 사용하기
   • 각 script안에 추가적으로 선언하는 방법
   • 내용이 길어서 따로 정리함

 

async vs defer

• async
  • head안에 script를 선언하되 async와 함께 사용
  • parsing HTML을 시작 → script태그 만나면 병렬적으로 fetching js → 병렬적으로 이루어지다가 fetching 끝나면 excuting js → parsing HTML
  •  

    

  • 장점 :  body끝에 위치하는 것 보다는 시간이 절약된다.
  • 단점
    • html parsing 전에 js excuting이 끝나서 js에서 html 요소를 참조해야 된다면 페이지가 아직 정의되지 않아서 오류가 발생할 수 있다.
    • js를 다운받아 실행하는 동안 html parsing이 중지 될 수 있어서 여전히 사용자가 페이지를 보는데 많은 시간 소요된다.
    • 참조 js가 여러가지 라면 작성 순서에 상관없이 다운로드 된 순서대로 실행되는데, 만약 작성자의 페이지가 js순서에 의존적이라면 문제가 발생할 수 있다.
• defer
  • head안에 script를 선언하되 defer와 함께 사용
  • parsing HTML → script만나면 fetching js 명령 후 동시에 parsing HTML 계속진행 → parsing 끝나면 js파일 excuting

  • 

  • 이것이 가장 좋은 옵션, 사용자에게 바로 화면을 보여주고, js 바로 실행가능
  • js 파일이 여러개라도 파일을 다 다운받아 두고 HTML파일이 준비 된 후에 작성 순서대로 js파일을 실행시키기 때문에 async같은 문제는 발생하지 않는다.