473,320 Members | 1,863 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Question about performance in IE

I have a problem with performance in IE.
The script above works quite fine when the table has a small number of
elements, but, when the table has 2500 elements, when I click in the
checkbox of the table header (to select all the checkboxes in table),
the script demands at least 3 minutes to execute. I tested the same
script in Mozilla and the response time is much more faster. Does
anyone has an idea?

<script>
function checkFieldAll(fieldName, checked) {

// Defining the prefix and sufix of the indexed parameter
var prefix = fieldName.substring( 0,
fieldName.indexOf('[') );
var sufix = fieldName.substring( fieldName.indexOf(']',
prefix) + 1 );

// Looking for the parameters to be treated matching the
sufix and prefix
var allFields = this.document.forms[0].elements;
var fields = new Array();
for (i = 0; i < allFields.length; i++) {
var name = allFields[i].name;
if(name != undefined){
if (name.indexOf(prefix) == 0 &&
name.indexOf(sufix) > name.indexOf(prefix)) {
var elem = allFields[i];
fields.push(elem);
}
}
}

// check/uncheck the fields
for (i = 0; i < fields.length; i++) {
fields[i].checked = checked;
}
}

function onChangeCheckAll (checkObject, fieldName) {
checkFieldAll(fieldName, checkObject.checked);
}
</script>

and in HTML I have something like:

<table id="lockingsList" class="noScrolledList" >
<tr class="noScrolledList">
<th class="noScrolledListHeader" rowspan="2" >
<input type="checkbox" onclick="javascript:onChangeCheckAll(this,
'lockingsList[].isChecked');">
</th>
<th class="noScrolledListHeader" rowspan="2" >
Mnemonic
</th>
</tr>

<tr class="listCellAlternate1">
<td class="listCell">
<input type="checkbox" name="lockingsList[0].isChecked"
value="on" id="lockingsList_0_isChecked">
<input type="hidden"
name="lockingsList[0].isChecked__generated_field__"
value="__FALSE_CHECKBOX__"
id="lockingsList_0_isChecked__generated_field__">
</td>
<td class="listCell"><span
id="lockingsList_0_mnemonic">P09_H67-1</span>
</td>
</tr>
......
</table>
Jul 23 '05 #1
7 2120
Lee
Gui Lloyd said:

I have a problem with performance in IE.
The script above works quite fine when the table has a small number of
elements, but, when the table has 2500 elements, when I click in the
checkbox of the table header (to select all the checkboxes in table),
the script demands at least 3 minutes to execute. I tested the same
script in Mozilla and the response time is much more faster. Does
anyone has an idea?
In the first place, IE is just slower at some things than Mozilla.
However, you've got some inefficiencies:

if (name.indexOf(prefix) == 0 &&
name.indexOf(sufix) > name.indexOf(prefix))


The second comparison never executes unless the first one is true.
That means that there's no reason to execute name.indexOf(prefix)
a second time. You know that the value must be 0:

