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

考虑下面的代码。 <GridBody Rows={rows} /> 想象一下 rows.length 在本例中,每个数组大约有8列,则等于或大于2000。我使用此代码的一个更扩展版本来呈现表格的一部分,该表格一直是我的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,这似乎是 8秒 比Chrome慢。

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

• 去除不必要的代码。

• 在计算时间上减少几毫秒。

• 将网格拆分为松散组件,以便virtualDOM不会尝试 一次更新整个组件。

• 尝试将所有内容连接为字符串,并允许对 只设置一次innerhtml。这实际上似乎是IE中的一个bug IE11上的大字符串大约需要25-30秒。而在IE11上只需要30毫秒 铬。

我还没有找到合适的解决办法。我在上面所做的操作似乎使IE中的情况不那么糟糕,但问题仍然存在,“现代”或“最近”的浏览器仍然慢3-4秒。

更糟糕的是,这似乎几乎冻结了整个浏览器及其渲染。

tl;博士 如何提高IE和其他浏览器的整体性能?

如果我的问题不清楚,我道歉,我对这件事感到筋疲力尽。

编辑:特别是在IE上DOM访问速度较慢,因为set innerHTML被调用超过10.000次。在ReactJS中可以防止这种情况吗?