JavaScript 파일을 웹페이지에 추가하는 방법은 여러 가지가 있는데, 과거엔 주로 head tag에다 추가해 줄 때가 많았으나, 이렇게 하면 브라우저가 JavaScript 파일을 다 읽어 들이는 동안 웹페이지의 렌더링이 잠깐 멈추게 되는 부작용이 있어서, 최근엔 웹페이지를 되도록 빠르게 화면에 뿌려주려고 body tag 마지막에 얹어 주는 것을 권장하고 있다.

그런데 최근 날로 웹 애플리케이션의 개발과 그 활용 방법론이 많이 알려지면서 JavaScript 파일이 점점 더 커지는 경향이 있는데, 무조건 내려받게 되는 이런 JavaScript 파일의 용량을 조금이라도 줄이려는 노력도 따라서 필요해진다. 그래서 페이지에 얹어진 JavaScript 파일 중에 특정 기능이 빈번히 사용되지 않고 특별한 경우에만 쓰이는 것이라면, 이마저도 주요 JavaScript 파일에서 빼어내 특정 조건에 따라 필요할 때만 로딩해주는 기술이 쓰일 수 있다.

jQeury에선 이럴 때에 꼭 안성맞춤인 jQuery.getScript() 함수를 제공하고 있는데, 사용법은 다음과 같다.

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
   console.log(data); //data returned 
   console.log(textStatus); //success 
   console.log(jqxhr.status); //200 
   console.log('Load was performed.');
});

jQuery를 쓰지 않고 일반 JavaScript로 구현하려면 javascript_loader.js를 참고해서 구현해 볼 수도 있다.

웹페이지를 구성하는 주요 기술 중 JavaScript의 비중이 점점 더 커지는 것은 어쩔 수 없지만, 그렇다고 다른 기술의 영역까지 침범해서, 그에 따른 나중에 쓸데없이 들어가는 개발과 운용상의 소모적 낭비는 피해야 할 것이다.

이와 관련된 주제의 강연 영상: Enough with the JavaScript Already by Nicholas Zakas – YouTube

참고로, 특정 요소에만 사용되는 JavaScript 함수를 따로 로딩하려고 할 때 사용될 수도 있는 jQuery plugin으로 proximity-event가 있는데, 특정 요소에 마우스 커서가 정해진 사정거리 안으로 접근하면 그에 관한 event를 쏴줘서 여기에 등록된 함수를 자동 실행시켜주는 기능이 있다. 그런데 여기서 주의해야 할 점은, 가령 웹 Form의 특정 요소에 어떤 기능을 추가해 주고 싶을 때에는 접근성을 고려해서 focus event에도 이 함수 로딩 관련 JavaScript가 실행되었는지 확인해서, 로딩되지 않았다면 따로 이 추가 기능의 JavaScript 파일을 불러드리도록 처리해야 한다.

관련된 주제의 글

• 느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법 (11)
• WordPress에서 JavaScript 파일을 페이지 마지막 부분에 추가하는 법 (3)
• script 태그의 async와 defer 속성 (6)
• 탄생 3주년을 맞은 jQuery 1.3 (2)
• 웹 페이지 최적화 정도의 등급을 매기는 도구인 YSlow가 공개되다 (0)