3

我有一个使用瘦客户端（bosanova 终端）作为用户前端的网络应用程序。我注意到瘦客户端和 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会在终端上遭受这样的性能损失，我将非常感谢一些提示。

更新：>>>>>>>>>>>>>>>>>>

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

更新：>>>>>>>>>>>>>>>>>>

4

2 回答 2

2

好吧，IE6 的 Javascript 引擎很慢——请记住，它可以追溯到微软坚持任何真正的 Web 应用程序开发当然应该使用 ActiveX 完成的时候。在具有便宜的、可能不太快的 CPU 的瘦客户端上，它会非常慢。

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

$$( 'input.requiredfield' ).each( function ( elem ){
于 2010-08-02T21:45:32.747 回答
0

我对 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"]返回数组的操作。

于 2010-08-02T21:44:27.303 回答