Jump to content
Sign in to follow this  
jeffman

Flash for webapps with http

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 16
As 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).

Share this post


Link to post
Share on other sites

Wow, thanks. I appreciate it.icon1.gif 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...