脚本标记中的Javascript下载进度

Question

有什么简单的解决方案可以查看我在<script src="/js/hugelib.js"></script>标记中编写的巨大javascript库文件的下载进度吗？

显然，$.ajax()进度条没有用。在headjs项目中，我可以找到安装进度设置，jsut ready()。

Answer 1

您可以使用XMLHttpRequest发出GET，使其在浏览器中缓存，然后使用JavaScript将标记添加到文档中，使其立即加载。

var req = new XMLHttpRequest(); 
req.onprogress=myUpdateProgressFunction; // whatever you want to do!
req.open('GET', '/js/hugelib.js', true);  
req.onreadystatechange = function (aEvt) {  
    if (req.readyState == 4) 
    {  
        var hugeScript = document.createElement('script');
        hugeScript.setAttribute('src','/js/hugelib.js');
        document.head.appendChild(hugeScript);
    }  
};  
req.send(); 

您也可以考虑使用AJAX GET的结果来设置hugeScript.text，但我相当肯定这会很糟糕。

作为进一步的改进，您可以首先发出一个HEAD请求，查看该项是否已经缓存，如果已经缓存，则不要尝试AJAX GET。同样，您必须对性能进行分析，以查看这是否确实提高了性能。

注意:我还没有测试过这种模式的行为，我真诚地认为浏览器缓存将以一种绅士的方式运行。

Answer 2

我脑海中浮现的选择：

• 使用一个小的js代码来创建一个进度条，然后(通过XHR)动态地加载您的代码。我在这里看到了两个问题:您需要做一些技巧来了解进度，并且您正在添加更多要加载的代码，但是第一个问题可以是已解决，第二个问题是.好吧，再多几行也不会有多大影响。已经创建的代码是PreloadJS，它是CreateJS的一个模块。
• 使用minify或任何类似的工具来最小化代码的大小。使用这些工具可以节省惊人的字节数。