如何最快的加载外部JavaScript文件

    当<script>标签位于html文档流中的时候,位于<script>后面的html会被阻止渲染，必须等到该script加载完以后才会后面的html才会渲染，通过JavaScript动态的生成一个script标签，可以避免上面你的这个问题，因为这个会是外部加载的script的文件位于html文档流以外。因此动态的加载外部的JavaScript文件可以提高页面的渲染速度，提高用户体验。

 

最佳实践

Steve Souders关于外部的JavaScript文件不阻碍html文档的渲染这个问题，在他的书中和博客中公布了集中方法，通过我的思考和实验，我得出了一下三点结论：

1.       创建两个JavaScript文件。第一个JavaScript文件包含动态加载外部JavaScript文件的代码；第二个JavaScript文件包含所有的外部JavaScript代码.

2.       把第一个JavaScript文件放在页面的地步，</body>结束标签的前面。

3.       创建第二个JavaScript标签通过调用函数来加载外部JavaScript文件。

下面可以具体的如何实现：

第一个JavaScript文件要足够的小，一般包含如下的代码：first.js

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

}

然后在我们的页面中可以这样使用

<script type="text/javascript" src="http://your.cdn.com/first.js"></script>

<script type="text/javascript">

loadScript("http://your.cdn.com/second.js", function(){

    //initialization code

});

</script>

参考：http://developer.yahoo.com/yui/3/yui/

http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/