具有大型数据集的组件仅在IE11/Edge上运行缓慢

Question

请考虑以下代码.<GridBody Rows={rows} />并且想象这rows.length将达到2000或更多的值,每个数组在这个例子中有大约8列.我使用此代码的更大版本来呈现表格的一部分,该表格已经瓶颈我的Web应用程序.

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的工作也没有问题.

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

componentWillUpdate直到一切都还好.然后有componentDidUpdate一个似乎很好,所有铬.

问题

但是IE11/Edge的速度比任何其他浏览器慢了大约4-6秒,并且与F12-Inspector相比,这似乎比Chrome慢了8秒.

我尝试解决此问题的步骤:

• 删除不必要的代码

• 在计算时间内减少几毫秒.

• 在松散组件中拆分网格,以便virtualDOM不会尝试一次更新整个组件.

• 尝试将所有内容作为字符串连接,并允许仅响应设置innerhtml一次.这实际上似乎是IE中的一个错误,这里一个大字符串在IE11上需要大约25-30秒.铬只有30毫秒.

我还没有找到合适的解决方案.我上面做的动作似乎使IE中的事情变得不那么糟糕,但问题仍然存在,"现代"或"最近"的浏览器仍然慢了3-4秒.

更糟糕的是,这似乎几乎冻结了整个浏览器并且它正在渲染.

tl; dr如何提高IE中的整体性能以及可能的其他浏览器？

如果我的问题不清楚,我很抱歉,我对此事感到很沮丧.

编辑:特别是IE上的DOM访问速度很慢,因为设置的innerHTML被调用超过10.000次.可以在ReactJS中防止这种情况吗？

Answer 1

要尝试提高IE性能:

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

• 渲染页面服务器端,以便IE没有问题(如果您可以在设置中支持SS渲染)

• 确保渲染不被称为很多次,像这样的工具是有用的:https://github.com/garbles/why-did-you-update

• 您使用的任何理由dangerouslySetInnerHTML？如果你拿出dangerouslySetInnerHTML它,它会大大加快速度吗？为什么不自动生成基于对象的数组(或通过多维数组),即时通讯相当肯定随即反应过来将较少DOM互动这种方式(利用了虚拟域的)的行列数.该<tr>和<td>的将是虚拟的DOM节点.

• 使用类似https://github.com/bvaughn/react-virtualized的内容来有效地呈现大型列表