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

Question

考虑下面的代码。 <GridBody Rows={rows} /> 并假设 rows.length 等于任何值 2000 或更多，在此示例中每个数组大约有 8 列。我使用此代码的更扩展版本来呈现 table 的一部分，这一直是我的 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 使用虚拟 DOM 也没有问题。

但是reactJS中有这两个事件

componentWillUpdate 直到一切都还好。然后是 componentDidUpdate 似乎没问题，而且都在 chrome.

问题

但是 IE11/Edge 比任何其他浏览器慢大约 4-6 秒 并且对于 F12-Inspector 这似乎是 p 到 8 SECONDS 比 Chrome.

慢

我为尝试解决此问题所做的步骤：

去除不必要的代码。
减少几毫秒的计算时间。
将网格拆分为松散的组件，这样虚拟DOM就不会尝试一次更新整个组件。
尝试将所有内容连接成一个字符串并允许对只设置 innerhtml 一次。这实际上似乎是 IE 中的一个错误大字符串在 IE11 上大约需要 25-30 秒。而且只有 30 毫秒 chrome.

我还没有找到合适的解决方案。我在上面所做的操作似乎使 IE 中的事情变得不那么糟糕，但问题仍然存在，"modern" 或 "recent" 浏览器仍然慢 3-4 秒。

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

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

如果我的问题不清楚，我深表歉意，我对这件事已经筋疲力尽了。

编辑：特别是 DOM 在 IE 上访问很慢，因为 set innerHTML 被调用超过 10.000 次。这可以在 ReactJS 中避免吗？

Answer 1

尝试提高 IE 性能的方法：

检查你是否运行处于生产模式（它删除了道具验证之类的东西）并在适用的地方进行 Webpack / Babel 优化
渲染页面服务器端以便 IE 没有问题（如果您的设置中可以支持 SS 渲染）
确保渲染不会被调用很多次，这样的工具很有用：https://github.com/garbles/why-did-you-update
您使用 dangerouslySetInnerHTML 的原因是什么？如果你去掉 dangerouslySetInnerHTML 会大大加快速度吗？为什么不基于对象数组（或传递的多维数组）自动生成行和列，我很确定 React 将以这种方式减少 DOM 交互（利用 VDOM） . <tr> 和 <td> 将是虚拟 dom 节点。
使用 https://github.com/bvaughn/react-virtualized 之类的东西来高效呈现大型列表

Answer 2

除了@Marty 的优点外，运行一个 dynaTrace 会话来查明有问题的代码。它应该让您更好地了解瓶颈在哪里。它的结果通常比 IE 开发人员工具更有用。

免责声明 - 我与 dynaTrace 团队没有任何联系。

Answer 3

在黑暗中拍摄：尝试不渲染或不显示，直到一切都完成。

制作 table 元素 display:none 直到完成
将其渲染到屏幕外
在一个很小的 DIV 中有隐藏的溢出
甚至输出到一个巨大的 HTML 字符串，然后在完成后将其插入 DOM。

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

Components with large datasets runs slow on IE11/Edge only

javascript

internet-explorer

large-data

reactjs

问题