Javascript's for loop in IE, Firefox, Safari, Chrome, Opera speed different

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

Javascript's for loop in IE, Firefox, Safari, Chrome, Opera speed different

Asked by duncanb7

at 2024-04-12 16:35:07

Point:500 Replies:15 POST_ID:828469USER_ID:11059

Topic:

JavaScript;;Web Browsers

I have one javscript file run in IE8/7 and the code is just
open csv file and extract data for a table of 350*16 cells, it run really slow and find the for loop in the following attached code is wasting a lot time than others code area.
for( i = 0; i < 350; i++ )
{
var tableRow = table2.insertRow(i);
var dataCells = dataRows(i).split(",");
for( j = 0; j < dataCells.length; j++ )
{
var tableCell= tableRow.insertCell(j);
tableCell.innerHTML = dataCells(j);
}
}

So, I go to run javascript in Firefox,Safari, Opera, Chrom , all just need 2 second to display
all data in my monitor , but it run in IE7/8, it use almost 35 seconds to display all.
Why, is there any setting in IE8/7 browser could improve this speed ? OR it
is related to Cache issue something like? I have already check the xmlhttp.request is
no any problem for all browser. It is the for loop issue for 350*16 cells
Users mostly get used to IE Windows, so I think I need to solve this out for IE.
Is old version of IE is better ?

Please Advise.

Duncan

