与IE8慢的JavaScript

时间:2009-10-14 12:24:57

标签: asp.net javascript performance internet-explorer telerik

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

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

由于网格的复杂性,我无法发布示例代码,但通常我会显示标准的telerik网格并使用telerik javascript API在浏览器中填充和绑定。当单击一个单元格时,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);
}

6 个答案:

答案 0 :(得分:8)

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

Profiler (标签)&gt; 开始分析

正常使用您的网格,让IE浏览您的代码。

完成后,单击停止分析,并验证哪些函数调用正在占用内存或占用大部分时间。

它们可能是您无法控制的(例如,在Telerik的代码中),但如果您添加的任何内容是功能的瓶颈,请返回此处以询问有关如何优化的建议。

答案 1 :(得分:6)

听起来好像大多数(如果不是所有)与网格相关的控件都是在JavaScript中创建的吗?

如果是这样,有几件事要记住:

  • IE讨厌字符串连接:有很多关于它性能不佳的帖子
  • 确保在切换控件时清除事件,而不仅仅是覆盖它们
    • 内存泄漏不是你的朋友
  • IE不喜欢像你一样添加控件 - 所以尽可能重用它们
  • 如果控件是通过HTML创建的,IE会更快(为什么哦?为什么?)
  • 当您使用即时HTML控件添加大量动态图像和CSS时,IE讨厌它
  • IE首选innerHTML为addChild()(似乎与上面的字符串问题相反)

还有更多,但使用IE,您还必须实现几乎所有可以找到的JavaScript性能建议:

  • 短变量名称
  • 确保变量具有适当的范围(否则运行时将跳过范围,直到没有任何内容可供搜索)
  • 来自原型和jQuery等框架的
  • 迭代器通常比传统的while和while循环慢(非常非常悲伤但非常真实)

答案 2 :(得分:3)

  

点击一个单元格的javascript   函数移动先前隐藏的   从a输入控制到单元格   隐藏的集合并给予关注。

您必须更详细地解释上面的引用。你究竟如何将以前隐藏的控件移动到单元格中?检查下面的站点以获取使用不同方法生成动态表的基准。使用W3C DOM方法或表方法移动控件可能会降低IE的速度,同时在其他浏览器中正常工作。

http://www.quirksmode.org/dom/innerhtml.html

编辑:尝试此操作以检查它是否更快(不是最终解决方案):

  

this.moveFromTo = function(from,to){   to.innerHTML = from.innerHTML; }

答案 3 :(得分:1)

答案 4 :(得分:1)

试试Google Frame。它推动了IE8的性能;)

答案 5 :(得分:0)

使用jslint.com

测试代码