Skip to content

Proof-of-concept, relative react IDs #1547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Proof-of-concept, relative react IDs #1547

wants to merge 1 commit into from

Conversation

syranide
Copy link
Contributor

cc @petehunt

I did a quick take on it to see what the outcome was, so here it is, each node only has a relative ID. Having to traverse up the tree to reconstruct the key is significantly expensive though (not surprisingly). The only two ways out of that is to cache the reconstructed key in each node traversed (ick) or to use an absolute ID at say custom component roots, which would significantly limit the depth.

Results: http://i.imgur.com/EzkzZkp.png

As you can see, two of the tests has taken a significant hit, presumably from ReactMount.getID becoming significantly more expensive due to having to reconstruct the ID. Expectedly though, the brute renderComponent test shows a significant ~11% improvement, presumably from the significantly shorter HTML generated.


Having run some basic performance tests on [mounting + unmounting], and [mounting + traversing + unmount], it doesn't seem like there's a significant cost to traverse all inserted nodes. Given that data-reactid actually seems to add a measurably significant cost during insertion into the DOM, I'm feeling confident that removing the data-reactid attribute and immediately traversing the DOM would compete in performance. It would also bring with it a bunch of other significant benefits; all DOM components already have a ref to its node, less DOM clutter, less bloat for server-rendered DOM, etc.

I'm not familiar enough with the core, but intuitively it seems like traversing the inserted DOM and renderedComponents in sync should be fairly straight-forward. Additionally, since we're traversing the DOM, rather than invent a react ID at all, it seems like it should be enough to just put a "hidden" reference directly to each DOM component in each node. You now have a super cheap DOM node <=> ReactDOMComponent. Additionally, we would no longer need to maintain the nodeCache either.

Perhaps there are technical issues standing in the way, but it would seem like the same information could also be used in DOMChildrenOperations to remove the dependency on _mountIndex, which would be a very good thing (but perhaps it's just wishful thinking).

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@syranide
Copy link
Contributor Author

Closing in favor of #1550.

@syranide syranide closed this May 18, 2014
@syranide syranide deleted the relid branch May 18, 2014 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants