脚本标记

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的结果设置hugeScript.text，但我相当肯定会表现不佳。

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

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

Answer 2

我想到的选项：

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