190201 TIL AMAZON step3 - layer && DOMContentLoaded

» 1막, TIL (Today I Learned)

AMAZAON step3

드디어 PR을 날렸닷!
데모페이지

feb-01-2019 17-10-38

image

질문도 많이 남겨서 뿌-듯

DOMContentLoaded

아직 머지는 안됐지만, 그리고 안되겠지만, 기다리는 동안 STEP4 내용을 예습했다. document.addEventListener("DOMContentLoaded", function(){})을 통해 DOM 트리가 완성되면 ~해라 할 수 있다. 보통 init()을 많이 그 안에 넣는다.

script 태그

async vs defer attributes

보통 script 파일은 body 태그가 닫히기 전에 위치해야 DOM 파싱이 방해받지 않는다. script tag에는 asyncdefer 속성이 있다.

image

기본 script

HTML file parsed until the script is hit -> parsing stops -> a request will be made to fetch the file -> script will be executed befroe parsing is rescued.

image

async

image

differ

image

What to use?

if (script === modular && !relying on scripts) async;  
else if (script relies on other scripts) differ;  
else if (script is small && relying on async script) inline script (w/o attributes above the async scripts)