script 标签中的 Javascript 下载进度

Question

是否有任何方便的解决方案来查看我在里面编写的巨大的 javascript 库文件的下载进度 <script src="/js/hugelib.js"></script>标签？

显而易见，$.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 的结果设置巨大的Script.text，但我相当确定这样做的性能会很差。

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

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