HTML 5 Progress 元素冻结在活动中答案

【问题标题】：HTML 5 Progress element freezes on activityHTML 5 Progress 元素冻结在活动中
【发布时间】：2017-10-30 23:49:36
【问题描述】：

我想在我的 JavaScript 应用程序执行一些初始化时显示一个不确定的进度条，例如使用 fetch api 下载 JSON 对象。不幸的是，任何活动都会冻结 Gnome 3.16.4 上 Firefox 52 64 位的进度条，这可能会导致我的用户在假设应用程序崩溃时重新加载。

作为 MWE，我使用许多 console.log 调用来模拟初始化，这也会导致进度条被阻塞：

<html>
<head><meta charset="utf-8"></head>
<body style="width:99%;height:1000px;">
<progress style="width:99%;position:absolute;top:50%;height:20px;"></progress>

<script>
for(i=0;i<100000;i++) {console.log("nop");}
</script>

</body>
</html>

如何在活动期间实现解冻进度条？

【问题讨论】：

你可能想要web workers
当浏览器忙碌时它不会重绘，你需要每隔一段时间添加一个小延迟，以便可以重绘进度条，尝试做 10 批 10000，每次之间有一个短暂的超时
@NickA MWE 只是我的真实用例的模拟，它使用的 JavaScript 提取 API 会产生同样的问题。
@OvidiuDolha 谢谢，我会试试 Web Workers！

标签： javascript html progress-bar

【解决方案1】：

请试试这个方法：

  function print(){
    return new Promise((resolve,reject)=>{
      console.log('nop');
      resolve(true);
    });
  }
  
  async function go(){
    for(i=0;i<100000;i++) {
      await print();
    }
  }
  
  go();

&lt;progress style="width:100%;height:20px;"&gt;&lt;/progress&gt;

【讨论】：

我的 Firefox 54 应该支持异步/等待，但它仍然显示一些崩溃和奇怪的行为，一旦浏览器支持更好，我会尝试它。
nope 不适用于 chrome 61.... 冻结整个页面，加载所有 nop，然后显示进度条。糟透了；（