mathieuancelin / js-repaint-perfs

Playground to test repaint rates of JS libs
http://mathieuancelin.github.io/js-repaint-perfs/
254 stars 111 forks source link

Add Morphdom #53

Closed whiteinge closed 8 years ago

whiteinge commented 8 years ago

PR rebased on latest.

whiteinge commented 8 years ago

cc @patrick-steele-idem

leeoniya commented 8 years ago

I'm not sure this implementation (or perhaps Morphdom itself) does anything to dispel the belief that the DOM is slow; if anything, it shows this to be exactly the case :\

patrick-steele-idem commented 8 years ago

tldr; in practice, the performance of morphdom will be great 99% of the time.

I'm seeing nearly identical performance compared to React which shows that the real DOM is not really slower than a virtual DOM solution such as React. Admittedly, when garbage collection kicks in there is definitely some lag for morphdom.

With that said, don't judge a library based on one benchmark... While the dbmon benchmark is interesting it is just one use case that is likely not representative of real world usage. Also, morphdom does much better when coupled with a view library that optimizes calls to morphdom. For example, morphdom provides hooks to avoid diffing/patching DOM subtrees (e.g., onBeforeUpdateEl). In practice, you wouldn't want to rerender the entire DOM (only the the DOM subtrees that actually changed). Marko Widgets is a UI components building library that uses morphdom to only update the parts of the DOM that may have changed (if the input state associated with a DOM subtree didn't change then that subtree is not rendered and not diffed/patched).

Other things to consider:

Every benchmark should be taken with a grain of salt ("There are Lies, Damned Lies and Benchmarks"). At eBay we have lots of teams using morphdom (paired with Marko Widgets) heavily for both mobile and desktop web development and it has worked really well.