Question

请考虑以下代码。 <GridBody Rows={rows} />并假设rows.length将达到2000或更多值，每个数组在此示例中大约有8列。我使用这个代码的更大版本来渲染表格的一部分，这个表格已经瓶颈我的网络应用程序。

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 SECONDS 比任何其他浏览器慢，并且使用F12-Inspector这似乎是 8 SECONDS 更慢比Chrome。

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

删除不必要的代码。
在计算时间内减少几毫秒。
将网格拆分为松散组件，以便virtualDOM不会尝试一次更新整个组件。
尝试将所有内容作为字符串连接并允许做出反应只设置innerhtml一次。这实际上似乎是IE中的一个错误 IE11上的大字符串大约需要25-30秒。而且只有30毫秒铬。

我还没有找到合适的解决方案。我上面所做的行动似乎使IE中的事情变得不那么糟糕，但问题仍然存在于现代的＃34;或者＆＃34;最近＆＃34;浏览器仍然慢3-4秒。

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

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

如果我的问题不清楚，我很抱歉，我对这件事情感到很沮丧。

编辑：特别是IE上的DOM访问速度很慢，因为设置的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

在黑暗中拍摄：尝试不渲染或不显示，直到完成所有操作。

使表格元素显示：无需完成
将其渲染到屏幕外
在一个隐藏溢出的小DIV中
或者甚至输出到一个巨大的HTML字符串，然后在完成时将其插入到DOM中。

Answer 3

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

免责声明 - 我不会以任何方式与dynaTrace团队建立联系。

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

问题

3 个答案: