高性能javascript（第一章加载和运行）

1、当 JavaScript 运行时其他的事情不能被浏览器处理

　　页面生命周期

<html>
<head>
    <title>Script Example</title>
</head>
<body>
<p>
    <script type="text/javascript">
        document.write("The date is " + (new Date()).toDateString());
    </script>
</p>

</body>

</html>

　　分析：浏览器解析页面 => 遇到p => 浏览器停下来，运行js代码 => 浏览器继续解析div => 遇到js 、 src属性下载js 、运行js代码

　　在下载解析和运行js代码的过程中、页面解析和用户交互是被完全阻塞的。

<html>
<head>
    <title>Script Example</title>
    <-- Example of inefficient script positioning -->
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p></body>
</html>

　　浏览器在遇到<body>标签之前,不会渲染页面的任何部分 ,

图解：原先的浏览器不支持并行下载js文件

虽然ie8以上的较先的浏览器支持并行下载，即一个<script>标签不必阻塞<script>标签，但是JavaScript 的下载仍然要阻 塞其他资源的下载过程,例如图片。并且同样需要所有的js代码下载执行完毕以后才会继续解析页面

改进一：将脚本放在底部。这样就可以在下载执行解析js代码之前就可以让页面显示传在用户面前

<html>
<head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommended script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

HTTP请求：下载一个100k的文件比下载四个25k的文件要快，YUI库的联合句柄

<html>
<head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommended script positioning -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></script>
</body>
</html>

非阻塞方式一：

尽管下载一个大 JavaScript 文件只产生一次 HTTP 请求,却会锁定浏览器一大段时间。

非阻塞脚本的秘密在于,等页面完成加载之后,再加载 JavaScript 源码。从技术角度讲,这意味着在 window 的 load 事件发出之后开始下载代码。有几种方法可以实现这种效果。

指定defer属性的<script>立即启动下载，但是代码不会立即执行，直到dom 加载完毕

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

支持defer的浏览器输出的顺序： “script”,“defer”和“load”。

不支持defer的浏览器的输出顺序：“defer”,“script”和“load”

动态脚本元素（即使用dom的方法创建script）

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

技术的重点在于: 无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。

ff/opera/chrome的load事件：

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

ie中readystatechange事件状态：（5种取值）：

略

兼容版本：

    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_r("head")[0].appendChild(script);
    }

但要注意,浏览器不保证文件加载的顺序，但是你可以使用下面的方式保证按序加载：

    loadScript("file1.js", function () {
        loadScript("file2.js", function () {
            loadScript("file3.js", function () {
                alert("All files are loaded!");
            });
        });
    });

如果多个文件的次序十分重要，最好的办法还是将这些文件按照正确的次序合并成一个文件

非阻塞方式二：XHR 脚本注入

    var xhr = new XMLHttpRequest();
    xhr.open("get", "file1.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);

两个优点：

1、你可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外(换句话说不受<script>标签约束),它下载后不会自动执行,这使得你可以推迟执行,直到一切都准备好了。

2、同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是:JavaScript 文件必须与页面放置在同一个域内。

1、推荐的非阻塞模式：

第一种方式：包含动态加载 JavaScript 所需的代码（如loadScript）, 然后加载页面初始化所需的除 JavaScript 之外的部分。例如:

<script type = "text/javascript" src = "loader.js" ></script>
<script type="text/javascript">
    loadScript("the-rest.js", function () {
        Application.init();
    });
</script>

将此代码放置在 body 的关闭标签</body>之前。这样做有几点好处:

首先,确保 JavaScript 运行不会影响页面其他部分显示。

其次,避免使用额外的事件处理(例如 window.onload) 来得知页面是否已经准备好了。

第二种方式：另一个选择是直接将 loadScript()函数嵌入在页面中,这可以避免另一次 HTTP 请求

<script type="text/javascript"> 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_r("head")[0].appendChild(script);
}
loadScript("the-rest.js", function () {
    Application.init();
});
</script>

关于loadScript()函数的封装：

　　　可以使用The YUI 3 approach

　　　LazyLoad 库

　　 LABjs库

总结：

管理浏览器中的 JavaScript 代码是个棘手的问题,因为代码执行阻塞了其他浏览器处理过程,诸如用户界面绘制。每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的)并执行,然后再继续处理页面其他部分。但是,有几种方法可以减少 JavaScript 对性能的影响:

1、将所有<script>标签放置在页面的底部,紧靠 body 关闭标签</body>的上方。此法可以保证页面在脚本运行之前完成解析。

2、将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。不论外部脚本文件还是内联代码都是如此。

3、有几种方法可以使用非阻塞方式下载 JavaScript:
　　——为<script>标签添加 defer 属性(只适用于 Internet Explorer 和 Firefox 3.5 以上版本)

　　——动态创建<script>元素,用它下载并执行代码
　　——用 XHR 对象下载代码,并注入到页面中