if (name.indexOf(prefix) == 0 && name.indexOf(sufix) > 0 ) {

Why copy the elements into an array and then loop through that
array to set the value of checked? Just set each one as you
find it.

There are probably other things about the page that can be
used to improve performance. If you want to set all of the
checkboxes in the form, then don't bother looking at their
names, just check to see if the type attribute is "checkbox".

Similarly, if you have two columns of checkboxes, and only want
to set one, then you should be able to just set every other
checkbox. Or if you know that there are other fields, but that
every 5th one is a checkbox, you can loop through touching only
every 5th element, etc.

Jul 23 '05 #2
Lee wrote:

<snip excellent advice>
There are probably other things about the page that can be
used to improve performance.


One that should increase the speed considerably is the for loop:

Change from
for (i = 0; i < allFields.length; i++) {
to
for (var i = allFields.length; i--;) {
Regards,
Yep.
Jul 23 '05 #3
Yann-Erwan Perio wrote:


One that should increase the speed considerably is the for loop:

Change from
for (i = 0; i < allFields.length; i++) {
to
for (var i = allFields.length; i--;) {

or:
x=allFields.length;
while(x--){ do stuff with x}

Mick
Jul 23 '05 #4
Gui Lloyd wrote:
I have a problem with performance in IE.
The script above works quite fine when the table has a small number of
elements, but, when the table has 2500 elements, when I click in the
checkbox of the table header (to select all the checkboxes in table),
the script demands at least 3 minutes to execute. I tested the same
script in Mozilla and the response time is much more faster. Does
anyone has an idea?
On of the things that makes IE slowwer4 than Mozilla in some respects is
the fact that IE uses a list-like implementation for its object, while
Mozilla (and most other browsers) use a hash-table-like implementation.
The effect is that as IE's objects get bigger it takes longer to resolve
property names (of the properties towards the end of the list), While a
hash-table-like object takes about as long to resolve property names
regardless of size (or at least the difference isn't noticeable). The
objects suffering that problem in your code are the - element -
collection of the form and the Array. As Lee said, you don't need the
Array at all. You can also loose the second look-up in the elements
collection if you assign - allFields[i] - a reference to the form
control to a local variable at that point.

As Yep suggested, counting down in the - for - loop will be quicker
because you don't have to resolve the length property on each iteration
(and making - i - a local variable will make its use fractionally
faster. But you might also try a - do{ ... }while(); - loop in its place
as they can be faster than - for - loop (also counting down).
<script>
function checkFieldAll(fieldName, checked) {

// Defining the prefix and sufix of the indexed parameter
Formatting code with a consideration of how newsreaders will present it
is usually a good idea when posting to Usenet. See the FAQ:-

<URL: http://jibbering.com/faq/ >
var prefix = fieldName.substring( 0,
fieldName.indexOf('[') );
var sufix = fieldName.substring( fieldName.indexOf(']',
prefix) + 1 );
This looks wrong, and garbled code presentation is hiding it from other
observers. Theoretically - prefix, has been assigned a string value, yet
here you are using it as an argument to - indexOf -, and in the context
of the "position". ECMA 262 calls for the positin argument to be subject
to a call to the internal - ToInteger - function. If the string value
of - prefix - represents an integer number then the result will be a
number, but if - prefix - is a string that cannot be type-converted to a
number by javascript the call to - ToInteger - will first convert that
string to the number NaN and then return zero (as it is specified to do
for number that are NaN).

// Looking for the parameters to be treated matching the
sufix and prefix
var allFields = this.document.forms[0].elements;
var fields = new Array();
for (i = 0; i < allFields.length; i++) {
var name = allFields[i].name;
So at this point:-

var elem = allFields[i];
var name = elem.name;
if(name != undefined){
The - name - property of a form control element is of string type. It
will be an empty string if no name was assigned, except maybe on some
unusual implementations where it might actually be undefined. However,
Type-converting comparison will never consider a string value (even an
empty string) as equal to undefined, so this test will be passed by all
elements under most circumstances. If you want to exclude controls that
have no defined name attribute (so an empty string) and exclude the
possibility that the corresponding name property may be undefined (for
absolute safety) then a type-converting test will probably be quickest:-

if(name){
if (name.indexOf(prefix) == 0 &&
name.indexOf(sufix) > name.indexOf(prefix)) {
As Lee said, the second execution of - name.indexOf(prefix) - is
unnecessary as you already know that it will return zero. The comparison
in the first test may also not be needed as - !name.indexOf(prefix) -
will only be true when - name.indexOf(prefix) == 0 - is true. I don't
know whether that would actually be quicker, there won't be much in it
either way.

Javascript also has the - lastIndexOf - method for String objects, and
if you are expecting to find a suffix you would expect to find it at the
end of a string. The balance of probability is that - lastIndexOf -
implementations will search strings from end to start, and so fins
suffixes quicker than - indexOf - (each will take (almost) exactly as
long as the other when they fail to find a match) :-

if ((!name.indexOf(prefix)) && (name.lastIndexOf(sufix) > 0)){

var elem = allFields[i];
fields.push(elem);


If - elem - was assigned earlier it does not need to be re-resolved
against the (large) elements collection at this point. Assuming you drop
the - fields - array, all that is left to do here is set the checked
property:-

elem.checked = checked;

<snip>

Combining all suggested changes may produce:-

function checkFieldAll(fieldName, checked){
var prefix = fieldName.substring( 0, fieldName.indexOf('[') );
var sufix = fieldName.substring(fieldName.lastIndexOf(']') + 1);
var allFields = this.document.forms[0].elements;
var name, elem, i;
if((i = allFields.length)){
do{
elem = allFields[--i];
name = elem.name;
if(
(name = elem.name) &&
(!name.indexOf(prefix)) &&
(name.lastIndexOf(sufix) > 0)
){
elem.checked = checked;
}
}while(i);
}
}

Richard.
Jul 23 '05 #5
Thanks a lot Lee, Yann, Mick and Richard.
The main problem was really in the "for (i = 0; i < allFields.length;
i++)", but all the suggestions improved a lot the code.
Now the script takes 2 seconds with 2500 elements in table. Thanks a lot
again. Cheers.
*** Sent via Devdex http://www.devdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #6
Mick White wrote:
Yann-Erwan Perio wrote:

One that should increase the speed considerably is the for loop:

Change from
for (i = 0; i < allFields.length; i++) {
to
for (var i = allFields.length; i--;) {


or:
x=allFields.length;
while(x--){ do stuff with x}

Mick


<script type="text/javascript">
for (var test = 0; test < 5; test++) {
document.write('<p>Test: ' + test + '<br>');

var start = new Date();
for (var i = 100000; i--;) { var x = 0; }
document.write('for 99999 to 0: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
var start = new Date();
var i = 100000;
while(i--) { var x = 0; }
document.write('while 99999 to 0: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
var start = new Date();
for (i = 0; i < 100000; i++) { var x = 0; }
document.write('for 0 to 99999: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');

document.write('</p>');
}
</script>

Internet Explorer 6SP1:

Test: 0; for 99999 to 0: 190; while 99999 to 0: 200; for 0 to 99999:
251
Test: 1; for 99999 to 0: 190; while 99999 to 0: 210; for 0 to 99999:
271
Test: 2; for 99999 to 0: 210; while 99999 to 0: 200; for 0 to 99999:
251
Test: 3; for 99999 to 0: 210; while 99999 to 0: 200; for 0 to 99999:
271
Test: 4; for 99999 to 0: 190; while 99999 to 0: 200; for 0 to 99999:
241

While both the decrementing loops are slightly faster then the
incrementing one (on the order of 50ms over 100000 iterations), there
is no clear winner between the while() and for() loops.

Firefox 0.9:

Test: 0; for 99999 to 0: 371; while 99999 to 0: 340; for 0 to 99999:
461
Test: 1; for 99999 to 0: 350; while 99999 to 0: 361; for 0 to 99999:
451
Test: 2; for 99999 to 0: 340; while 99999 to 0: 361; for 0 to 99999:
450
Test: 3; for 99999 to 0: 351; while 99999 to 0: 350; for 0 to 99999:
471
Test: 4; for 99999 to 0: 340; while 99999 to 0: 1913; for 0 to 99999:
451

The odd result was where Firefox prompted me that a script was causing
the browser to run slowly. As with IE, decrementing loops are slightly
faster.

Opera 7.51:

Test: 0; for 99999 to 0: 630; while 99999 to 0: 521; for 0 to 99999:
741
Test: 1; for 99999 to 0: 511; while 99999 to 0: 481; for 0 to 99999:
751
Test: 2; for 99999 to 0: 501; while 99999 to 0: 480; for 0 to 99999:
751
Test: 3; for 99999 to 0: 501; while 99999 to 0: 481; for 0 to 99999:
751
Test: 4; for 99999 to 0: 501; while 99999 to 0: 610; for 0 to 99999:
752

Similar results.

Netscape 4.78:

Test: 0; for 9999 to 0: 58444; while 9999 to 0: 211; for 0 to 9999:
220
Test: 1; for 9999 to 0: 180; while 9999 to 0: 171; for 0 to 9999: 220
Test: 2; for 9999 to 0: 180; while 9999 to 0: 180; for 0 to 9999: 221
Test: 3; for 9999 to 0: 180; while 9999 to 0: 180; for 0 to 9999: 231
Test: 4; for 9999 to 0: 180; while 9999 to 0: 8703; for 0 to 9999: 240

Other then the odd first and second to last values (most likely due to
garbage collection or some other internal activity), the results are
pretty much on par with the other browsers listed.

So optimizing your loops by decrementing instead of incrementing
achieves an execution speed increase of about 25-50%. That
optimization time could be better spent elsewhere, such as turning a
mess like:

for (var i = 0; i < document.forms['formName'].elements.length; i++) {

var doSomethingWith =
document.forms['formName'].elements[i].value;
}

into:

var f = document.forms['formName'].elements;
for (var i = 0; i < f.length; i++) {
var doSomethingWith = f[i].value;
}

<form name="myForm">
<input type="text" name="myText" value="">
<input type="hidden" name="myHidden" value="">
<input type="radio" name="myRadio" value="">
<input type="checkbox" name="myCheckbox" value="">
<select name="mySelect">
<option value="1">one</option>
</select>
</form>
<script type="text/javascript">
for (var test = 0; test < 5; test++) {
document.write('Test: ' + test + '; ');

var start = new Date();
var f = document.forms['myForm'].elements;
for (var z = 0; z < 100; z++) {
for (var i = 0; i < f.length; i++) {
var x = f[i].value;
}
}
document.write('cached reference: ' + ((new Date()).getTime() -
start.getTime()) + '; ');

var start = new Date();
for (var z = 0; z < 100; z++) {
for (var i = 0; i < document.forms['myForm'].elements.length; i++) {
var x = document.forms['myForm'].elements[i].value;
}
}
document.write('fully qualified: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
}
</script>

Internet Explorer 6SP1:

Test: 0; cached reference: 50; fully qualified: 171
Test: 1; cached reference: 50; fully qualified: 180
Test: 2; cached reference: 50; fully qualified: 180
Test: 3; cached reference: 40; fully qualified: 181
Test: 4; cached reference: 50; fully qualified: 180

The other browsers listed above (with the exception of Netscape 4.78)
also show an approximate 300-400% increase in speed when accessing
form elements using a cached reference rather then accessing each
fully-qualified DOM reference each time. It seems obvious to me where
a Javascript author's attention should be directed when form
processing is running slowly.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #7
Gui Lloyd wrote:
I have a problem with performance in IE.

Rather than dealing with the specific example, I will just say that
there are - naturally - differences in speed between IE and any other
browser. In fact, they are all different in some way.

Your job as a coder is to be sure that your code actually works, not to
make it work perfectly and at the same speed on every browser. Quite
simply, you are not in control of the browsers used for your code or of
the speed of the browsers either. That is up to (a) the client) and (b)
the browser developers.
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Carlos Ribeiro | last post by:
As a side track of my latest investigations, I began to rely heavily on generators for some stuff where I would previsouly use a more conventional approach. Whenever I need to process a list, I'm...
3
by: pertheli | last post by:
Hello, I have a large array of pointer to some object. I have to run test such that every possible pair in the array is tested. eg. if A,B,C,D are items of the array, possible pairs are AB, AC,...
7
by: Randell D. | last post by:
Folks, I have a Javascript performance question that I might have problems explaining... In PHP, better performance can be obtained dealing directly with a variable, as opposed to an element...
6
by: John | last post by:
I have a question about design, performance, and code reusability. Which one of these would be the best as far as performance/speed Send a textbox to a public class to check it and process/not...
6
by: Mike | last post by:
Lets just say my app is done HOO HOO. Now, I'm accessing the database via a web service and one thing i noticed that my app is running real slow. When I first started working on the app is ran...
7
by: Tiraman | last post by:
Hi , I am using allot the try catch in my code and the question is if it is good ? it will decrease my performance ? one more question
21
by: yeti349 | last post by:
Hi, I'm using the following code to retrieve data from an xml file and populate a javascript array. The data is then displayed in html table form. I would like to then be able to sort by each...
5
by: Markus Ernst | last post by:
Hello A class that composes the output of shop-related data gets some info from the main shop class. Now I wonder whether it is faster to store the info in the output class or get it from the...
34
by: =?Utf-8?B?U3RldmUgQnVnZGVu?= | last post by:
Hi, I recently had an interview where I was asked a number of questions on C#. Unfortunately I didn't get the answers from the test and find that one of them is still niggling me. It was...
30
by: galiorenye | last post by:
Hi, Given this code: A** ppA = new A*; A *pA = NULL; for(int i = 0; i < 10; ++i) { pA = ppA; //do something with pA
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.