Perfection Perfection - 1 year ago 243
Javascript Question

Components with large datasets runs slow on IE11/Edge only

Consider the code below.

<GridBody Rows={rows} />
and imagine that
would amount to any value 2000 or more with each array has about 8 columns in this example. I use a more expanded version of this code to render a part of a table that has been bottle necking my web application.

var GridBody = React.createClass({
render: function () {
return <tbody>
{, rowKey) => {
return this.renderRow(row, rowKey);
renderRow: function (row, rowKey) {
return <tr key={rowKey}>
{, colKey) => {
return this.renderColumn(col, colKey);
renderColumn: function (col, colKey) {
return <td key={colKey} dangerouslySetInnerHTML={{ __html: col } }></td>;

Now onto the actual problem. It would seem that computation (even with my own code) seems to be suprisingly fast and even ReactJS's work with the virtualDOM has no issues.

But then there are these two events in reactJS.

up until where everything is still okay.
And then there is
which seems to be fine and all on chrome.

The problem

But then there is IE11/Edge with about 4-6 SECONDS slower than any other browser and with the F12-Inspector this seems to be p to 8 SECONDS slower than Chrome.

The steps I have done to try and fix this issue:

  • Strip unnecessary code.

  • Shave off a handful of milliseconds in computation time.

  • Split the grid in loose components so that the virtualDOM doesn't try
    to update the entire component at once.

  • Attempt to concaternate everything as a string and allow react to
    only set innerhtml once. This actually seems to be a bug in IE here a
    large string takes about 25-30 seconds on IE11. And only 30 ms on

I have not found a proper solution yet. The actions I have done above seemed to make things less bad in IE but the problem still persists that a "modern" or "recent" browser is still 3-4 seconds slower.

Even worse, this seems to nearly freeze the entire browser and it's rendering.

tl;dr How to improve overal performance in IE and if possible other browsers?

I apologize if my question is unclear, I am burned out on this matter.

edit: Specifically DOM access is slow on IE as set innerHTML gets called more than 10.000 times. Can this be prevented in ReactJS?

Answer Source

Things to try improve IE performance:

  • Render the page server side so IE has no issues (if you can support SS rendering in your setup)

  • Make sure render isnt called alot of times, tools like this are helpful:

  • Any reason why you are using dangerouslySetInnerHTML? If you take out the dangerouslySetInnerHTML does it speed things up dramatically? Why not just automatically generate the rows and cols based on a array of objects (or multidimensional array passed), im pretty sure then React will make less DOM interaction this way (makes use of the VDOM). The <tr> and <td>'s will be virtual dom nodes.

  • Use something like to efficiently render large lists

  • check you are running in production mode (which removes things like prop validation) and make Webpack / Babel optimisations where applicable

If you want to run a full fledged performance audit you can also take a look at this one from Paul Irish and try and follow the same steps on his audit off reddit

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download