阅读568 返回首页    go 阿里云 go 技术社区[云栖]


如何最快的加载外部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="https://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("https://your.cdn.com/second.js", function(){
    //initialization code
});
</script>
 
参考:https://developer.yahoo.com/yui/3/yui/
https://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

最后更新:2017-04-02 03:42:38

  上一篇:go 备份、还原数据库
  下一篇:go 多核时代:并行程序设计探讨(5)——Windows和Linux对决(进程间同步)