加载外部JavaScript的最佳方法

当<script>标记是一个HTML文档流，浏览器必须停止渲染并等待脚本文件下载并执行，然后再继续（例子）。通过JavaScript创建一个新的<script>标签可以避免这个问题，因为它是出了文档流，所以脚本文件被下载并执行，无需等待。其结果是：动态加载JavaScript文件可以让你的网页渲染速度更快，从而提高性能。动态加载JavaScript文件可以让你的网页渲染速度更快，从而提高性能。

最好的方法
史蒂夫在他的博客和他的书已探讨几种不同的方式来加载JavaScript而不阻塞。在思考它和试验之后，我得出的结论是，用一个为JavaScript的加载而不阻塞只是一个最佳实践方法：创建两个JavaScript文件。第一只包含必要的动态加载JavaScript代码，第二个包含其他一切必要的交互性对page.Include的第一个JavaScript文件与<script>标签在页面的底部，只是里面的初始水平</ BODY>。创建调用该函数来加载第二个JavaScript文件，并包含任何额外的初始化code.That的是第二<script>标签！真的没有必要做任何事情。关键外卖是仅具有两个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("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>

关键，这整个技术是只有两个JavaScript文件，所以第二个包含的需要初始化页面的一切。如果你的页面需要两个以上的文件？那么你应该串联您的文件一起要么在构建时（使用类似链轮），或在运行时（使用类似mod_concat或组合处理程序）。不应该有，当你的页面需要超过这两个JavaScript文件到正确的初始化时间。每个额外的HTTP请求有开销，然后你就不需要担心顺序安排的下载，使代码在正确的顺序执行。通过刚才有两个文件，可以消除大量的关注点在哪个文件被下载并执行第一次以及消除不必要的HTTP请求。

本文链接：http://www.jfox.info/%e5%8a%a0%e8%bd%bd%e5%a4%96%e9%83%a8javascript%e7%9a%84%e6%9c%80%e4%bd%b3%e6%96%b9%e6%b3%95, 转载请保留.