search

wilsonpage / fastdom

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

Introduce FastDOM Strict Mode #70

Closed paulirish closed 8 years ago

paulirish commented 8 years ago

People have asked for this many times: "yell at me if I'm doing DOM work outside of these methods, so I don't accidentally regress things."

Previous efforts to enforce fastDOM phases:

This last implementation by @esprehn is particularly mature.

It can validate that reads and writes happen when they should and can optionally enforce neither read nor write happens outside of the predefined methods (by setting this to FORBIDDEN).

I think it would make a lot of sense to introduce the strict mode from fastdom.js (or maybe fastdom-full.js). (Of course: Elliot is happy to see his work folded into fastDOM.)

Caveats: Currently the implementation does require a slightly different API for classList and inline style, but if we're willing to accept 20ms of extra cost, it can preserve all the same APIs. The only downside is that elem.dataset isn't included; it's DOM got too magic, yo.

IMO, It would make sense as a development-only lint/strict mode, and isn't intended for production. (Browser support for this sort of thing will be very spotty).

All in all this feels pretty compelling. And would certainly make a big splash with 1.0. What do ya'll think?

wilsonpage commented 8 years ago

This looks like a really good idea!

I'm tempted to use @dglazkov's library as I could just install it as a sub-dependency. If I were to use @esprehn's then it would be more of a copy/paste job; but if that meant he could depend directly on fastdom in his project, that would be cool.

Overall I'm drawn to the simplicity of @dglazkov's library, but could be persuaded otherwise :)

paulirish commented 8 years ago

well, tbh in both cases, I am not sure we can reliably expect either repo to be maintained, the code will have to move into this project.

that said, elliott built off dimitri's original nope work, and essentially v2'd it in fx-framework.

wilsonpage commented 8 years ago

Questions:

  1. Does window.innerWidth trigger reflow? I'm pretty sure in Gecko it's free, in which case we don't need to spy on it.
  2. It seems with @esprehn's implementation we have to use element.style.set('foo', ...) instead of element.style.foo = .... Likewise for dataset. This breaks apps. I can't think of another way to wrap it without using Proxy, which isn't supported in Chrome.
  3. @esprehn's implementation has the concept of FORBIDDEN APIs. This seems a little out of scope for Fastdom; considering removing.
wilsonpage commented 8 years ago

Does window.innerWidth trigger reflow? I'm pretty sure in Gecko it's free, in which case we don't need to spy on it.

I forgot to mention that, in Gecko, this is not free when called inside nested window (iframe).

wilsonpage commented 8 years ago
  1. There are some differences in implementation details between Gecko and Blink for some APIs. For example window.innerWidth is a value in Blink, but a get function in Gecko. The Blink implementation requires more creative hacks in order to wrap.
wilsonpage commented 8 years ago

@paulirish I've landed strict-mode in v1-beta branch. Would love a sanity check before merging to master.

I still need to amend the readme to cover new concepts.

Cheers pal :)

wilsonpage commented 8 years ago

Landed in master f8760dd51f6d7c6573771ecdd39850f1f045f9c0

paulirish commented 8 years ago

this is epic. nice work with https://github.com/wilsonpage/strictdom !