wilsonpage / fastdom

Eliminates layout thrashing by batching DOM measurement and mutation tasks
6.83k stars 240 forks source link

Add a couple of great examples #6

Open wilsonpage opened 11 years ago

wilsonpage commented 11 years ago

Pick a couple of examples and link to them on gh-pages.

superplussed commented 10 years ago

+1. Love the library btw.

paulosborne commented 10 years ago

Backbone view render example would be appreciated :)

georgecrawford commented 10 years ago

Does anyone have any great examples of problematic Layout Thrashing in a real project, which Fastdom clearly helps to solve? If we could demonstrate a before/after along the lines of http://wilsonpage.github.io/fastdom/examples/animation.html with a real project, that would be an awesome introduction to how simple and powerful the library is.

cobbweb commented 10 years ago

A pattern I'm using (which I'm not sure it's a good idea), is nesting my writes inside my reads (to avoid variable scope issues). Any reason not to do this?

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

window.addEventListener('scroll', function() {
  fastdom.read(function() {
    var fooHeight = foo.offsetHeight;
    var barHeight = bar.offsetHeight;

    if (fooHeight > barHeight) {
      fastdom.write(function() { bar.style.height = fooHeight + 'px'; })
    }
  });
});

It seems to work without issues for me (no layout thrashing), not sure if theres other perf concerns? This could be a good pattern to include in the README?

serapath commented 9 years ago

i would also be interested in the answer to that question :-)

petersondrew commented 9 years ago

I added optional support for fastdom to nvd3. There are serious performance benefits to doing so (not as noticeable in chrome, but definitely in IE/FF). https://github.com/nvd3-community/nvd3/pull/8

Narretz commented 8 years ago

I have to say that the README / exampls doesn't do a a very thorough job in showing which DOM APIs profit from fastdom, as they only show reading / writing properties on DOM nodes, and not that fastdom can / should also be used when adding or removing elements. Maybe this can be added, too.

wilsonpage commented 8 years ago

@Narretz good point. Would you be able to submit an example(s) to merge?

souporserious commented 6 years ago

Just came across this library that I'd like to use in a constraints layout library I'm building, but I'm curious if there are any concerns about nesting calls, similar to what @cobbweb asked? Seems that it could be perf gain to not preform a write if it isn't necessary.

wilsonpage commented 6 years ago

@souporserious nesting calls is perfectly acceptable. You can see in these tests that we have all those cases covered. It's also handy to see the specced behaviour for each case.

souporserious commented 6 years ago

Awesome! Thank you for the quick reply 🙏 I read your article, and I'm really stoked to see if I get any perf gains in my layout calculations/rendering.

wilsonpage commented 6 years ago

Sweet! Let me know how it goes 👌

On Thu, Oct 26, 2017 at 3:02 PM, Travis Arnold notifications@github.com wrote:

Awesome! Thank you for the quick reply 🙏 I read your article, and I'm really stoked to see if I get any perf gains in my layout calculations/rendering.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wilsonpage/fastdom/issues/6#issuecomment-339676154, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-Sh2VuJ0xglHT-U8RdGa6BwKES6Po_ks5swJD8gaJpZM4A7_Ec .