javascript - 为什么当我尝试初始化多个组件时，Firefox 和其他浏览器会卡住，但在 Chrome 上却不会？

Question

在 Firefox(版本 67.0)上，我有一个网格表来显示数据。我使用 forEach() 从 JSON 数据为网格表创建列和行。大约有 100 行、10 列。在创建行和列迭代期间，浏览器卡住，我无法在网页上执行任何操作。迭代结束后，一切恢复正常。

我尝试在不同的浏览器上执行相同的操作:IE、Edge、Chrome(最新版本)。 IE、Edge(Chrome 除外)均存在卡顿问题。在 Chrome 上的迭代过程中，我可以在网页上执行其他任务，例如单击按钮、将鼠标悬停在列上等。

为什么 Chrome 上没有出现这种情况？是因为 Chrome 使用不同的引擎吗？ 我该如何克服这个问题？

function initGridComponents() {
  let records = data.items;
  records.forEach((record) => {
    createColumnsType1(record);
    createColumnsType2(record);
    createColumnsType3(record);
  });
}

我希望它能在卡住的浏览器中正常工作。

Answer 1

您可以utilise the event queue间隔操作，从而使页面在加载时响应更快:

function initGridComponents() {
  let records = data.items;
  records.forEach((record) => {

    setTimeout(createColumnsType1, 0, record);
//             ^^^^^^^^^^^^^^^^^^     ^^^^^^
//               function handle     parameter
    setTimeout(createColumnsType2, 0, record);
    setTimeout(createColumnsType3, 0, record);
  });
}