Why Firefox and other browsers freeze while I'm trying to initialize multiple components but not on Chrome?

Question

On Firefox (version 67.0), I have a grid table to display data. I use a forEach() to create columns and rows from JSON data for the grid table. It's about 100 rows, 10 columns. During the creating row & column iteration, the browser is freezing, I can't do anything on the webpage. After the iteration, everything back to normal.

I have tried to do the same on different browsers: IE, Edge, Chrome (newest version). The freezing problem exists on IE, Edge excepts Chrome. During the iteration on Chrome, I can do other tasks on the webpage e.g click on a button, hover on columns, etc.

Why doesn't it happen on Chrome? Is it because Chrome uses a different engine? How can I overcome this issue?

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

I expect it will work normally among browsers with freezing.

score 1 · Accepted Answer · answered May 30 '19 at 10:32

You can utilise the event queue to space out the operations and thus make your page more responsive while loading:

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

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

Why Firefox and other browsers freeze while I'm trying to initialize multiple components but not on Chrome?

1 Answers1