Question

我正在尝试解决为什么IE与Chrome和FF相比，慢速处理此JavaScript的原因。在Chrome和FF中，任何onclick事件都没有延迟，但在IE中它会在做任何事情之前暂停5秒钟。

这是我正在运行的代码的链接。

http://geekswithblogs.net/ptahiliani/archive/2009/08/13/highlighting-textbox-on-error-using-required-field-validator.aspx

我用它来突出显示有错误的颜色文本框。它工作得很好，没有错误，但只是太慢了。

Answer 1

我不知道如何调用它，因为看起来你正在使用ASP来完成这项工作（我不知道ASP）。但是对我来说最突出的是你在两个独立循环中有var inputControl = document.getElementById(Page_Validators[i].controltovalidate);。

对document.getElementById多次调用相同元素是许多JavaScript性能问题的罪魁祸首。考虑合并SetValidatorCallouts和ClearValidatorCallouts以减少对document.getElementById的调用次数（我很确定IE中的速度较慢，但目前找不到任何基准测试）。我不是说这将保证大规模的速度更新，但它值得一试，2）JavaScript编程的良好实践。类似的东西：

var SetValidatorCallouts = function() {
    var pageValid    = true,
        inputControl = null;

    for ( var i=0; i<Page_Validators.length; i++ ) {
        inputControl = document.getElementById(Page_Validators[i].controltovalidate);              

        if ( !Page_Validators[i].isvalid ) {
            if ( pageValid ) {
                inputControl.focus();
            }

            addClass(inputControl, 'error');
            pageValid = false;                                                    
        } else {
            removeClass(inputControl, 'error');
        }
    }                   

  return pageValid;
}

作为旁注，您的className修改函数过于复杂。我建议使用标准框架（jQuery，Dojo，ExtJs等）。否则，请考虑使用以下更简单的方法替换。这些不一定会加速你的代码，但它们会使维护更容易，特别是因为我注意到你已经有了处理WebForm_RemoveClassName中的错误的特殊条件。

var removeClass = function(element, className) {
    // Simply split on white space and remove the specified class
    var classes = element.className.toLowerCase().split(/\s+/);
    var result  = "";
    className   = className.toLowerCase();

    for ( var i in classes ) {
        if ( classes.hasOwnProperty(i) && classes[i] != className ) {
            // Extra spaces at the end don't matter.  I have yet to see a
            // browser that cares about superfluous whitespace in classes
            result += classes[i] + " ";
        }
    }
    element.className = result;
}

var addClass = function(element, className) {
    // Extra spaces affect nothing, don't bother trying to make 
    // the className attribute perfect.
    element.className += " " + className;
}

一个小例子：

var fakeElement = {
    className: "foo-asdf asdf asdf-foo foo-asdf-asdf fooasdf asdffoo fooasdfasdf asdf fooasdffoo" 
};

console.log(fakeElement.className);
removeClass(fakeElement, "asdf");
console.warn(fakeElement.className);

Answer 2

很难看到脚本，并说明为什么它运行缓慢。检查的最佳方法是运行一些计时器日志语句，以查看它的哪一部分运行缓慢。如果你有IE8，你可以使用它附带的优秀的探查器工具。

Answer 3

可能是因为它必须调用ActiveX来连接服务器端脚本。在我工作的地方，我们放弃了对WebApplications的IE支持。尚未找到最佳解决方案;）

与FF和Chrome相比，IE处理javascript时运行缓慢

3 个答案: