Javascript 비동기식 load 로 페이지 빠르게 로딩하기

javascript 를 읽기 전에 페이지가 로딩되어야 브라우저에서 빠르게 렌더딩해서 결과를 보여준다.

jquery 등 대부분의 javascript 는 비동기식으로 로딩이 가능하다.

<script type="text/javascript">

 // Add a script element as a child of the body

 function downloadJSAtOnload() {

 var element = document.createElement("script");

 element.src = "YOURJAVASCRIPT.JS";

 document.body.appendChild(element);

 }

 // Check for browser support of event handling capability

 if (window.addEventListener)

 window.addEventListener("load", downloadJSAtOnload, false);

 else if (window.attachEvent)

 window.attachEvent("onload", downloadJSAtOnload);

 else window.onload = downloadJSAtOnload;

</script>

아래는 google.com 의 원문

https://developers.google.com/speed/docs/insights/BlockingJS

Defer loading of JavaScript

In most cases, the bulk of the JavaScript code handles user-initiated events, such as mouse-clicking and dragging. All of these user-triggered events occur after the page is loaded and the onload event is triggered. In order to defer loading of these JavaScripts insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event. We recommend adding a very simple scripted DOM element. Here’s an example, where deferredfunctions.js contains the resources that need to be deferred:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>