Question

我有一个使用瘦客户端（bosanova终端）作为用户前端的Web应用程序。我注意到瘦客户端和PC之间的JavaScript存在一些性能差异。终端运行嵌入了IE6的Windows XP，我所指的页面正在利用原型JS框架对表单元素进行一些相当简单的验证。

例如，以下是我用来确保填充所需字段的内容对于.numeric和.alaphanumeric，还有两个更适合测试，并推送错误以停止提交表单。

$$( '.requiredfield' ).each( function ( elem ){
   if ( ( $( elem ).value.length == 0 ) || ( $( elem ).value == null ) ) {
        $( elem ).addClassName( "nonvalid" );
        $( elem ).siblings().first().addClassName( "error" );
        requiredErrors.push( $( elem ) );
   }

});

我看到的问题是Firefox或IE中的一个PC，页面上有5-20个字段，处理时间可能比没有验证时长半秒。但是，在终端上，运行验证所需的时间比同一页面长15-25秒。我相信我已经提到过，我已经在PC上的IE6中对此进行了测试，并且没有看到性能损失。打电话给Bosanova导致我升级终端内存，这是我在发布之前做的，结果没有改变。

我可以更改脚本，所以我只遍历表单字段一次并处理.required .numeric .alphanumeric，因为我去了，这将有助于我确定。现在，PC和终端（瘦客户端）之间的性能存在这样的差异。我很想知道原因。

如果有任何人有任何排除故障的经验或者知道为什么原型/ javascript会在终端上遭受这样的性能损失，我会非常感谢一些提示。

更新：＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

我一直在测试并研究这个问题，并认为我会分享这个。昨天我们收到了一个新的终端，我装了并测试了。运行IE6的新终端与其他任何浏览器一样完美无缺。当然它比PC慢一点，因为1.它运行IE6和2.它是一个瘦客户端，但速度差异是几百秒，而运行相同脚本的差异为10-50秒。 2个不同的瘦客户端的物理规格并不是那么不同1.2 ghz（旧）与1.6 ghz（新）内存是相同的，HD / DOM是512MB（旧）与1gig（新）。仍然无法确定旧终端的情况，但看起来与该终端的特定型号/修订版有关。

更新：＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

Answer 1

嗯，IE6的Javascript引擎慢 - 请记住，它的历史可以追溯到微软坚持认为Web的任何实际应用程序开发当然用ActiveX完成的时候。在具有便宜，可能不太快的CPU的瘦客户端上，它将真的慢。

您可以通过更改选择器来加快代码的速度：

$$( 'input.requiredfield' ).each( function ( elem ){

Answer 2

我不太了解Prototype，但你应该将该元素缓存在局部变量中，而不是围绕它包装$函数。

$$( '.requiredfield' ).each( function ( elem ){
   var el = $(elem)
   if ( (elem.value.length == 0 ) || elem.value == null ) ) { // is elem.value ever null?
        el.addClassName( "nonvalid" );
        el.siblings().first().addClassName( "error" );
        requiredErrors.push(el);
   }
});

我认为这不会解决所有性能问题，但也许它会缩短几秒钟。我建议继续你提到的那个改变，所以它检查一个循环中的所有错误/类，而不是循环遍历每个类的类的所有元素。

也许是类似的东西（再一次，我不太了解原型，所以有些东西可能会关闭）：

var errors = {};

var rules = { 
   ".required": function (elem) { return elem.value.length == 0; },
   ".alphanumeric": function (elem) { return /[a-zA-Z0-9]+/.test(elem.value);  }
};

$$( "input", "#your_form_id" ).each(function ( elem ) {
   var el = $(elem)
   var classes = (function () { 
      var cls = elem.className.split(' '), classMap = {};
      for (var k in cls) classMap[cls[k]] = true;
      return classMap;
   })(); // get the classes for this element

   for ( var rule in rules ) {
       error[rule] = [];
       if ( rule in classes && !rules[rule](elem) ) {
          el.addClassName("nonvalid");
          el.siblings().first().addClassName("error");
          errors[rule].push(el);
       }
   }

});

您的错误将在errors ..以访问未通过所需规则的任何元素，您将errors["required"]返回一个数组。

瘦客户端和PC之间的javascript性能

2 个答案: