[jQuery] Re: Fastest method to create table rows
Oh, it's fine. I wasn't expecting someone to write the code for me. I'm just working on a plugin and hitting a roadblock with IE here. I'm going to try and whip up an example of what I'm seeing that illustrates this outside of my project. It seems like the string operations aren't the bottleneck. The bottleneck happens when I pass a really large piece of HTML to $() to create that object in the DOM (however jQuery handles that). Once again, I'll throw together a demo that has this narrowed down to see if I get any takers. It's worth noting that this works fine in FF2,Opera, and Safari 3 Beta. It's just IE that is giving me fits. Josh On Aug 7, 10:09 pm, RobG [EMAIL PROTECTED] wrote: On Aug 8, 11:56 am, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. IE is notoriously slow if you are concatenating using the compound += operator. After all of this rambling, does anyone have any options for me to try? You might consider returning HTML from the server rather than trying stuff on the client. Sorry, for the self-dialog here. If you care to show your code that does the iteration and the data structure you are working with, you might get some takers. It seems no one is keen to write the code for you. Some questions that come to mind: - Are you trying to use innerHTML or DOM methods? - Is your data returned as a delimited string or JSON? - Are you trying to build the entire table or just add some rows? - Are there hanlders, classes, attributes or whatever that need to be added? -- Rob
[jQuery] Re: Fastest method to create table rows
Hi Josh, On 8/8/07, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? I'm new to both javascript and jquery (and a bit tired too ;) but have you tried to append only a few lines every time and repeat that in a loop? I'm not sure, but I think this could probably be a bit faster. :-) Sorry, for the self-dialog here. -Josh Greetings Kai
[jQuery] Re: Fastest method to create table rows
From the sound of it, you're receiving data back from the server,
generating html, then passing that html to .append() right? I'd try
using standard dom methods (i.e. document.createElement('td')), and
avoid converting the strings at all.
When jQuery converts an html string, it does a bunch of munging (have a
look at the jquery.clean function) to make sure that the elements you
get back match the elements you put in. Most of the munging is to get
rid of extra elements IE adds to tables, so it's much, much faster
(especially for tables) to just start with a DOM node in the first place
if at all possible.
Cheers,
Luke
Josh Bush wrote:
Well, I feel stupid. it's not the join that's taking so long, it's
the $( really big DOM string with 1,000 rows and 3 columns) that
takes so dang long on IE7. After all of this rambling, does anyone
have any options for me to try?
Sorry, for the self-dialog here.
-Josh
On Aug 7, 8:42 pm, Josh Bush [EMAIL PROTECTED] wrote:
Well, FF2 performance is great at 500-600ms. IE7 is struggling with a
join of 1,000 elements to the tune of 70,000 ms!
Each array element contains a string, something like 'trtd1/
tdtd2/td/tr'
Any advice is greatly appreciated. I still feel like a noob in
javascript sometimes. :(
Josh
On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote:
I'm working on a project that makes a web service call and pulls back
data. Sometimes that data can be 1,000ish rows. What is the fastest
way that I can create those rows? Right now I'm just doing string
concatenation to make HTML and passing that to the .append method. I
read the other day where someone(Klaus?) said that array.join was a
faster way to do string concatenation.
I'd like to avoid the string concats all together if there is a faster
method. I'm just poking around for ideas.
Thanks
Josh
[jQuery] Re: Fastest method to create table rows
Hi Josh, Not answering the question, but does your app really require 1000+ table rows to be displayed at once? Would some pagination not be more appropriate? This wouldn't just help the speed of the build, but it'd also really help the poor person that otherwise has to scroll through 1000 rows. yours unhelpfully, Rich Wild. On Aug 8, 11:52 am, Josh Bush [EMAIL PROTECTED] wrote: Oh, it's fine. I wasn't expecting someone to write the code for me. I'm just working on a plugin and hitting a roadblock with IE here. I'm going to try and whip up an example of what I'm seeing that illustrates this outside of my project. It seems like the string operations aren't the bottleneck. The bottleneck happens when I pass a really large piece of HTML to $() to create that object in the DOM (however jQuery handles that). Once again, I'll throw together a demo that has this narrowed down to see if I get any takers. It's worth noting that this works fine in FF2,Opera, and Safari 3 Beta. It's just IE that is giving me fits. Josh On Aug 7, 10:09 pm, RobG [EMAIL PROTECTED] wrote: On Aug 8, 11:56 am, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. IE is notoriously slow if you are concatenating using the compound += operator. After all of this rambling, does anyone have any options for me to try? You might consider returning HTML from the server rather than trying stuff on the client. Sorry, for the self-dialog here. If you care to show your code that does the iteration and the data structure you are working with, you might get some takers. It seems no one is keen to write the code for you. Some questions that come to mind: - Are you trying to use innerHTML or DOM methods? - Is your data returned as a delimited string or JSON? - Are you trying to build the entire table or just add some rows? - Are there hanlders, classes, attributes or whatever that need to be added? -- Rob
[jQuery] Re: Fastest method to create table rows
Okay, I slapped together a test. It's up at http://digitalbush.com/tests/speed_woes.html The big deal is how long it takes for the jQuery object to get created on IE7 vs any other browser. I haven't tried IE6 and lower, but I have tried FF2, Safari 3 Beta, and Opera. Thank You Josh On Aug 7, 10:09 pm, RobG [EMAIL PROTECTED] wrote: On Aug 8, 11:56 am, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. IE is notoriously slow if you are concatenating using the compound += operator. After all of this rambling, does anyone have any options for me to try? You might consider returning HTML from the server rather than trying stuff on the client. Sorry, for the self-dialog here. If you care to show your code that does the iteration and the data structure you are working with, you might get some takers. It seems no one is keen to write the code for you. Some questions that come to mind: - Are you trying to use innerHTML or DOM methods? - Is your data returned as a delimited string or JSON? - Are you trying to build the entire table or just add some rows? - Are there hanlders, classes, attributes or whatever that need to be added? -- Rob
[jQuery] Re: Fastest method to create table rows
I totally expected this question. We've added client side filtering to aid the user in trimming that list down which is working very well for us speed wise. The case where a 1,000 row query comes back is not the norm, so for us it doesn't make sense to add the complexity (UI wise) of paging for a maybe 10% scenario. If it becomes a problem I may need to drum up some sort of dynamic load piece that adds more stuff as the user scrolls. The filtering would then need to be server side. It wouldn't be a bad way to go, but that would add more complexity (development wise) to this project with the need for caching results to keep server load down and the UI additions. The frustrating thing about it is that usability is fine in the other browsers. Thanks for keeping me on my toes Rich. Josh On Aug 8, 6:30 am, Rich Wild [EMAIL PROTECTED] wrote: Hi Josh, Not answering the question, but does your app really require 1000+ table rows to be displayed at once? Would some pagination not be more appropriate? This wouldn't just help the speed of the build, but it'd also really help the poor person that otherwise has to scroll through 1000 rows. yours unhelpfully, Rich Wild. On Aug 8, 11:52 am, Josh Bush [EMAIL PROTECTED] wrote: Oh, it's fine. I wasn't expecting someone to write the code for me. I'm just working on a plugin and hitting a roadblock with IE here. I'm going to try and whip up an example of what I'm seeing that illustrates this outside of my project. It seems like the string operations aren't the bottleneck. The bottleneck happens when I pass a really large piece of HTML to $() to create that object in the DOM (however jQuery handles that). Once again, I'll throw together a demo that has this narrowed down to see if I get any takers. It's worth noting that this works fine in FF2,Opera, and Safari 3 Beta. It's just IE that is giving me fits. Josh On Aug 7, 10:09 pm, RobG [EMAIL PROTECTED] wrote: On Aug 8, 11:56 am, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. IE is notoriously slow if you are concatenating using the compound += operator. After all of this rambling, does anyone have any options for me to try? You might consider returning HTML from the server rather than trying stuff on the client. Sorry, for the self-dialog here. If you care to show your code that does the iteration and the data structure you are working with, you might get some takers. It seems no one is keen to write the code for you. Some questions that come to mind: - Are you trying to use innerHTML or DOM methods? - Is your data returned as a delimited string or JSON? - Are you trying to build the entire table or just add some rows? - Are there hanlders, classes, attributes or whatever that need to be added? -- Rob
[jQuery] Re: Fastest method to create table rows
Do you think this would be faster all the way around across
platforms? I've never actually done any direct dom creation stuff,
so this will be new to me.
Josh
On Aug 8, 6:05 am, Luke Lutman [EMAIL PROTECTED] wrote:
From the sound of it, you're receiving data back from the server,
generating html, then passing that html to .append() right? I'd try
using standard dom methods (i.e. document.createElement('td')), and
avoid converting the strings at all.
When jQuery converts an html string, it does a bunch of munging (have a
look at the jquery.clean function) to make sure that the elements you
get back match the elements you put in. Most of the munging is to get
rid of extra elements IE adds to tables, so it's much, much faster
(especially for tables) to just start with a DOM node in the first place
if at all possible.
Cheers,
Luke
Josh Bush wrote:
Well, I feel stupid. it's not the join that's taking so long, it's
the $( really big DOM string with 1,000 rows and 3 columns) that
takes so dang long on IE7. After all of this rambling, does anyone
have any options for me to try?
Sorry, for the self-dialog here.
-Josh
On Aug 7, 8:42 pm, Josh Bush [EMAIL PROTECTED] wrote:
Well, FF2 performance is great at 500-600ms. IE7 is struggling with a
join of 1,000 elements to the tune of 70,000 ms!
Each array element contains a string, something like 'trtd1/
tdtd2/td/tr'
Any advice is greatly appreciated. I still feel like a noob in
javascript sometimes. :(
Josh
On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote:
I'm working on a project that makes a web service call and pulls back
data. Sometimes that data can be 1,000ish rows. What is the fastest
way that I can create those rows? Right now I'm just doing string
concatenation to make HTML and passing that to the .append method. I
read the other day where someone(Klaus?) said that array.join was a
faster way to do string concatenation.
I'd like to avoid the string concats all together if there is a faster
method. I'm just poking around for ideas.
Thanks
Josh
[jQuery] Re: Fastest method to create table rows
Josh, Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? Sorry, for the self-dialog here. Just for testing purposes, you might want to test in IE by just using the DOM property innerHTML to set the table. This will at least tell you where the majority of overhead is coming from. Is it from jQuery's processing routines or for the actual DOM creation. In my experience IE6 is sluggish when trying to generate large tables on the fly. (This is pre-jQuery coding as well.) -Dan
[jQuery] Re: Fastest method to create table rows
I had read somewhere that IE didn't support .innerHTML for the tbody element. Will I have to recreate the entire table HTML? Sorry for the noob question; I'm still a fish out of water in javascript at times. Josh On Aug 8, 8:18 am, Dan G. Switzer, II [EMAIL PROTECTED] wrote: Josh, Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? Sorry, for the self-dialog here. Just for testing purposes, you might want to test in IE by just using the DOM property innerHTML to set the table. This will at least tell you where the majority of overhead is coming from. Is it from jQuery's processing routines or for the actual DOM creation. In my experience IE6 is sluggish when trying to generate large tables on the fly. (This is pre-jQuery coding as well.) -Dan
[jQuery] Re: Fastest method to create table rows
You might find this useful: http://www.quirksmode.org/dom/innerhtml.html It's a speed comparison of various (non-jQuery) ways to create a 50x50 table. On 8/8/07, Josh Bush [EMAIL PROTECTED] wrote: I had read somewhere that IE didn't support .innerHTML for the tbody element. Will I have to recreate the entire table HTML? Sorry for the noob question; I'm still a fish out of water in javascript at times. Josh On Aug 8, 8:18 am, Dan G. Switzer, II [EMAIL PROTECTED] wrote: Josh, Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? Sorry, for the self-dialog here. Just for testing purposes, you might want to test in IE by just using the DOM property innerHTML to set the table. This will at least tell you where the majority of overhead is coming from. Is it from jQuery's processing routines or for the actual DOM creation. In my experience IE6 is sluggish when trying to generate large tables on the fly. (This is pre-jQuery coding as well.) -Dan -- Aaron Heimlich Web Developer [EMAIL PROTECTED] http://aheimlich.freepgs.com
[jQuery] Re: Fastest method to create table rows
I did some more testing on my end. If I create all of the html first using the array join method for concatenation, and then .append() once instead of .append()ing 1,000 times, then I'm showing about 90% improvement in speed. Not too shabby. On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote: I'm working on a project that makes a web service call and pulls back data. Sometimes that data can be 1,000ish rows. What is the fastest way that I can create those rows? Right now I'm just doing string concatenation to make HTML and passing that to the .append method. I read the other day where someone(Klaus?) said that array.join was a faster way to do string concatenation. I'd like to avoid the string concats all together if there is a faster method. I'm just poking around for ideas. Thanks Josh
[jQuery] Re: Fastest method to create table rows
Well, FF2 performance is great at 500-600ms. IE7 is struggling with a join of 1,000 elements to the tune of 70,000 ms! Each array element contains a string, something like 'trtd1/ tdtd2/td/tr' Any advice is greatly appreciated. I still feel like a noob in javascript sometimes. :( Josh On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote: I'm working on a project that makes a web service call and pulls back data. Sometimes that data can be 1,000ish rows. What is the fastest way that I can create those rows? Right now I'm just doing string concatenation to make HTML and passing that to the .append method. I read the other day where someone(Klaus?) said that array.join was a faster way to do string concatenation. I'd like to avoid the string concats all together if there is a faster method. I'm just poking around for ideas. Thanks Josh
[jQuery] Re: Fastest method to create table rows
Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? Sorry, for the self-dialog here. -Josh On Aug 7, 8:42 pm, Josh Bush [EMAIL PROTECTED] wrote: Well, FF2 performance is great at 500-600ms. IE7 is struggling with a join of 1,000 elements to the tune of 70,000 ms! Each array element contains a string, something like 'trtd1/ tdtd2/td/tr' Any advice is greatly appreciated. I still feel like a noob in javascript sometimes. :( Josh On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote: I'm working on a project that makes a web service call and pulls back data. Sometimes that data can be 1,000ish rows. What is the fastest way that I can create those rows? Right now I'm just doing string concatenation to make HTML and passing that to the .append method. I read the other day where someone(Klaus?) said that array.join was a faster way to do string concatenation. I'd like to avoid the string concats all together if there is a faster method. I'm just poking around for ideas. Thanks Josh
[jQuery] Re: Fastest method to create table rows
You're probably running into something similar to this: http://ideamill.synaptrixgroup.com/?p=14 Try adding style=display:none; to those TDs before the browser gets them. With any luck IE will ignore them rather than try to rebuild the entire CSS object every time you add them to the DOM. Once you have the rows attached you can make them visible again. I tried TD, TR, TBODY and TABLE, and TD seemed to make the biggest difference. FWIW On 8/7/07, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. After all of this rambling, does anyone have any options for me to try? Sorry, for the self-dialog here. -Josh On Aug 7, 8:42 pm, Josh Bush [EMAIL PROTECTED] wrote: Well, FF2 performance is great at 500-600ms. IE7 is struggling with a join of 1,000 elements to the tune of 70,000 ms! Each array element contains a string, something like 'trtd1/ tdtd2/td/tr' Any advice is greatly appreciated. I still feel like a noob in javascript sometimes. :( Josh On Aug 7, 3:40 pm, Josh Bush [EMAIL PROTECTED] wrote: I'm working on a project that makes a web service call and pulls back data. Sometimes that data can be 1,000ish rows. What is the fastest way that I can create those rows? Right now I'm just doing string concatenation to make HTML and passing that to the .append method. I read the other day where someone(Klaus?) said that array.join was a faster way to do string concatenation. I'd like to avoid the string concats all together if there is a faster method. I'm just poking around for ideas. Thanks Josh
