<<High Performance JavaScript>>读书笔记-1.Loading and Execution

<script>标签会阻塞页面的解析过程，新的浏览器已经充许<script>标签之间可以并行下载，但仍然会阻塞其它资源的下载

 

Nonblocking Scripts

 

1.Deferred Scripts

<scripttype="text/javascript" src="file1.js" defer></script>

ie支持。

一个带有defer属性的<script>标签可以放置在文档的任何位置。对应的JavaScript 文件将在<script>被解析

时启动下载，但代码不会被执行，直到DOM加载完成（在onload 事件句柄被调用之前）

2.DynamicScript Elements

<script>和普通dom元素一样，可以被动态创建。用这种方法生成的<script>不会阻塞页面的解析过程

<script>的状态

Uninitialized

Loading

Loaded

Interactive

Complete

这些状态不一定全部出现

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 {
        script.onload = function() {
            callback();
        }
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

3.XMLHttpRequestScript Injection

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);