Почему 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

Вы можете использовать очередь событий , чтобы распределить операции и таким образом сделать вашу страницу более отзывчивой при загрузке:

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

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