Hi all, I have been banging my head against the wall for a week now on this issue so if anyone can help it would be greatly appreciated. Here is the problem description: I have an html page with a table made of many rows each of which has a dozen cells, each of which has a value in it. I start of by reading data from a static txt file, do some calculations and draw the table (all that with php). After that, I use AJAX to read that same static file (it is being updated in the background by the server) and update the values of the original table which have changed. Here is the problem, the first time i loop through my static file data and compare it to the contents of the table the CPU load on the viewer's PC can reach 100% and stay there for up to 20seconds(!!) (that value can varry and is about 20 seconds when the table has around 400 rows, with a table of 60 or 70 rows there is no load worth mentioning). The 2nd or 3rd or nth time the script makes the same comparisons it updates the table contents on the fly without any delays!! thanx for your time
Hi! Unfortunately there is no way to tell unless you show us the code you are using; anything else would be stabbing in the dark. Regards - P
well...posting all the code here would be too much..however it all comes down to the following check made for every cell of every row if ( document.getElementById('st'+id).innerHTML != newValue ) { document.getElementById('st'+id).innerHTML = newValue; } as you see I compare the old value [document.getElementById('st'+id).innerHTML] with the new value [newValue] and update if different consider that check made 100s of times BUT only the first time does the CPU show 100% load. hope that helps
innerHTML is deprecated. Use data instead. Bear in mind this only works on text nodes, so you may have to use the firstChild property to get a reference to the node containing the actual textual data. Use the DOM Inspector tool in Firefox (Tools Menu) to examine the structure of your DOM tree. Regards - P
Well, that may be so concerning innerHTML and I am 100% with you, however, this does not give an answer to my problem. Why would the same code take 1/40th of the time to execute the second time it is run? I believe the question is more theoretical than practical. Concider a 2D array of values (such as a table), lets say they are stoke market prices, that need to be updated every minute or so. The same calculations are performed over and over again each time the script is run. BUT, the first time it takes waaaay to long!
Having experimented with this issue a bit I have come down to the conclusion that what might cause the browser to behave this way is when you attempt to update multiple elements in a single script run. And that is why I have all those checks in place, so that it will only update what has changed since the last time the script went through the table values.
Hi vangelis, I followed you through up to your last post. Are you saying that before experimenting, the JS was even slower because it updated every single cell (even those that did not need updating)? One thing I can suggest (which may or may not be practical) is to update only 20 cells at a time, then set a trigger to resume processing after 0.1 seconds or something. This way the user has a chance to interact with the browser. I assume that not all 400 rows are visible at a time, so only updating the top of the page might not matter. Or, if you could group your rows into multiple rowgroups, and make only one rowgroup visible at a time, you could update just the visible rowgroup. If the user expands a different rowgroup, then you can update it. 400 visible rows sounds like a bit of a clutter, anyway...
Hi all, thanx for your time. Penagate I have tried it in several browsers on several machines and the results are always the same Regarding your suggestion mdalan that is what i was planning to do next, chop up the table in logical pieces (say 4 pieces of 100 rows) and update one at a time. I believe that this will not solve the problem completely but will obviously soften it. Besides, the thing is that every time after the second that i try to update the table it only takes miliseconds for the updates to complete(!!) Something else, when using a simple alert output to see what was going wrong i noticed that the load was normal, probably because javascript was waiting for me to hit the OK button until it went to the next row. So I think that I could smothen the overall effect of the first update by giving JS something else to do (a pause or something) before it goes to the next row. However using setTimout and setInterval have both not produced any results (i have used them to call an empty function or one that simply prints somthing on the page). any ideas on that? As you see I am trying to approach this from every conceivable angle!