자바스크립트 파일, script defer, async

load 이벤트 리스너 등록

window.onload : html  파싱 DOM 생성 그리고 외부 콘텐츠(css, images, scripts)가 로드된 후 발생하는 이벤트

 

window.onload = function () {

  document.querySelector('#btn').addEventListener('click', functin() {

     alert('aaaa')

  })

}

 

>> 근데 비효율적임!

왜냐면, 만약 사진이 100개 정도 있으면 그거 다 뜰때까지 기다렸다 실행할거임?

그래서 DomContentLoaded 

HTML파싱 DOM생성 후 발생하는 이벤트 (외부 콘텐츠 로드 기다리지 않음)

document.addEventListener('DOMContentLoaded', function () {

         alert('aaaa');

})

 

HTML5 script 로드 해결법  - defer

html 파싱 후에 비동기로 자바스크립트 파일 불러옴.
파싱 완료 된 후에 스크립트 파일을 가져옴( 하던 작업 안 멈춤 ) 
html 파싱 후에 스크립트 가져오게 됨.

<script src='scripts.js' defer ></script>

 

HTML5 script 로드 해결법  - async

html 파싱과 함께 비동기로 자바스크립트 파일 가져옴

html 파싱이 완료되지 않더라도 먼저 로딩되는 자바스크리트 파일부터 실행시작

자바스크립트 파일이 실행될 때는 HTML 파싱이 중단된다