JavaScript loader Head.js 자바스크립트를 빠르게 로딩하자.

이미 아는분들을 아는 head.js를 직접 써봤습니다. 결과는 빠르네요!

모바일 페이지를 연습 삼아 작업에 들어갔는데 jQuery 라이브러리와 jQuery모바일 라이브러리만 로드 시켰을뿐인데 로딩 속도가 아이폰에서 급감하는것을 발견. head.js가 바로 생각났습니다. 적용시켜보니 역시 느린 모바일에선 티가 많이 나는군요. 물론 웹에서도 효과가 충분한것 같습니다.

원리는 순차적으로 로드되는 js들을 병렬방식으로 로드 시켜 속도를 올려준다는군요. 그 이외에도 이런저런 추가기능이 있는 버전과 순수 로딩 속도를 높여주는 기능만 가진 버전 2가지가 있는데 다른 기능들도 차차 써봐야겠습니다.

사용법은 head.js를 삽입하고 다음과 같이 js들을 로드하면 됩니다.
`
// the most simple case. load and execute single script without blocking.
head.js(“/path/to/file.js”);

// load a script and execute a function after it has been loaded
head.js(“/path/to/file.js”, function() {

});

// load files in parallel but execute them in sequence
head.js(“file1.js”, “file2.js”, … “fileN.js”);

// execute function after all scripts have been loaded
head.js(“file1.js”, “file2.js”, function() {

});

// files are loaded in parallel and executed in order they arrive
head.js(“file1.js”);
head.js(“file2.js”);
head.js(“file3.js”);

// the previous can also be written as
head.js(“file1.js”).js(“file1.js”).(“file3.js”);
`
속도 차이를 볼수 있는 데모페이지. SCRIPT SRC in head / SCRIPT SRC in bottom / head.js on head 나눠서 확인할 수 있습니다.

다운로드 및 자세한 사항은 개발 사이트에서 확인 가능합니다.

* 모바일에 사용해본 결과 단순히 저렇게 불러들일시 jQueury모바일이나 JQTOUCH를 head로 로딩할시 DOM이 뼈다귀처럼 로딩이 된후 솔루션들이 먹히는 단점이 있군요.