Defer loading of JavaScript 延时加载Javascript

Defer loading of JavaScript
延时加载javascript文件

Overview

Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding 

up execution and rendering time.

通过延时加载在页面最开始展示时不使用的javascript脚本，减少下载内容的大小。并且可以优先下载其他资源以提升页面显示时间。




Details

Like stylesheets, scripts must be downloaded, parsed, and executed before the browser can begin to render a web page.
和样式表一样，javascript脚本必须下载分析并且 执行之后页面才开始绘制


Again, even if a script is contained in an external file that is cached, processing of all elements below the script is blocked until the browser loads the code from disk and 

executes it. However, for some browsers, the situation is worse than for stylesheets: while JavaScript is being processed, the browser blocks all other resources from being 

downloaded.
比样式表更严重的是，有些浏览器在javascript脚本执行的 时候浏览器会组所其它所有资源的下载。
 For AJAX-type applications that use many bytes of JavaScript code, this can add considerable latency.
对于一些基于AJAX设计的应用，使用了大量的javascript脚本会增加这种情况的风险
For many script-intensive applications, the bulk of the JavaScript code handles user-initiated events, such as mouse-clicking and dragging, form entry and submission, hidden 

elements expansion, and so on. All of these user-triggered events occur after the page is loaded and the onload event is triggered. Therefore, much of the delay in the "critical 

path" (the time to load the main page at startup) could be avoided by deferring the loading of the JavaScript until it's actually needed. While this "lazy" method of loading 

doesn't reduce the total JS payload, it can significantly reduce the number of bytes needed to load the initial state of the page, and allows the remaining bytes to be loaded 

asynchronously in the background.
对于一些包含大量事件注册的脚本，将脚本放置到load事件之后注册是能够优化性能的。

To use this technique, you should first identify all of the JavaScript functions that are not actually used by the document before the onload event.
为了使用这项技术，你需要首先确定哪些脚本不需要在页面加载的时候执行。
 For any file containing more than 25 uncalled functions, move all of those functions to a separate, external JS file. 
对于任何包含超过 25个没有使用的调用函数的文件，移动所有这些函数到一个独立的js文件中
This may require some refactoring of your code to work around dependencies between files. 
这需要对你的代码进行一些重构
(For files containing fewer than 25 uncalled functions, it's not worth the effort of 

refactoring.)
对于包含少于25个函数调用的文件，这个工作不会是重构的效果变差。
Then, you insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event. You can do this by any of 

the usual scripting means, but we recommend a very simple scripted DOM element (to avoid cross-browser and same-domain policy issues). Here's an example (where 

"deferredfunctions.js" contains the functions to be lazily loaded): 
下面是一个例子

<script type="text/javascript">

 //  动态添加javascript
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 //  当页面加载完成后加载 javascript文件
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>