多个JS文件性能优化 - 一块一

页面中引入的JS文件是阻塞式加载的，这样会影响页面性能。以下是JS文件性能优化方法：

一：将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面完成了渲染

由于JS文件是阻塞式加载，当加载JS文件时，页面停止渲染，这样页面会出现不完整状态。将JS文件的<script>放在页面底部，这样能在加载JS文件时确保页面渲染完成。

二：尽可能的合并脚本文件。页面中<script>标签越少，加载也就越快，响应速度就越快。无论是外链脚本还是内嵌脚本都是如此。

通常一个大型网站或应用需要依赖多个JS文件。可以把多个文件合并成一个，这样只需要引用一个<script>标签，就可以减少性能消耗。文件合并的工作可通过离线的打包工具或者一些实时的

在线服务来实现。

注意：内嵌脚本放在引用的外链样式表的<link>之后会导致阻塞去等待样式表单下载。这样做事为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议不要把内嵌脚本紧跟在<link>标签后面

三：采用无阻塞下载JS脚本的方法。

较少JS文件大小并限制HTTP请求数在功能丰富的WEB应用或大型网站上并不是总可行。WEB应用的功能越丰富，所需要的JS代码就越多，尽管下载单个较大的JS文件只产生一个HTTP请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载JS文件，这样做在某种程度上说不会阻塞浏览器。

无阻塞加载脚本的本质：在页面加载完成后才加载JS代码。这就意味着在window.onload事件触发后再下载脚本。实现方法：

1. 延迟加载脚本 ：

HTML4为<script>标签定义了一个扩展属性：defer。但defer属性只被IE4和FireFox3.5更高版本的浏览器支持。所以不是一个跨浏览器解决方案。在其他浏览器中，defer直接被忽略，JS文件仍会造成阻塞。如果浏览器支持defer属性，可以这样写：

1 <script type="text/javascript" src="script1.js" defer></script>

带有defer属性的<script>标签可以放置在文档的任何位置。对应的JS文件将在页面解析到<script>标签时开始下载，但不会执行。 直到DOM加载完成，即onload事件触发前才会执行。

当带有defer属性的JS文件下载时，不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起下载。

<title>Script Defer Example</title> </head> <script type="text/javascript" defer> alert( "defer" ); </script> <script type="text/javascript"> alert( "script" ); </script> <script type="text/javascript"> window.onload = function (){ alert( "load" ); </script> </body> </html>

不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的 <script> 元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。

2.异步加载JS文件：async属性:使用所有浏览器

HTML5为<script>标签定义了一个新的扩展属性：async。作用和defer一样，能够异步加载和执行脚本，不因为加载脚本而阻塞页面渲染。但是：使用async，JS脚本一旦下载好了就好执行，所以很有可能不是按照原本的顺序来执行。如果JS脚本前后有依赖性，使用async和有可能会出错。

<script type="text/javascript" src="script1.js" async="true"></script>

四：动态脚本元素

文档对象模型（DOM）允许您使用 JavaScript 动态创建 <script> 元素。

var script = document.createElement ("script");
    script.type = "text/javascript";
 script.src = "script1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

新的<script>元素加载script1.js源文件。此文件当元素添加到页面之后会立刻开始下载。技术重点：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的HTTP连接）。

当文件使用动态脚本节点下载时，返回的代码通常是立即执行（除了FireFox和Opera，他们讲等待此前的所有动态脚本执行完毕）。当脚本是“自运行”类型时，这一机制运行正常。但是如果脚本只包含供页面其他脚本调用的接口，则会带来问题。这种情况下，您需要跟踪脚本下载完成是否准备妥善，可以使用动态<script>节点发出事件得到相关信息。

新的 <script> 元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在 <head> 部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。

Firefox、Opera, Chorme 和 Safari 3+会在 <script> 节点接收完成之后发出一个 onload 事件。您可以监听这一事件，以得到脚本准备好的通知：

var script = document.createElement ("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
    alert("Script loaded!");
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

Internet Explorer 支持另一种实现方式，它发出一个 readystatechange 事件。 <script> 元素有一个 readyState 属性，它的值随着下载外部文件的过程而改变。 readyState 有五种取值：

“uninitialized”：默认状态

“loading”：下载开始

“loaded”：下载完成

“interactive”：下载完成但尚不可用

“complete”：所有数据已经准备好

微软文档上说，在 <script> 元素的生命周期中， readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个 readyState 值所表示的最终状态并不一致，有时 <script> 元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在 readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除 readystatechange 事件句柄（保证事件不会被处理两次）：

var script = document.createElement("script")
script.type = "text/javascript";
//Internet Explorer
script.onreadystatechange = function(){
     if (script.readyState == "loaded" || script.readyState == "complete"){
           script.onreadystatechange = null;
           alert("Script loaded.");
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

注意： 大多数情况下，您希望调用一个函数就可以实现 JavaScript 文件的动态加载。下面的函数封装了标准实现和 IE 实现所需的功能： 通过函数进行封装

function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
    } else { //Others
        script.onload = function(){
            callback();
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
loadScript("script1.js", function(){
    alert("File is loaded!");
在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏览器之中，只有 Firefox 和 Opera 保证脚本按照您指定的顺序执行。其他浏览器将按照服务器返回它们的次序下载并运行不同的代码文件。但是可以将下载操作串联在一起以保证他们的次序，如下：
loadScript("script1.js", function(){
    loadScript("script2.js", function(){
        loadScript("script3.js", function(){
            alert("All files are loaded!");
此代码等待 script1.js 可用之后才开始加载 script2.js，等 script2.js 可用之后才开始加载 script3.js。虽然此方法可行，但如果要下载和执行的文件很多，还是有些麻烦。如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。
　　动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。
五：使用 XMLHttpRequest(XHR)对象
　　此技术首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态 <script> 元素将 JavaScript 代码注入页面。
var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement ("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
xhr.send(null);
方法的主要优点是，可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。
　　此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载（CDN 指"内容投递网络（Content Delivery Network）"，所以大型网页通常不采用 XHR 脚本注入技术。