asp.net - IE8 下的慢 javascript

Question

我正在使用 telerik 控件开发具有类似 excel 功能的网格。例如，用户可以点击一个单元格，该单元格变成一个用于编辑的输入控件。用户可以使用 Tab 键移动到下一个单元格，或者使用向上/向下箭头键将单元格移至上方或下方。我发现标准的 telerik 网格很好，但我不得不使用自定义 javascript 对其进行扩展以实现我的需要。

我的问题是在 IE 浏览器中的性能。虽然 Firefox、Chrome、Safari 都很好，但 IE 真的很痛苦。 IE8 比 IE7 好很多，但是使用光标键移动有点不自然，而且没有 Chrome 或 FF 那样流畅。

由于网格的复杂性，我无法真正发布示例代码，但通常我会显示标准的 telerik 网格并使用 telerik javascript API 在浏览器中填充和绑定(bind)。单击单元格时，javascript 函数将先前隐藏的输入控件从隐藏集合移动到单元格中，并为其提供焦点。当您离开时，单元格值被清除，服务器使用 ajax 页面方法更新，并以类似的方式选择下一个单元格。

网格大约有 40 列和 20 行，即页面上隐藏了 800 个额外的控件，只能通过单击单元格或使用键盘导航来激活。我最初对每一列只有一个隐藏控件，但在 IE 中使用光标键上下移动变得有问题。

如果有任何建议可以加快 IE8 的速度，我们将不胜感激。

//selects a cell and sets the value
this.select = function(value) {
    this.moveFromTo(this._hiddenCell, this._gridCell);
    this._bIsSelected = true;
    this.set_inputValue(value);
    this._focus();
}
//clears inner content for a cell
this.removeChildrenFromNode = function(node) {
    if (node == undefined || node == null) {
        return;
    }
    var len = node.childNodes.length;
    while (node.hasChildNodes()) {
        node.removeChild(node.firstChild);
    }
}
//move back or forwards between hidden or active cell
this.moveFromTo = function(from, to) {
    var currChild = null;
    this.removeChildrenFromNode(to);
    var i = 0;
    if (from.childNodes != null) {
        while (i < from.childNodes.length) {
            currChild = from.childNodes[i];
            if (to != null) to.appendChild(currChild);
            i += 1;
        }
    }
    this.removeChildrenFromNode(from);
}

Answer 1

在 IE8 中加载您的页面，打开开发人员工具栏 F12 并打开分析:

Profiler(制表符)> 开始分析

像往常一样使用您的网格，让 IE 分析您的代码。

完成后，单击停止分析，并验证哪些函数调用正在消耗内存或占用最多时间。

它们可能是您无法控制的(例如在 Telerik 的代码中)，但如果您添加的任何内容是瓶颈，请将函数发布到 SO 上以寻求有关如何优化的建议。