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>