자바스크립트 로딩

w3의 script 명세서... 아.. 못 읽겠다...

그래서...

를 발견.

script가 어떻게 로딩이 되는지 잘 설명이 되어있습니다. (ㅠㅠ b )

제가 이해할 수 있는 부분만 간략하게 설명을 드리도록 하겠습니다.

<script src="//other-domain.com/1.js'></script>
<script src="2.js"></script>

html 파일에서 위와 같은 부분이 있다면 다음과 같은 과정을 거칩니다.

스크립트 병렬 다운로드 => 1.js 다운로드 끝나자마자 실행.(그전에 실행되던 스크립트 있으면 그 스크립트 끝날 때까지 기다림) => 2.js 실행

이 과정이 일어날 때 브라우저 렌더링 올스톱. 그래서 렌더링을 조금이라도 빨리하려면 스크립트를 <body> 태그 맨 끝에 붙여야함.

<script src="//other-domain.com/1.js' defer></script>
<script src="2.js" defer></script>

마소는 이런 스크립트 로딩 문제점을 인식하고 defer 라는 기능을 소개함.

결론부터 얘기하면 defer는 반드시 외부 스크립트 로딩용으로만 써야함.

공식 명세서가 그렇게 되어있고 그렇지 않으면 실행순서 보장이 안됨.

defer는 script를 다운로드 했다가 DOMContentLoaded 라는 이벤트가 실행되기 직전에 script를 실행함.

실행 순서는 선언한 순서인데, 외부스크립트를 로딩할 때만 순서가 지켜짐.

또 하나. 익스플로러 4부터 9까지는 defer 기능을 제대로 소화못함. (이런...) 예를 들어서.

console.log('1');
document.getElementsByTagName('p')[0].innerHTML = 'Changing some content';
console.log('2');

console.log('3');

이런 파일이 있을 때 외부에서

<script src="//other-domain.com/1.js' defer></script>
<script src="2.js" defer></script>

이렇게 불러들이면 콘솔에 1,3,2 순서로 찍힘. 1.js가 실행되다가 2.js가 실행됨.

그럼 버그만 고치면 defer를 쓰면 만사해결 아니야? 라고 생각할지 모르지만,

결국 defer도 약점이 DOMContentLoaded라는 이벤트가 실행될 때까지 기다려야 함.

그래서 download 되자마자 바로 실행될 수 있는 async 기능이 소개됨.

<script src="//other-domain.com/1.js' async></script>
<script src="2.js" async></script>

위와 같이 코드를 짜면 async로 script를 실행하게 됨.

문제는 다운로드가 끝나자마자 실행됨으로 1,2 동시에 다운로드 받으면 어느 쪽이 먼저 실행될지 알 수가 없음.

jquery와 플러그인을 이렇게 선언하면 아주 X됨.

하... 그럼 결국 자바스크립트를 이용해서 해결해야 하나?

requireJS 혹은 LabJS를 비롯한 기타 등등 방법이 있는데...

그럼 스크립트를 매니지해주는 그 스크립트는 누가 매니지 하는 등의 철학에 모순이 있으며,

추가적인 스크립트 로딩이 있다는 점에서 성능 최적화와 거리가 있음. (지금 여기서 하는 논의가 스크립트 최적화입니다.)

그럼 과연 어떻게 해야 할까요?

다음 편에 계속...

sukyology