On Dec 25 2009, 7:59 am, Andrew Hedges <[email protected]> wrote: > By the way, I've updated the innerHTML versus DOM APIs speed test > using PPK's method. See the new version at the same old URL: > > http://andrew.hedges.name/e/innerhtml/
This issue requires more analysis than a simplistic comparison of how fast innerHTML and DOM methods can add a large number of identical elements to a simple page. Some things I have noticed about the test: 1. According to the numbers on the web site, using DOM was 10% slower than innerHTML on iPhone 3G. My own iPhone showed similar results 2. For the tested browsers other than IE, the speed difference is negligible Other factors to consider: 1. The logic to generate the elements or HTML on the client may well be far more complex and require more processing time than adding the elements to the document using either innerHTML or DOM 2. Adding to the innerHTML of an element that already has a large number of child nodes can be very much slower than appending the same number of nodes using DOM 3. There are much more efficient algorithms for generating large numbers of nodes than simply iterating n times for n nodes, making the time to generate a large number of identical nodes much shorter (but likely rendering will take the same time). 4. It is very rare that you want to just generate 1,000 or so identical nodes. Usually much more processing is required. 5. IE still can't modify the innerHTML of some elements (tr, tablebody) so additional processing is required for general innerHTML functions to cater for that. 6. Reading the innerHTML of an element can produce very different results in different browsers, great care must be taken if it is to be used for processing whereas requirements for DOM element attributes and properties are clearly specified (there are still some quirks in some browsers, but they probably are fewer and easier to deal with than those related to innerHTML). 7. DOM manipulation using innerHTML can be very much more complex than using DOM. 8. Servers can probably generate HTML just as quickly as they can generate say JSON that can be converted to DOM elements or HTML on the client, so sending prepared HTML to the client and using innerHTML might result in significantly faster overall times than JSON converted to DOM elements or HTML on the client. 8. The two methods can be combined - say using innerHTML to generate content of a temporary element, then use DOM to append it to the document. 9. Document parts can be progressively rendered (say 30 rows of a table at a time) making the speed difference irrelevant for the user. An example of 8 and 9 might be if you need to generate say 1000 rows for a table, you create the HTML for the first 30 rows, wrap it in table tags, then use DOM to create a div, insert the table as its innerHTML, then use DOM to append the table body to the table in the document. Repeat for all remaining rows. The user sees the first 30 rows pretty quickly, then at similar short intervals the other 970 rows appear, 30 rows (or maybe 50 or 100) at a time. So you need to carefully evaluate your requirements and use the most suitable method, it's not a simple case of one always being faster than the other and therefore should be used in all cases. -- Rob
-- You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
