jholder
09-06-2005, 11:21 AM
Here is the high level question. What is the fastest way to display changes in a page? reloading the page? writing to the DOM, some other secret method?
Alright, Let me give you the low down of what I'm working with.
I have a page that lists information in a sort of tree view (like your standard folder view) (i.e. Category-->Sub-Category-->Sub-Sub-Category.) Initially the user sees Category 1, Category 2, etc.
(
+CATEGORY 1
+CATEGORY 2
)
When they click on Category 1, they see CAT 1's children.
(
-CATEGORY 1
+CAT1-SubCat1
+CAT1-SubCat2
+CATEGORY 2
)
And of course, Clicking on CAT1-SubCat2 gives you something like:
(
-CATEGORY 1
+CAT1-SubCat1
-CAT1-SubCat2
SubCat2-SubSubCat1
SubCat2-SubSubCat2
+CATEGORY 2
)
Initially we used the standard old school method where each link clicked on went to a page that was generated specifically for the Category or subcategory requested. That was fine in certain instances, but there were times when the listing of children being returned were just too great, and it ended up being unbearably slow. Let's say CATEGORY 1 had 10 children. IT would return very quickly, but if Category 2 had 7000 children, it would return unusable slow. And for each child clicked on in Category 2, that whole list had to be queried and redisplayed.
After a few days of optimizing our SQL, the database was returning the data in less than a second regardless. So that was no longer a concern. However, simply returning so much data, and of course having the browser render it was eating up valuable time.
So we started looking into AJAX, or at least the methodology of getting information on the fly. So that when the Category 2 was selected, and one of its children was selected we didn't have to re-render the initial list. Granted, we still took the initial hit for its size, but the later clicks were monumentally shortened.
Here again we experienced problems, alterations to the DOM, once it has reached a certain size are slow, and more often than not, caused our browser (well, my browser at least to sometimes lock up, sometimes not, but always take a great deal of time. Such that any time savings we might have gained, were almost erased.
I've tried optimizing the DOM code, using cloneNode vs. createNode on a line by line basis. As well as cloning an entire block of HTML and then altering the elements individually (btw, its faster to clone small nodes and append them to the DOM, rather than clone a big node, change the elements and then append that large node to the DOM).
So finally my question. I can control the way we get data (current XML for AJAX), but not the data structure itself. (As in, if 10 items have 5 children and the 11th has 100,000 I can't change that). What is the best way to create a block of HTML and then render it in the browser?
Is there someway to generate the code of a page, and replace the current page's HTML? I don't know, make copy the current DOcument object, make changes to it, then convert it to an HTML string, and reset the page to that? I'm at wit's end here.
I apologize, but I'm going to cross-post this to the DHTML and Javascript forums in case this is more approproiate for those forums.
Thanks in advance,
--James
Alright, Let me give you the low down of what I'm working with.
I have a page that lists information in a sort of tree view (like your standard folder view) (i.e. Category-->Sub-Category-->Sub-Sub-Category.) Initially the user sees Category 1, Category 2, etc.
(
+CATEGORY 1
+CATEGORY 2
)
When they click on Category 1, they see CAT 1's children.
(
-CATEGORY 1
+CAT1-SubCat1
+CAT1-SubCat2
+CATEGORY 2
)
And of course, Clicking on CAT1-SubCat2 gives you something like:
(
-CATEGORY 1
+CAT1-SubCat1
-CAT1-SubCat2
SubCat2-SubSubCat1
SubCat2-SubSubCat2
+CATEGORY 2
)
Initially we used the standard old school method where each link clicked on went to a page that was generated specifically for the Category or subcategory requested. That was fine in certain instances, but there were times when the listing of children being returned were just too great, and it ended up being unbearably slow. Let's say CATEGORY 1 had 10 children. IT would return very quickly, but if Category 2 had 7000 children, it would return unusable slow. And for each child clicked on in Category 2, that whole list had to be queried and redisplayed.
After a few days of optimizing our SQL, the database was returning the data in less than a second regardless. So that was no longer a concern. However, simply returning so much data, and of course having the browser render it was eating up valuable time.
So we started looking into AJAX, or at least the methodology of getting information on the fly. So that when the Category 2 was selected, and one of its children was selected we didn't have to re-render the initial list. Granted, we still took the initial hit for its size, but the later clicks were monumentally shortened.
Here again we experienced problems, alterations to the DOM, once it has reached a certain size are slow, and more often than not, caused our browser (well, my browser at least to sometimes lock up, sometimes not, but always take a great deal of time. Such that any time savings we might have gained, were almost erased.
I've tried optimizing the DOM code, using cloneNode vs. createNode on a line by line basis. As well as cloning an entire block of HTML and then altering the elements individually (btw, its faster to clone small nodes and append them to the DOM, rather than clone a big node, change the elements and then append that large node to the DOM).
So finally my question. I can control the way we get data (current XML for AJAX), but not the data structure itself. (As in, if 10 items have 5 children and the 11th has 100,000 I can't change that). What is the best way to create a block of HTML and then render it in the browser?
Is there someway to generate the code of a page, and replace the current page's HTML? I don't know, make copy the current DOcument object, make changes to it, then convert it to an HTML string, and reset the page to that? I'm at wit's end here.
I apologize, but I'm going to cross-post this to the DHTML and Javascript forums in case this is more approproiate for those forums.
Thanks in advance,
--James