浏览器悬挂在计算循环中强烈的JS功能之后

Question

我的问题需要以下功能以平均20次迭代

在循环中运行

var test = function() {
  // some logic which take about 0.5 sec to execute
  // and deal with DOM manipulation
};

因此，如果我迭代20个项目，则平均需要10秒，与此同时浏览器挂起（无法向下滚动）。

所以我试图将其更改为类似的东西

var test = function() {
   setTimeout(function() {
      // some logic which take about 0.5 sec to execute
      // 0.5 sec as it deals with DOM manipulation
   }, 0);
};

这样，浏览器每次熄灭后都会有时间执行，但仍在悬挂的浏览器中。

为什么是这样？这是我从理论上一直读过的，但实际上不起作用。

Answer 1

这是JavaScript的工作方式，每当您阻止主线程时，您的网站都会对事件无反应。

您应该确实尝试使模板分析更有效。涉及UX时，10s是永恒的。

如果不是一个选项，您可以考虑将某些逻辑移动到另一个线程中，并通过Web Workers异步执行它，并且只能在主线程中进行实际DOM操作。