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>


신고


티스토리 툴바