Question

高级视图：我使用Emscripten将各种传统的C / C ++代码库转换为优化的JavaScript，以便基于浏览器的现代用户库可以轻松利用其功能。到现在为止还挺好。但是，即使经过网络传输压缩，Emscripten-transiled JS也会有点笨重。

为了改善用户体验，我想在主页加载后下载这个巨大的JS块，并且我想监视下载进度以显示在页面UI中。我知道有两种动态加载方法，我遇到了两个缺点：

第一种方法是创建一个脚本标记（嵌入在HTML页面中或由JS动态生成）。下载文件并准备运行时会触发onload事件。这种方法的问题是我无法找到监控下载进度的方法。脚本对象确实有onprogress个事件但它似乎没有做任何事情（在Chrome中测试过）。
使用XMLHTTPRequest（XHR）对象动态请求JS资源。这很好用并触发预期的下载进度事件。但是，对下载的数据运行JS eval()并没有产生正确的效果（预期的功能不会出现在JS命名空间中）。

执行eval()更简单的带有JS的字符串有预期的结果，所以我想知道在Emscripten上运行eval()是否有一些特殊技巧编译代码。

相反，我已经实现了一种结合上述方法1和方法2的混合解决方案：XHR执行初始加载并丢弃数据。然后，页面创建一个脚本元素来加载相同的JS文件，该文件现在位于浏览器的缓存中并立即加载。但这显然是一个黑客，我无法帮助，但认为必须有一个更清洁的解决方案。

Answer 1

不要丢弃数据，而是将数据设置为脚本标记。

var xhr = new XMLHttpRequest;
var tag = document.createElement("script");
xhr.open("GET", "foo.js", true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      tag.text = xhr.response;
      document.head.appendChild(tag);
    } else {
      alert("error");
      console.error(xhr.response);
    }
  }
};
xhr.onprogress = function (e) {
  Module.setStatus('Loading JavaScript: ' + (100 * e.loaded / + e.total) + '%');
};
xhr.send();

动态加载JavaScript并监控下载进度

1 个答案: