JavaScript defer & async
Download as PPTX, PDF32 likes4,985 views
JavaScript 태그의 defer / async 에 대한 간단 정리
JavaScript defer & async
- 1. JavaScript defer / async PAEK, Seung-Hyun
- 2. defer / async 목적 JavaScript 로드 및 실행시의 DOM 작성과 Rendering 을 Block 하지 않는다.
- 3. defer / async 지원 브라우저 defer 3.5+ 7+ 5.0+ 4.0+ NA 5.0+ 3.0+ async 3.6+ 8+ 5.0+ 10+ 15.0+ 5.0+ 3.0+
- 4. defer / async 선언 HTML 4.01 <script defer ...> XHTML 1.0 / 1.1 <script defer="defer" ...> HTML5 <script defer ...> <script async ...>
- 5. defer / async 공통Spec. • defer/async 정의 script는 이후의 DOM생성 렌더링을 블럭안함 • defer/async 정의 script는 인라인스크립트에서 사용불가(HTML 5) • defer/async 정의 script 안에서 document.write()는 사용불가(HTML 4.01, XHTML 1.0, 1.1), 또는 권장안함(HTML 5)
- 6. defer / async 차별Spec. defer 정의 script는 스크립트파일을 읽어들인 후 실행은 페이지의 로딩완료후까지 지연된다 async 정의 script는 스크립트파일을 읽어들인 후 실행은 가능한한 빨리 실행된다
- 7. defer / async 차별Spec. 여러 개의 <script>에 defer/async 가 정의된 경우 defer 는 페이지의 로딩 후 실행될 스크립트리스트를 기준으로 순서대로 실행되므로(동기성) 실행순서가 보장되어야 하나 모든 브라우저에서 보장되지는 않음 async 는 스크립트파일의 로딩이 완료된 스크립트부터 비동기적으로 실행되므로, 실행순서를 보장하지 않음. 그러므로 의존성이 있는 스크립트에는 사용시 주의
- 8. defer / async DOM Element1 JavaScript Download JS Parse JS Run DOM Element2 DOM Element1 JavaScript Download JS Parse JS Run DOM Element2 DOM Element3 DOM Element3 DOM Element1 JavaScript Download JS Parse JS Run DOM Element2 DOM Element3 normal defer async
- 9. 감사합니다. Facebook : https://www.facebook.com/pekuid