How Bad is DOM Interaction Really?

#1

Post by andyshora » Sat, Aug 10, 2013, 5:10 PM UTC

How Bad is DOM Interaction Really?
andyshora.com

Re: How Bad is DOM Interaction Really?

#2

Post by pcunite » Sat, Aug 10, 2013, 6:16 PM UTC

After 10+ years as a performance leaning C++ desktop app developer I'm looking for any and all tips to make JavaScript (jQuery too) work in perceivably faster ways. I'm use to threading database calls, using message queues, and views updating themselves from caches. It’s a new world for me and feels somewhat like a step backwards.

Here I come html5!

Re: How Bad is DOM Interaction Really?

#3

Post by bkjelden » Sat, Aug 10, 2013, 6:25 PM UTC

Caching jQuery selectors may result in a speedup, but as with all caching systems I've run into nasty, hard to trace bugs that were the result of stale cached jQuery selectors.

So I'd add the caveat to caching jQuery selectors that standard premature optimization rules still apply.

Re: How Bad is DOM Interaction Really?

#4

Post by Semiapies » Sat, Aug 10, 2013, 6:36 PM UTC

These timings are all remarkably random, even with 10k repetitions.

Re: How Bad is DOM Interaction Really?

#5

Post by malandrew » Sat, Aug 10, 2013, 6:37 PM UTC

No discussion of repaint and reflow? You can't leave a discussion of those out when talking about the cost of DOM manipulation.

You absolutely can touch the DOM, but should do so through and interface that manages or eliminates repaint and reflow.

Re: How Bad is DOM Interaction Really?

#6

Post by TheAceOfHearts » Sat, Aug 10, 2013, 6:38 PM UTC

pcunite wrote: post #2

After 10+ years as a performance leaning C++ desktop app developer I'm looking for any and all tips to make JavaScript (jQuery too) work in perceivably faster ways. I'm use to threading database calls, using message queues, and views updating themselves from caches. It’s a new world for me and feels somewhat like a step backwards. Here I come html5!

The only thing that matters in most cases is that it's being done over 60FPS. Use Chrome Dev Tools and to monitor the framerate.

Re: How Bad is DOM Interaction Really?

#7

Post by oscilloscope » Sat, Aug 10, 2013, 6:39 PM UTC

pcunite wrote: post #2

After 10+ years as a performance leaning C++ desktop app developer I'm looking for any and all tips to make JavaScript (jQuery too) work in perceivably faster ways. I'm use to threading database calls, using message queues, and views updating themselves from caches. It’s a new world for me and feels somewhat like a step backwards. Here I come html5!

You can use queues when creating a large number of elements. Use requestAnimationFrame and each frame pop some elements off the queue to render them. This will help prevent the page from locking up during render events.

Re: How Bad is DOM Interaction Really?

#8

Post by hising » Sat, Aug 10, 2013, 6:50 PM UTC

pcunite wrote: post #2

After 10+ years as a performance leaning C++ desktop app developer I'm looking for any and all tips to make JavaScript (jQuery too) work in perceivably faster ways. I'm use to threading database calls, using message queues, and views updating themselves from caches. It’s a new world for me and feels somewhat like a step backwards. Here I come html5!

I guess knowledge like yours are important in making better tools and patterns available for JavaScript developers who haven't yet had the opportunity to work with those types of tools, patterns and languages you have. A big opportunity for people who come from more mature environments to share their knowledge!

Re: How Bad is DOM Interaction Really?

#9

Post by ghostdiver » Sat, Aug 10, 2013, 6:57 PM UTC

malandrew wrote: post #5

No discussion of repaint and reflow? You can't leave a discussion of those out when talking about the cost of DOM manipulation. You absolutely can touch the DOM, but should do so through and interface that manages or eliminates repaint and reflow.

I have same feeling,

Making single frame of JS code to run fast is cool and dandy, but eventually browser will have to make freeze and do reflow+repaint. Eventually it will make profiling harder, think about caching .offsetHeight etc. properties. It does decrease script execution time, but it does not make your app to work faster.

Re: How Bad is DOM Interaction Really?

#10

Post by ender7 » Sat, Aug 10, 2013, 6:58 PM UTC

The real hits to performance do not come from "I did X writes" or "I did Y reads", but rather from situations such as "I did X writes interleaved with Y reads, which caused Z reflows". Or "I needed to update a tiny part of the screen but triggered a full-page repaint". Or "I'm doing complex animation X, but am not triggering hardware acceleration."

Reflows are very expensive. So are repaints. Chrome dev tools will allow you to detect issues with both of those.