相关疑难解决方法(0)

我正在玩一些非阻塞的JavaScript加载.这意味着我的JavaScript中有一小段JavaScript head,并在运行时加载所有外部文件.我甚至更进一步加载CSS非阻塞.

我看到我能找到的文章有点过时,这就是为什么我想知道这是否仍然相关.

现在首先是脚本,它们看起来像这样:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles 这里只是一个包含所有文件的所有URL的对象.

我已经运行了3次测试,结果如下:

正常设置

这只是正常设置,我们头部有4个css文件,页面底部有3个js文件.

现在我没有看到任何阻塞.我认为一切都在同时加载.

非阻塞JS

现在更进一步,我只使js文件非阻塞.这与上面的脚本.我突然发现我的css文件阻塞了负载.这很奇怪,因为在第一个例子中它没有阻塞任何东西.为什么css会突然阻塞负载？

一切都是非阻塞的

最后,我做了一个测试,其中所有外部文件都以非阻塞方式加载.现在我认为我们的第一种方法没有任何区别.它们看起来都一样.

结论

我的结论是文件已经以非阻塞方式加载,我没有看到需要添加特殊脚本.

或者我在这里遗漏了什么？

更多:

• 文章:http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• 问题:Javascript非阻塞脚本,为什么不简单地将所有脚本放在</ body>标签之前？
• 问题:现代浏览器是否仍限制并行下载？
• 代码:http: …