Javascript: Putting form objects in JS arrays

Post #169,530 by ChrisR 8/16/04 4:56:06 PM Reply	Javascript: Putting form objects in JS arrays I've got a page that can have several thousand input items in a form. In order to speed matters up, especially prior to the submit, I grab the reference to the individual form elements and push them into the appropriate arrays. This speeds up matters on the submit side significantly since I can do things like disable the inputs prior to the submit (meaning I can prevent it from submitting stuff that doesn't change). Problem is that this makes for a lot more work on initialization, and I'm seeing times of up to a minute or two just for the initialization routine. Mozilla is faster by a factor of 2 or 3, but the delay is still up to 30 seconds. Below is a simplified take on the routine. With only 5 fields it's pretty fast, but as the number of fields multiplies it gets bogged down. Hopefully you get the idea of what I'm doing, and perhaps can point me to a better way to populate the array(s). Thanks. <html> <head><title>Test</title></head> <body> <form> <input type='text' name='Description0' id='Description0' size='80' value='abc' /><br /> <input type='text' name='Description1' id='Description1' size='80' value='abc' /><br /> <input type='text' name='Description2' id='Description2' size='80' value='abc' /><br /> <input type='text' name='Description3' id='Description3' size='80' value='abc' /><br /> <input type='text' name='Description4' id='Description4' size='80' value='abc' /><br /> <input type='hidden' name='MaxIndex' id='MaxIndex' value='5' /> </form> <script language='JavaScript' type='text/javascript'> var max = parseInt(document.getElementById("MaxIndex").value); var descArray = new Array(max); for (var i = 0; i < max; i++) { descArray[i] = document.getElementById("Description" + i); } </script> </body> </html>
Post #169,547 by ben_tilly 8/16/04 5:40:32 PM Reply	DON'T!!! First see [link\|http://z.iwethey.org/forums/render/content/show?contentid=120880\|http://z.iwethey.org...?contentid=120880] and test whether you have a nasty IE memory leak with this strategy. What you're doing is similar enough to what I ran into that I'd suspect that you do. That said, my solution on a similar slow initialization problem in JavaScript was to have a function that would do a piece of the initialization and then if it didn't finish, would set up a timeout where it was called again. The timeout delays didn't have to be long, just present so that the browser would know to do other useful stuff. (You see, JavaScript is multi-threaded except when it isn't...) The initialization slowed down by perhaps 20%, but the page was useable right away. However do that IE test first, leaking large pages quickly comes to suck badly when you run out of RAM. Cheers, Ben To deny the indirect purchaser, who in this case is the ultimate purchaser, the right to seek relief from unlawful conduct, would essentially remove the word consumer from the Consumer Protection Act - [link\|http://www.techworld.com/opsys/news/index.cfm?NewsID=1246&Page=1&pagePos=20\|Nebraska Supreme Court]
Post #169,559 by ChrisR 8/16/04 6:20:10 PM Reply	Not sure how I'd test for the memory leak? I am actually using a bunch of setTimeout for the loops to allow the user to interact with the form while the initialization is occuring. Just didn't want to complexify the sample with that bit of indirection. More interested, though, in how you discover and detect the memory leak within IE.
Post #169,566 by ben_tilly 8/16/04 7:11:53 PM Reply	Testing for it is very simple It isn't a subtle problem, just an obscure one. Navigate to and from that page in IE while watching memory. If memory usage goes up rapidly, you probably have the problem that I was referring to. Or even more simply, if you can submit from that page back to itself, just hit submit a bunch of times while watching memory. Particularly if the page has a lot on it, IE's representation of the page takes up a lot of memory. (If you didn't have a lot on it to start with, you can arrange to...) Leaking 10 MB at a time very quickly becomes noticable. Cheers, Ben To deny the indirect purchaser, who in this case is the ultimate purchaser, the right to seek relief from unlawful conduct, would essentially remove the word consumer from the Consumer Protection Act - [link\|http://www.techworld.com/opsys/news/index.cfm?NewsID=1246&Page=1&pagePos=20\|Nebraska Supreme Court]
Post #169,567 by FuManChu 8/16/04 7:33:52 PM Reply	How would that compare to building form on the fly? ...performance-wise, that is. <body>\n<script type='text/javascript'>\n<!--\n\n var descArray = new Array();\n var index = 0;\n \n function box(value) {\n var newNode = document.createElement("input");\n newNode.name = "Description" + index;\n newNode.id = newNode.name;\n newNode.value = value;\n document.form1.appendChild(newNode);\n descArray.push(newNode);\n index += 1;\n\n // This portion would be generated by your CGI script:\n box("abc");\n box("def");\n box("ghi");\n box("jkl");\n box("mno");\n\n// -->\n</script> ...something like that anyway. Extremely untested. "Despite the seemingly endless necessity for doing so, it's actually not possible to reverse-engineer intended invariants from staring at thousands of lines of code (not in C, and not in Python code either)." Tim Peters on python-dev

Welcome to IWETHEY!