Member Avatar for anish.anick

Hi All,
I am facing CPU utilization issue while iterating through HTML table rows. I am generating an HTML table dynamically using javascript
which contains atleast 500 rows. After the creation of table, the table cells are assigned with some values from a JSON object. The sample code for assigning cells values is shown below.

for(var i = 0;i<tbl.rows.length;i++){
    tbl.rows[i].cells[0] = JSON.AAAA;
    tbl.rows[i].cells[1] = JSON.BBBB;
   ...
   ...
   tbl.rows[i].cells[12] = JSON.MMMM;
}

The execution of the above loop takes lots of cpu cycle. It takes the cpu upto 99.
Please help me to reduce the cpu utlization.

Thanks

Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 256 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Dani AI

Generated

Given the symptoms described by (500+ rows, per‑cell writes and a big CPU spike in IE), the core issue is almost certainly repeated live‑DOM updates causing layout/repaint thrashing in older IE engines. Writing into the table cell-by-cell inside a tight loop forces the browser to recalc layout many times. Faster patterns do far fewer DOM operations.

A simple, high‑performance approach: build the table body as a single HTML string and set tbody.innerHTML once. It’s usually the fastest in old IE:

var parts = [];
for (var i = 0; i < data.length; i++) {
  var d = data[i];
  parts.push(
    '<tr><td>' + escapeHtml(d.AAAA) +
    '</td><td>' + escapeHtml(d.BBBB) +
    '</td><!-- more cells -->' +
    '</tr>'
  );
}
tbody.innerHTML = parts.join('');

Note: implement escapeHtml if any data is untrusted to avoid XSS. If innerHTML is unacceptable, use a DocumentFragment to build nodes in memory and append once:

var frag = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.appendChild(document.createTextNode(data[i].AAAA));
  tr.appendChild(td);
  // add other cells...
  frag.appendChild(tr);
}
tbody.appendChild(frag);

Micro‑optimizations that help in addition to the above:

  • Cache references and lengths (e.g., var rows = tbody.rows, len = rows.length).
  • Avoid reading layout properties (offsetWidth/height) inside loops.
  • Remove the table/tbody from the DOM before heavy updates (or at least append to a fragment), then reattach.
  • Prefer textContent (with innerText fallback) for plain text to avoid HTML parsing.
  • If the UI still locks, break work into chunks via short setTimeout slices so the browser can paint.

As suggested, exact code and the IE version matter for deep diagnosis; switching to one‑shot updates or fragments almost always removes the 99% CPU spike in IE.

Member Avatar for ~s.o.s~

Maybe posting the *exact* code which is causing problems in your case would help in faster resolution of the issue at hand. And please use CODE tags when posting code to increase your chances of getting a reply since reading unindented code is a pain in the neck. Read the forum announcements to learn more about CODE tags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.