JavaScript modules, defer, async 메모

JavaScript 생태계는 아무리 봐도 카오스다. 

 

- module 소개: https://ko.javascript.info/modules-intro

모듈 소개

 

- defer, async: https://ko.javascript.info/script-async-defer

defer, async 스크립트

여러본 본 내용인데도, 역시나 혼란스러워서 자주 아리까리하다. 

 

Three.js 쪽 공부를 하는데, module script를 사용해서 오랜만에 위의 문서를 다시 읽었다. 

 

요약

1. defer, async 

script를 로드하는게 html 파싱을 블락킹한다. 그래서 주로 듣는 해결책은 script 태그를 가장 하단에 포함시키는 것이다. 

- defer 외부 스크립트를 부를때, script를 백그라운드에서 다운로드를 한다. 하지만 DOMContentLoaded event가 발생하기 전에 실행되는데, 이는 html 파싱할거 다하고, 발생하는 이벤트이다. 즉, html파싱 다하고 화면에 그린다음에, DOMContentLoaded event가 발생하는데, 이사이에 script를 백그라운드로 다운로드 받고, 실행을 할때까지 기다린다는 것이다. 그래서 script는 다 그려진 dom 트리를 볼수가 있다. 

 

- async defer처럼 백그라운드에서 다운로드 하긴하는데, 완전 걍 자기 따로다. async스크립트끼리 서로 순서를 지키는것도 아니고, html페이지도 async가 뭘하던말던 걍 처리된다(asnyc script가 실행될때는 파싱이 잠깐 멈춘다고함). 글고 먼저 로드되면 걍 먼저 실행된다. 

 

 

2. module

import될때 한번만 실행되고, import 하는 여러 곳에서 공요한다. 

 

// admin.js
export let admin = {
  name: "John"
};

// 📁 1.js
import {admin} from './admin.js';
admin.name = "Pete";

// 📁 2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// admin.js는 한번 실행되고 공유됨