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/ On Dec 25, 7:08 am, Andrew Hedges <[email protected]> wrote: > Hi Kevin, > > Yes, there are problems with my innerHTML versus DOM test. However, > using Array join() to concat the strings is actually much faster than > using += over and over again, so that's not one of them. The test > isn't perfect, but it has been my experience that creating a DOM > fragment and attaching nodes to it, then attaching the whole lot to > the DOM tree is, for all practical purposes, as fast as innerHTML. > Personally, I almost always use innerHTML these days for the sake of > convenience. > > Regards, > -Andrew > > On Dec 23, 11:22 pm, toriaezunama <[email protected]> wrote: > > > > > Having just read this > > http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html > > article and taking a look at the code from the original article I have > > feeling that the results are incorrect. > > > I had noticed when running the tests that although the DOM test with > > 1000 runs reported 87ms, the time from pressing the button to start > > the test and the results being shown was more in the order of 4 > > seconds. I think this article explains why. > > > Right now i don't have access to my iphone or mac so cannot verify any > > of this but thought this might be of interest > > Cheers > > > On Dec 22, 4:20 pm, Kelvin Wu <[email protected]> wrote: > > > > Sorry I must correct myself, I just took a look at its test code, the > > > innerhtml test code is in a unusual or extreme way, it pushes strings into > > > array, then join array. In fact, in the real world, innerHTML is moe often > > > used to concatenate a string by something like innerHTML += "xxx"; > > > re-write > > > the test code by this way, the result is much much faster than DOM. > > > > On 2009-12-23, Kelvin Wu <[email protected]> wrote: > > > > > thanks for the link, i tested it too, on nokia e71, which is webkit > > > > engine > > > > too, the innerhtml crashed nokia's browser... that completely > > > > overturned my > > > > previous thought. > > > > > On 2009-12-22, toriaezunama <[email protected]> wrote: > > > > >> This site has a benchmark comparing the use of innerHTML vs DOM > > > >> manipulation > > > >>http://andrew.hedges.name/experiments/innerhtml/ > > > > >> I got the following results on an iPodTouch > > > >> # of times time ms > > > >> innerHTML 10 32 > > > >> 100 2090 > > > >> 1000 Took too long to run > > > >> DOM 10 1 > > > >> 100 12 > > > >> 1000 87 > > > > >> Although the test isn't perfect - for example: every created div is > > > >> the same. Not a very real world situation - the results do prove > > > >> interesting. > > > > >> Hope this helps > > > > >> On Dec 22, 3:02 am, Kelvin Wu <[email protected]> wrote: > > > >> > Hi, > > > > >> > A little bit off tipoc, not related to iUI but I am thinking of the > > > >> question > > > >> > about Javascript performance, especially on mobile phone. > > > > >> > To write HTML code in your Javascript, you can write DOM directly > > > >> > such > > > >> as: > > > > >> > var cellTitle = document.createElement("td"); > > > >> > cell.className = "TableCell3"; > > > >> > var labelTitle = document.createElement("lable"); > > > >> > labelTitle.className = "LabelTitle"; > > > >> > labelTitle.innerHTML = title; > > > >> > cellTitle.appendChild(labelTitle); > > > >> > rowTitle.appendChild(cellTitle); > > > > >> > Or simply filling in innerHTML: > > > > >> > root.innerHTML += "<td class=TableCell3><lable class=LabelTitle>" + > > > >> title + > > > >> > "</lable></td>"; > > > > >> > The above two work exactly same. The first one looks more > > > >> > "professional" > > > >> > while I personally feel that the second one could be much faster and > > > >> less > > > >> > CPU usage (less battery consumption), when you have a complicated > > > >> > HTML > > > >> page, > > > >> > you may need to carefully write hundreds of lines for DOM objects or, > > > >> just > > > >> > copy and paste HTML code to innerHTML... > > > > >> > So my question is, is that true, using innerHTML is generally faster > > > >> than > > > >> > creating DOM? > > > > >> > -- > > > > >> > Sent from my mobile device. Ignore the typos unless they're funny. > > > > >> -- > > > > >> 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]<iphonewebdev%2bunsubscr...@google > > > >> groups.com> > > > >> . > > > >> For more options, visit this group at > > > >>http://groups.google.com/group/iphonewebdev?hl=en. > > > > > -- > > > > > Sent from my mobile device. Ignore the typos unless they're funny. > > > > -- > > > > Sent from my mobile device. Ignore the typos unless they're funny. -- 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.
