具有大型数据集的组件仅在IE11/Edge上运行缓慢 [英] Components with large datasets runs slow on IE11/Edge only

问题描述

请考虑以下代码. <GridBody Rows={rows} />并假设rows.length等于2000或更大的任何值，并且在此示例中，每个数组都有大约8列.我使用此代码的扩展版本来呈现一直困扰着我的Web应用程序的表的一部分.

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>;
    }
});

现在进入实际问题.似乎计算(甚至使用我自己的代码)的速度似乎也惊人地快，甚至ReactJS在virtualDOM上的工作也没有问题.

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.

但是在reactJS中有这两个事件.

But then there are these two events in reactJS.

componentWillUpdate直至一切正常. 然后有componentDidUpdate似乎很好，并且全部在chrome上.

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

但是随后IE11/Edge的速度比其他任何浏览器慢了 4-6秒，而使用F12-Inspector，这似乎要慢了 8秒比Chrome.

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.

将网格拆分为松散的组件，以便virtualDOM不会尝试 一次更新整个组件.

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

尝试将所有内容合并为一个字符串并允许对 只设置一次innerhtml.这实际上似乎是IE中的错误， 大字符串在IE11上大约需要25-30秒.而且只有30毫秒 铬.

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.

我还没有找到合适的解决方案.我在上面执行的操作似乎使IE中的情况变得更糟，但问题仍然存在，即现代"或最新"浏览器的运行速度仍要慢3-4秒.

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 如何提高IE和其他浏览器的总体性能?

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:特别是IE访问DOM的速度很慢，因为setInnerHTML被调用了10.000次以上.在ReactJS中可以防止这种情况发生吗?

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

推荐答案

尝试改善IE性能的方法:

Things to try improve IE performance:

• 检查您是否在生产模式下运行(这会删除道具验证之类的内容)，并在适用的情况下对Webpack/Babel进行优化

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

呈现页面服务器端，因此IE不会出现问题(如果您可以在设置中支持SS呈现)

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

确保渲染时间没有太多次，类似这样的工具会有所帮助: https://github.com/garbles/why-did-you-update

Make sure render isnt called alot of times, tools like this are helpful: https://github.com/garbles/why-did-you-update

您为什么使用dangerouslySetInnerHTML?如果您将dangerouslySetInnerHTML取出，它会大大加快速度吗? 为什么不仅仅基于对象数组(或传递的多维数组)自动生成行和列，我敢肯定，那么React将以这种方式减少DOM交互(利用VDOM). <tr>和<td>将是虚拟dom节点.

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.

使用类似 https://github.com/bvaughn/react-virtualized有效呈现大型列表

Use something like https://github.com/bvaughn/react-virtualized to efficiently render large lists

这篇关于具有大型数据集的组件仅在IE11/Edge上运行缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！