为什么Unity 2018.2的WebAssembly加载间隔只有0％，90％，100％？

Question

自从转换到Unity 2018后，加载器变得很卡顿且不够实用。在旧版本的产品中，加载器会流畅地达到100%。然而，在我使用Unity 2018.2构建的版本中，加载器会跳过0，然后直接跳到90再到100并完成。它几乎整个时间都停留在90。我的用户认为我的产品出了问题，因为它不再平滑地加载。他们认为它已经卡住了。我已经调试了UnityLoader.js文件，并验证了只有在开始加载之前才能调用进度函数并读取.9：

function UnityProgress(gameInstance, progress) {
   console.log("PROGRESS")
   console.log(progress)
   ...
}

此代码仅打印出0和0.9，然后游戏成功加载。不再像以前一样中间会打印0.1、0.2等。

有人知道如何修复吗？这是否发生在所有人身上？

谢谢，明

编辑 这只发生在我的项目中，而不是空项目。看起来它是在Unity加载过程中发生的，在我的任何代码被触碰之前，我不确定我的代码怎么会影响Unity的WebGL应用程序进度更新的加载频率。

- MingMan

---

我目前正在使用Unity 2018.2.14f1，并且没有WebAssembly Builds的问题。你尝试过使用干净项目进行构建吗？或者你只能在你的项目中重现这个问题吗？我们从Unity 2017.2.4开始使用我们的项目，并在Unity 2018.2.4中从asm.js切换到了WebAssembly。 - dome12b

有趣的是，这并没有发生在一个干净的项目中。加载百分比除了0、90和100之外还有其他的百分比。你有什么想法从哪里开始查找这样的项目特定问题吗？在这个项目的旧版本中，这不是一个问题。 - MingMan

不了解项目的情况下，这真的很困难。我对加载过程不是很了解，但您可以尝试以下操作：在项目中创建一个新场景并将其设置为第一个场景。在场景中附加一个脚本，并使用SceneManager.LoadSceneAsync(SCENE_TO_LOAD, LoadSceneMode.Additive);来加载空场景后的真正第一个场景。也许Unity在启动引擎时异步加载第一个场景，在您的情况下它正在阻止进度？ - dome12b

我采纳了那个建议，但并没有改变。非常奇怪。 - MingMan

Answer 1

我知道现在有点晚了，但也许将来会对某些人有所帮助。当您第一次加载WebGL内容时，您的浏览器会将数据保存到缓存中。下载过程从0到0.9表示。因此，下一次启动游戏时，下载将被跳过，并且进度条会跳到0.9，等待游戏开始。一旦游戏开始，进度条就会跳到1。不幸的是，这并不是很好，因为看起来游戏已经冻结了。

- user10413093

Answer 2

这是一篇旧帖子，但我也遇到了这个问题，问题在于这是一个Chromium的bug。

https://bugs.chromium.org/p/chromium/issues/detail?id=463622

这个问题已经存在多年，而且很可能不会被修复，因此解决此问题的方法是使用https://github.com/AirConsole/xmlhttprequest-length-computable。

---

如果上面的链接无法使用，请注意这里的源代码已经被压缩。

(function(){var g={CONTENT_ENCODING_MULTIPLE:1.5,DEFAULT_CONTENT_LENGTH:1048576,DECOMPRESSED_CONTENT_LENGTH_HEADER:"x-decompressed-content-length"};if(window.Proxy){var h=XMLHttpRequest,k=function(a,c){var b=0;a["decompressed-content-length"]&&(b=a["decompressed-content-length"]);try{if(!b){var d=c.target.getResponseHeader(a.DECOMPRESSED_CONTENT_LENGTH_HEADER);void 0!=d&&(b=parseInt(d))}if(!b){var e=c.target.getResponseHeader("content-length");if(e){e=parseInt(e);var f=c.target.getResponseHeader("content-encoding");
b=f&&"identity"!=f?e*a.CONTENT_ENCODING_MULTIPLE|0:e}}}catch(p){}b||(b=a.DEFAULT_CONTENT_LENGTH);return b},l=function(a,c){var b=0;return function(d){if(d&&(d instanceof ProgressEvent||a.no_type_check)&&("progress"==d.type||"load"==d.type||"loadend"==d.type))if(0==d.lengthComputable){var e=d;d=new Proxy(d,{get:function(c,d){return"lengthComputable"==d?!0:"loaded"==d?(b||(b=k(a,e)),a.loadFinished?b:Math.min(e.loaded,b-1)):"total"==d?(b||(b=k(a,e)),b):c[d]}})}else a.lengthComputable=!0;a.latestProgress=
d;c&&c(d)}},n={set:function(a,c,b){a.xmlHTTPRequestLengthComputable&&0==c.indexOf("on")&&a.xmlHTTPRequestLengthComputable.listeners[c.substr(2)]?(a.xmlHTTPRequestLengthComputable.listeners[c.substr(2)].on&&delete a.xmlHTTPRequestLengthComputable.listeners[c.substr(2)].on,b?(a[c]=l(a.xmlHTTPRequestLengthComputable,b),a.xmlHTTPRequestLengthComputable.listeners[c.substr(2)].on=b):a[c]=b):a[c]=b;return!0},get:function(a,c){return"addEventListener"==c?function(){if(a.xmlHTTPRequestLengthComputable.listeners[arguments[0]]){var b=
l(a.xmlHTTPRequestLengthComputable,arguments[1]);a.xmlHTTPRequestLengthComputable.listeners[arguments[0]].listeners.push([b,arguments[1]]);return a[c].call(a,arguments[0],b,arguments[2],arguments[3])}return a[c].apply(a,arguments)}:"removeEventListener"==c?function(){if(a.xmlHTTPRequestLengthComputable.listeners[arguments[0]])for(var b=a.xmlHTTPRequestLengthComputable.listeners[arguments[0]].listeners,d=0;d<b.length;++d){if(b[d][1]==arguments[1])return b=b.splice(d)[0],a[c].call(a,arguments[0],b[0],
arguments[2],arguments[3])}else return a[c].apply(a,arguments)}:"function"==typeof a[c]?function(){return a[c].apply(a,arguments)}:a[c]}};window.XMLHttpRequest=function(a){var c=new h(a),b=new Proxy(c,n),d=window.xmlHTTPRequestLengthComputable||g;a&&a.xmlHTTPRequestLengthComputable&&(d=a.xmlHTTPRequestLengthComputable);var e={};for(var f in g)e[f]=d[f]||g[f];d["decompressed-content-length"]&&(e["decompressed-content-length"]=d["decompressed-content-length"]);e.listeners={progress:{listeners:[]},load:{listeners:[]},
loadend:{listeners:[]}};c.addEventListener("load",function(a){if(!e.lengthComputable&&(e.loadFinished=!0,e.latestProgress)){if(e.listeners.progress.on)e.listeners.progress.on(e.latestProgress);a=e.listeners.progress.listeners;for(var b=0;b<a.length;++b)if(a[b][1])a[b][1](e.latestProgress)}});e.xmlhttprequest=c;b.xmlHTTPRequestLengthComputable=e;return b};for(var m in h)window.XMLHttpRequest[m]=h[m]}})();

将此文件保存为xmlhttprequest-length-computable.min.js

将以下代码添加到头部

<script type="text/javascript" src="xmlhttprequest-length-computable.min.js"></script>
<script type="text/javascript">
  window.xmlHTTPRequestLengthComputable = {
    DEFAULT_CONTENT_LENGTH: 1048576
  }
</script>

- Arose Niazi

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审查】 - ahuemmer

@ahuemmer 也添加了源代码。 - Arose Niazi