jeffman Posted May 1, 2008 Share Posted May 1, 2008 Till now, I've been writing dynamic webapps with HTML as the front end, a javascript engine, CGI to load data into javascript objects, and AJAX to update data to the server.As I grow, things grow slow--so slow that on a slow machine, Firefox checks to see if the script might be trapped in a loop. (Ever get that message?)So I contemplate a huge move to Flash.My goal at this moment is to write a kind of spreadsheet with as many as 1000 data cells. What I'm doing now is loading the cells with data from objects that I create on the fly in CGI.Can I do this in Flash? Overall, would I get an increase in onload speed over javascript?Thanks for any advice, especially things I haven't even thought to ask. Link to comment Share on other sites More sharing options...
jesh Posted May 2, 2008 Share Posted May 2, 2008 As for your Flash question, I'm entirely ignorant.As for the javascript....I only get that "the script on this page is taking a long time to execute, do you wish to stop it" message when I have faulty recursive logic or an out of control infinite loop. Do you have an example of one of these sites that's taking too long to load? I could take a peek to see if anything jumps out at me. Link to comment Share on other sites More sharing options...
jeffman Posted May 2, 2008 Author Share Posted May 2, 2008 Thanks, Jesh, but it's a lot more code than I should inflict on anyone. It's not an infinite loop. I'm just adding too many text inputs through DOM methods, and everyone knows they are slower than options like innerHTML etc. I only get complaints in FF 2.x on Macintosh, but 3beta5 on Mac is slow. Rendering is actually pretty fast in IE.I'll experiment some more. I read about document fragments rendering faster when you append them all at once.Then again, this is my biggest app so far, and I'm also getting antsy about protecting the code. Link to comment Share on other sites More sharing options...
jesh Posted May 2, 2008 Share Posted May 2, 2008 It's a little slow here at work today, so I figured I'd run some tests too. I tried creating a table with 1000 cells three different ways - XML DOM and createElement/appendChild, HTML DOM and insertRow/insertCell, and strings and innerHTML.All three ways worked in Firefox (Windows), but I could only get the second two methods to display the table in IE (Windows), but they both rendered out the table using innerHTML way faster than the other two methods.Here's my test script, for what it's worth: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><style>table { display: none; }</style></head><body><script type="text/javascript">var start1,start2,start3,end1,end2,end3;var iterations = 1000;// create a table using the XML DOM createElement method...start1 = new Date();var table1 = document.createElement("table");for(var i = 0; i < iterations; i++){ var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode(i)); tr.appendChild(td); table1.appendChild(tr);}document.body.appendChild(table1);end1 = new Date();var div1 = document.createElement("div");div1.appendChild(document.createTextNode("XML DOM took " + (end1-start1)));document.body.appendChild(div1);// Create a table using the HTML DOM insertRow/insertCell methodstart2 = new Date();var table2 = document.createElement("table");for(var i = 0; i < iterations; i++){ var tr = table2.insertRow(table2.rows.length); var td = tr.insertCell(0); td.appendChild(document.createTextNode(i));}document.body.appendChild(table2);end2 = new Date();var div2 = document.createElement("div");div2.appendChild(document.createTextNode("HTML DOM took " + (end2-start2)));document.body.appendChild(div2);// Create a table using the innerHTML methodstart3 = new Date();var html = "<table>";for(var i = 0; i < iterations; i++){ html += "<tr><td>" + i + "</td></tr>";}html += "</table>";var table3 = document.createElement("div");table3.innerHTML = html;document.body.appendChild(table3);end3 = new Date();var div3 = document.createElement("div");div3.appendChild(document.createTextNode("InnerHTML took " + (end3-start3)));document.body.appendChild(div3);</script></body></html> Typical output for me: XML DOM took 94HTML DOM took 156InnerHTML took 16As far as Flash goes, most Flash sites that I visit make me wait through a loading screen when I first get there. So I would think any client-side solution where you are having to render out thousands of cells is going to be a bit on the slow side (unless you use innerHTML, perhaps). Link to comment Share on other sites More sharing options...
jeffman Posted May 2, 2008 Author Share Posted May 2, 2008 Wow, thanks. I appreciate it. I knew innerHTML would be faster, but a whole order of magnitude is pretty striking.FWIW, I got no appreciable difference when I played around with document fragments.I did get a big difference when I made a different sort of change. When I first tested the app many months ago, I didn't notice the slow rendering. Then I added more cells and it slowed down. I'd read somewhere that setting visibility to hidden, letting everything get drawn that way, and then changing visibility to visible would speed things up. Today I experimented with the display property instead of visibility. That cut the rendering by about half. Maybe if I combine that with innerHTML I'll get somewhere. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 13, 2008 Share Posted May 13, 2008 You might also want to take a look at ExtJS. I'm using it for a pretty large project right now and it's a very powerful UI toolset. Take a look at this example, an editable grid:http://extjs.com/deploy/dev/examples/grid/edit-grid.htmlIf you want to see what I'm using it for send me a PM and I'll give you a link to it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.