在加载资源时摆脱“页面上的脚本无响应”错误

Question

当我的HTML5应用启动时，它会加载一堆资源，同时向用户显示非交互式加载页面。

像这样（伪代码）：

<div id="app">
  <div class="loading-screen">Loading, please wait</div>
</div>

var to_load = resources.length;
var on_load = function() {
  --to_load;
  if (to_load <= 0) {
    document.getElementByID("app").innerHTML = app_html;
    on_everything_loaded();
  }
}
for (var i = 0; i < resources.length; ++i) {
  // Loaded here:
  // -- AJAX requests via xhr
  // -- Image objects
  // -- decodeAudioData, takes most of the time
  resources[i].load(on_load); 
}

注意：此循环不会长时间阻止浏览器。使用的所有加载函数都是异步的（请参阅上面注释中的列表）。

如果机器运转缓慢，加载过程可能需要一两分钟。有些浏览器，尤其是移动浏览器，很容易显示“页面上的脚本没有响应”错误或等效 - 尽管实际页面完全响应（我甚至试图在加载屏幕中包含一些交互元素并强迫用户点击他们，没有帮助），几乎所有繁重的工作都在浏览器自己的资源加载代码中完成。

我该怎么做才能防止生成这些错误？