Extract csv file data to append a data in html<html><head><style type="text/css">table{//border-collapse:collapse;//border:1px solid black;}td{width:100px;text-align : center;}</style></head><body onload="test()" style="background-color:#e0ffff"><script>// http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26619334.htmlfunction getData( url ,k){  var request = new XMLHttpRequest();  request.onreadystatechange = function()  {    if ( request.readyState == 4 )    {      renderData( request.responseText,k );    }  }  request.open( "GET", url, true );  request.send( null );}function renderData( data ,k){var mybody= document.getElementsByTagName("div")[k];  var dataRows = data.split( "" );  var table2 = document.createElement("Table"); //table2.border = 1;  for( i = 0; i < 350; i++ )  {    var tableRow = table2.insertRow(i);    var dataCells = dataRows[i].split(",");    for( j = 0; j < dataCells.length; j++ )    {      var tableCell= tableRow.insertCell(j);      tableCell.innerHTML = dataCells[j];    }  }//document.write(document.getElementsByTagName("body")[0].nodeName); mybody.appendChild( table2 );}function test () {  getData("http://www.mydomian.com/book7.csv?r=1264",0 );    getData("http://www.mydomain.com/postcodes.csv?r=1264",1 );}</script><table><tr><td>start</td></tr></table><div id="mytable" ></div><table><tr><td>middle</td></tr></table><div></div><table><tr><td>1234</td></tr></table></body></html>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59:60:61:62:63:64:65:66:67:68:69:70:71:72:73:74:75:76:77:78:79:80:81:82:83:84:85:86:87:88:89:90:91:92:93:94:95:96:97:98:99:100:101:102:103:

Select All Code

Author: duncanb7 replied at 2024-04-13 14:37:36

Thanks for your reply and articles
After detail reading , get more
understanding about making
a fast table, now it is still
some issue but will go to new thread

Duncan

Assisted Solution

Expert: zlatev replied at 2024-04-13 00:51:34

200 points EXCELLENT

@duncanb7 - please see my comment above. The YSlow results also pointed out that the problem is too many DOM objects being created. I have given you suggestions as to how to workaround this (by use of innerHTML and cloneNode)

Author: duncanb7 replied at 2024-04-12 23:50:39

Is microsoft waiting for being replaced soon by google, apple, firefox ?
it seems it is within 5 year but there is still 25% people using IE , so that is why
I am asking thise question

Author: duncanb7 replied at 2024-04-12 23:35:56

Could I add-on Yslow in IE ? How ?

Please advise

Duncan

Author: duncanb7 replied at 2024-04-12 23:34:31

After running Yfast as you suggest,

The Yslow show, there is two area for "n/a and "F" grade

"n/a"-Make Javascript and CSS extenal
"F" --Reduce the number of Dom element.

I have to put alert("Start") and Alert("finish") code in before and after the
"for loop" in javascript respectively. I found the aleart("start") is really
reporting out and Alert("FInish") is really slow around 35 seconds.

if ( request.readyState == 4 )
{
Alert("Start");
renderData( request.responseText,k ); //FOr looping 350*16 cells here
Alert("Finish") ;////waiting for 35 seconds, the alert message is coming out
}

Accepted Solution

Expert: zlatev replied at 2024-04-12 23:28:13

200 points EXCELLENT

Instead using insertRow and insertCell, try using HTML string concatenation and set the innerHTML of the table or try using cloneNode as shown in articles bellow
http://www.mredkj.com/tutorials/tablebasics3.html
http://stackoverflow.com/questions/676249/deep-cloning-vs-setting-of-innerhtml-whats-faster
http://domscripting.com/blog/display/35
http://cute-solutions.blogspot.com/2006/07/innerhtml-vs-createelement.html (despite the conclusion, the article clearly claims that innerHTML is faster)
http://www.quirksmode.org/dom/innerhtml.html (notice the benchmark for table methods for ie 5.5, 6 and 7)

Author: duncanb7 replied at 2024-04-12 23:18:47

If using Yslow, meaning I need to ask all user to switch Firefox, it might be issue

I try to save my file like save as htm format in Excel sheet with all CSS included, the speed
to display is same as other browser. But when I try to using csv file and put back and cell
data extract in the for loop by javascript that the speed is really slow as I said before.

Wby I use csv file and do CSS and extract cel data in Javascript, because the htm file
generated by Excel is like 400k and csv file is 40k , ten times larger that is not good or is really slow
for ftp transfer to my domain.

I am using IE7 and Excel for mathamatic analysis.

Please advise

Expert: GregArnott replied at 2024-04-12 23:16:18

Sorry , typing mistake , I could "NOT " ask user to switch to Firefox or Chrome since they have their concern and Firefox is
also have bug for web developer but smaller

The last thing I want you to do is ask other people to use a different browser.

I'm asking YOU to use these browser's tools to analyse YOUR code.

Read more:
YSlow web site.
Chrome Tools

Author: duncanb7 replied at 2024-04-12 23:11:58

IT is same using "POST", the speed is no any help
I have bug out the issue is at "for loop" in javascript for 350*16 cells looping
IE is weak for this part

Any suggestion?

Expert: GregArnott replied at 2024-04-12 23:11:16

Be remind, the problem is at IE not Firefox and Chrome.
Please suggest to improve the speed for IE for next

I mention Chrome and Firefox's tools for speeding up websites - as they have them. The developer pane in IE is woeful and will not improve your code.

The technique I mentioned regarding cleaning up code and speeding up your site using FF+Chrome's tools lead to the site working better in ALL browsers, not just their own respective browser.

I strongly suggest using the YSlow addon with Firebug in Firefox browser.

Author: duncanb7 replied at 2024-04-12 23:07:46

Sorry , typing mistake , I could "NOT " ask user to switch to Firefox or Chrome since they have their concern and Firefox is
also have bug for web developer but smaller

Expert: GregArnott replied at 2024-04-12 23:07:20

Furthermore, regarding XMLHttpRequest and IE

1. POST works properly with multiple requests to the same object. GET does not. So try POST when you experience problems.
2. Returning values from a function that uses a request object may result in the caller proceeding before the callee is ready to return a value. For correct operation the callee needs a loop or event to delay/synchronize to the callee completion.

Author: duncanb7 replied at 2024-04-12 23:06:36

Be remind, the problem is at IE not Firefox and Chrome.

Please suggest to improve the speed for IE for next

Author: duncanb7 replied at 2024-04-12 23:05:34

The question is really clear.
After I add the <!doctype html......>
Don't improve anything.
My problem is the speed is only for IE is really slower and other broswer is no any problem at all.

I could ask user to switch to Firefox or Chrome since they have their concern and Firefox is
also have bug for web developer but smaller

Assisted Solution

Expert: GregArnott replied at 2024-04-12 22:52:21

100 points EXCELLENT

You can improve speed this way:

Firefox + Firebug + YSlow.
(follow all means of speeding up your site)

Also, in Chrome - shift + ctrl + j then go to the audit tab and have it analyse your code.

Lastly, run your javascript through JSLint and polish up the code there - I've found it helps incredibly towards cross browser compliancy in code.

BTW - it appears your code is without a doctype specification.
Swap on line 1: "Extract csv file data to append a data in html"
to "<!doctype html>"

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

Javascript's for loop in IE, Firefox, Safari, Chrome, Opera speed different

Your Information

Members/Profolio