Question

I have a web app using thin clients (bosanova terminals) as the front end for users. I’ve noticed some performance differences in JavaScript between the thin client and a PC. The terminals are running windows XP embedded with IE6, and the pages I’m referring to are utilizing prototype JS framework to do some rather simple validation on form elements.

for example the following is what I’m using to make sure required fields are populated.
There are two more like this for .numeric and .alaphanumeric that test acordingly and push errors to stop the form form getting submitted.

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

});

The problem I’m seeing is a PC in Firefox or IE a form with 5-20 fields on the page takes maybe a half second to process longer than with out the validation. On the Terminal however, it takes anywhere from 15-25 seconds longer to run the validation than the same page with out it. As I believe I’ve mentioned I’ve tested this in IE6 on a PC and do not see the performance loss. A call to Bosanova led me to upgrading the memory in the terminal which I did just before this posting and the results hadn’t changed.

I can change the script so I loop through the form fields only once and handle .required .numeric .alphanumeric as I go and it will help I’m sure. As it is now there is such a difference in performance between the PC and Terminal (thin client). I’m curious to find out why.

If anyone has any experience troubleshooting or knows why prototype/javascript would suffer such a performance loss on a terminal I’d greatly appreciate some tips.

Update: >>>>>>>>>>>>>>>>>

I have still been testing and looking into this issue and thought I’d share this. We received a newer Terminal yesterday which I loaded up and tested. The new terminal running IE6 worked flawlessly just as any other browser. of course it was a tad slower than a PC because 1. its running IE6 and 2. its a thin client but the speed difference was in the hundreds of a second vs. a 10-50 second difference running the same scripts. The physical specs of the 2 different thin clients are not that different 1.2 ghz(old) vs 1.6 ghz(new) memory was the same and the HD/DOM was 512MB (old) vs 1gig(new). Still have’nt been able to pin point what is going on in the old terminal but looks to be related to that specific model/revision of the terminal.

Update: >>>>>>>>>>>>>>>>>

Answer 1

I don’t know too much about Prototype, but you should cache that element in a local variable instead of wrapping the $ function around it.

$$( '.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);
   }
});

I don’t think that will fix all of the performance issues, but maybe it’ll shave a few seconds off. I would suggest going ahead with that change you mentioned so it checks all errors/classes in one loop instead of looping through all elements for each type of class.

Maybe something like (again, I don’t know prototype well so somethings might be off):

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);
       }
   }

});

Your errors will be in errors.. to access any elements that failed the required rule, you would do errors["required"] which would return an array.