Components with large datasets runs slow on IE11/Edge only

Question

Consider the code below. <GridBody Rows={rows} /> and imagine that rows.length 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>
            {this.props.Rows.map((row, rowKey) => {
                    return this.renderRow(row, rowKey);
            })}
        </tbody>;
    },
    renderRow: function (row, rowKey) {
        return <tr key={rowKey}>
            {row.map((col, colKey) => {
                return this.renderColumn(col, colKey);
            })}
        </tr>;
    },
    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.

componentWillUpdate up until where everything is still okay. And then there is componentDidUpdate 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 chrome.

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 1

Things to try improve IE performance:

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

• 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: https://github.com/garbles/why-did-you-update

• 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 https://github.com/bvaughn/react-virtualized to efficiently render large lists

Answer 2

Shot in the dark: try not rendering, or not displaying, until everything is completely done.

• make the table element display:none until it's done
• render it offscreen
• in a tiny DIV with hidden overflow
• or even output to a giant HTML string and then insert that into the DOM upon completion.

Answer 3

In addition to @Marty's excellent points, run a dynaTrace session to pinpoint the problematic code. It should give you a better insight into where the bottleneck is. It's results are often more useful than the IE developer tools.

Disclaimer - I am not linked with the dynaTrace team in any way.