WIP: Custom Attribute and Preferring Attribute Names over Properties Spike #10229

nhunzaker · 2017-07-20T01:12:20Z

Do not merge this PR.

This is a work in progress PR to investigate the outcome of aggressively removing entries in the attributes lists and moving over to preferring attribute names over properties. My goals are:

What startup improvements do we achieve from avoiding numeration over many properties
What edge cases might be exposed to library authors
What is the improvement in authoring experience
What is the easiest migration path, and what would it look like to support both property and attribute names (className and class)
What code can we eliminate beyond the whitelists that is built around them
Prevent event names from showing up on server-rendering

I'm probably missing a few more, but I thought it might be neat to track this progression on Github.

Performance improvements (still TBD)

There are two factors I see: startup time and attribute generation time.

This PR avoids enumerating over a big list of properties at startup, but that process is pretty fast. More time is actually spent enumerating over the event list in SimpleEventPlugin. I'm seeing DOM property injection take from 1.5 to 2 milliseconds. Cutting 2ms isn't huge, but I'll try to get some better numbers.

is the 1.5-2 ms property injection number accurate?
Without the custom attribute regexes and extra branches, is attribute assignment faster?

Build size differences

Even with manually listing out the properties that we need special behavior for, there's still some savings:

┌──────────────────────────────────────────────────┬───────────┬──────────────┬───────┬───────────┬──────────────┬───────┐
│ Bundle                                           │ Prev Size │ Current Size │ Diff  │ Prev Gzip │ Current Gzip │ Diff  │
├──────────────────────────────────────────────────┼───────────┼──────────────┼───────┼───────────┼──────────────┼───────┤
│ react-dom.production.min.js (NODE_PROD)          │ 116.05 KB │ 110.97 KB    │ -5 %  │ 36.9 KB   │ 34.82 KB     │ -6 %  │
├──────────────────────────────────────────────────┼───────────┼──────────────┼───────┼───────────┼──────────────┼───────┤
│ react-dom-server.production.min.js (NODE_PROD)   │ 20.72 KB  │ 14.65 KB     │ -30 % │ 7.84 KB   │ 5.6 KB       │ -29 % │
└──────────────────────────────────────────────────┴───────────┴──────────────┴───────┴───────────┴──────────────┴───────┘

ReactDOM his -6% gzipped. Pretty healthy cut. The server build drops by 30% in size, which isn't all that grand but fun to say at least 😄.

Improvement to authoring

TBD

Edge cases

TBD

Migration path for libraries

TBD

nhunzaker · 2017-07-20T01:13:08Z

scripts/fiber/tests-passing-except-dev.txt

@@ -1,2 +1 @@
-src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
-* gives source code refs for unknown prop warning for exact elements in composition (ssr)


Hey look, I fixed the final Fiber warning. 🙄

nhunzaker · 2017-07-20T01:18:00Z

scripts/fiber/tests-passing.txt

+* renders unknown attributes with server stream render
+* renders unknown attributes with clean client render
+* renders unknown attributes with client render on top of good server markup
+* renders unknown attributes with client render on top of bad server markup
 * renders unknown data- attributes with server string render
 * renders unknown data- attributes with server stream render
 * renders unknown data- attributes with clean client render


This file is misleading. I've skipped some tests related to the unknown attribute list and ARIA rules. I think we could enable these again by moving the attributes we eliminate from the whitelist over to the attribute warning hooks.

nhunzaker · 2017-07-20T01:20:38Z

src/renderers/dom/shared/HTMLDOMPropertyConfig.js

@@ -22,189 +22,48 @@ var HAS_OVERLOADED_BOOLEAN_VALUE =
  DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;

 var HTMLDOMPropertyConfig = {
-  isCustomAttribute: RegExp.prototype.test.bind(
-    new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$'),
-  ),


Curious about the performance difference with this gone.

nhunzaker · 2017-07-20T01:22:01Z

src/renderers/dom/shared/HTMLDOMPropertyConfig.js

-    security: 0,
-    // IE-only attribute that controls focus behavior
-    unselectable: 0,
+    value: 0,
  },


As small as this list is now: I can't help but wonder if we could manually write out the property info listings instead of enumerating over them on boot. In particular:

What does this look like post gzip?

How does this improve initial bootup?

jquense · 2017-07-20T15:50:49Z

An interesting side effect of this is you no longer get helpful errors about attributes being spelt wrong yeah? I've always quite enjoyed that react does that especially for weirdness like aria-labelledby It would be nice to maintain some of those helpful warnings behind a __DEV__ only build perhaps

nhunzaker · 2017-07-20T15:56:29Z

@jquense WIP! I think it would be great to maintain a manifest of all HTML attributes that we require inside __DEV__ for the unknown property hooks.

I've also pushed a new update:

I removed the HTML, SVG, and ARIA configs, consolidating all of their rules into the DOM Property config. This actually ends up saving some space post GZIP and avoids needing to enumerate over property configs at boot.
I've removed boolean checks for features like isNumeric and isBoolean in favor of object maps for properties that need those settings. This is another experiment to evaluate the performance trade off.

All in all, even if we manually specify all configuration options for every single attribute, the GZIP size ends up being rough the same (or a bit lower) than enumerating over individual lists.

acdlite · 2017-07-20T22:12:26Z

Please don't run the record-tests script. For... reasons.

nhunzaker · 2017-08-01T01:04:53Z

src/renderers/dom/shared/hooks/possibleStandardNames.js

+  xmlspace: 'xmlSpace',
+  ychannelselector: 'yChannelSelector',
+  zoomandpan: 'zoomAndPan'
+}


@jquense I think this should take care of attribute warning helpers. Though I'm going to work on ways to make this more concise :)

nhunzaker · 2017-08-01T23:05:02Z

Hmm. Server tests fail, I think, because we removed the event plugins from server rendering, so they don't know what attribute names are events. Now that there's no whitelist to stop onchange, it shows up as an attribute when producing server markup.

So this check is out of date:
https://github.com/facebook/react/blob/master/src/renderers/shared/server/ReactPartialRenderer.js#L275

@gaearon I think I'm getting those lovey warnings you just added. Would you consider this a separate bug? It looks like that condition is checking for no reason. I'll do some more digging and possibly file an issue

gaearon · 2017-08-02T00:07:31Z

Which warnings?

nhunzaker · 2017-08-02T01:13:31Z

@gaearon I'm possibly wrong, sorry for the noise if so:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
       (client) heckbox" checked="" data-reactroot="" da
       (server) heckbox" checked="" onchange="function (

Configures DOMPropertyOperations to allow all attributes to pass through. It maintains the whitelist only for attributes that need special behavior. - Lowercase props during static markup generation - Remove ARIA property config - Migrate over a few more SVG properties to the warning list - Migrate over rules for DOM Fiber. Update tests - Address test failure after rebase - Move event filter to top level condition in property loop - Handle newer fiber and server test updates - Add complete original whitelist to UnknownDOMPropertyHook - Use default warning count for SSR property warning tests - Prevent warnings for property names that are already correct - Add full SVG property list to ReactDOMUnknownPropertyHook Revert property lists, add custom attribute feature flag Turns out I had this backwards. This commit reverts the slash and burn of the property configs and replaces the custom attribute checks with a new predicate on DOMProperty that determines if an attribute may be written. - Properly control for custom attributes in ReactDOMFiberComponent

- Removes the entire ARIA config - Ignores ARIA tests - Ignores some missing attribute tests - Ignores DOM feature flag tests - Consolidate property configs. - Eliminate the need to enumerate over property lists - Simplify operations

nhunzaker · 2017-08-02T13:16:34Z

Build passes with minor modifications to the test suite for custom attributes. I'm happy with this as a proof of concept. Next I'll do some analysis (I've also updated the description with an outline and initial thoughts).

nhunzaker · 2017-08-02T13:19:46Z

@trueadm or @spicyj I want to evaluate possible performance improvements assigning/updating attributes. Is the benchmark conducted by yarn bench a good test case, or do you think it would be better to roll my own?

gaearon · 2017-08-02T13:50:50Z

yarn bench is a reasonable start.

nhunzaker · 2017-08-02T13:58:32Z

src/renderers/dom/shared/DOMProperty.js

+  // Do not assign reserved properties or functions. Event handlers should
+  // not exist in markup.
+  isWriteable(name, value) {
+    return !DOMProperty.isReservedProp(name) && typeof value !== 'function';


⚠️ ⚠️ ⚠️ This typeof value === 'function' prevents properties with a function value type from being written to markup. Chances are that this isn't great. I'm working through how we might better track allowed event handlers and omit them for server renders (this could probably be PR'ed separately to master if someone else doesn't get to it first)

facebook-github-bot added the CLA Signed label Jul 20, 2017

nhunzaker commented Jul 20, 2017

View reviewed changes

nhunzaker force-pushed the attribute-spike branch 2 times, most recently from 9b4f03d to 551bf47 Compare July 20, 2017 01:15

nhunzaker commented Jul 20, 2017

View reviewed changes

nhunzaker force-pushed the attribute-spike branch from 55dd067 to d7674b1 Compare July 20, 2017 12:21

nhunzaker force-pushed the attribute-spike branch 5 times, most recently from ac08795 to befc818 Compare August 1, 2017 01:00

nhunzaker commented Aug 1, 2017

View reviewed changes

nhunzaker mentioned this pull request Aug 1, 2017

Remove event namespace check from ReactPartialRenderer #10344

Merged

nhunzaker added 4 commits August 2, 2017 08:30

Add possible standard names as dev only map

413af4a

Update markup operations to handle events

af60ced

nhunzaker force-pushed the attribute-spike branch from befc818 to af60ced Compare August 2, 2017 12:33

nhunzaker added 3 commits August 2, 2017 08:37

Unskip server rendering aria tests

f11b84b

Bring back support for aria warnings

c6aeef6

Commit build size report

26f5772

Enable aria warnings for ReactPartialRenderer

0319d71

nhunzaker commented Aug 2, 2017

View reviewed changes

nhunzaker mentioned this pull request Aug 3, 2017

Allow custom attributes by default #7311

Closed

nhunzaker closed this Aug 8, 2017

gaearon mentioned this pull request Sep 8, 2017

Allow custom (nonstandard) attributes. #140

Closed

nhunzaker deleted the attribute-spike branch October 12, 2017 21:36

gaearon mentioned this pull request Jan 9, 2018

add srcObject for getUserMedia #9146

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Custom Attribute and Preferring Attribute Names over Properties Spike #10229

WIP: Custom Attribute and Preferring Attribute Names over Properties Spike #10229

nhunzaker commented Jul 20, 2017 •

edited

Loading

nhunzaker Jul 20, 2017

nhunzaker Jul 20, 2017

nhunzaker Jul 20, 2017

nhunzaker Jul 20, 2017

jquense commented Jul 20, 2017

nhunzaker commented Jul 20, 2017

acdlite commented Jul 20, 2017

nhunzaker Aug 1, 2017

nhunzaker commented Aug 1, 2017 •

edited

Loading

gaearon commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

gaearon commented Aug 2, 2017

nhunzaker Aug 2, 2017

		@@ -1,2 +1 @@
		src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
		* gives source code refs for unknown prop warning for exact elements in composition (ssr)

WIP: Custom Attribute and Preferring Attribute Names over Properties Spike #10229

WIP: Custom Attribute and Preferring Attribute Names over Properties Spike #10229

Conversation

nhunzaker commented Jul 20, 2017 • edited Loading

Performance improvements (still TBD)

Build size differences

Improvement to authoring

Edge cases

Migration path for libraries

nhunzaker Jul 20, 2017

Choose a reason for hiding this comment

nhunzaker Jul 20, 2017

Choose a reason for hiding this comment

nhunzaker Jul 20, 2017

Choose a reason for hiding this comment

nhunzaker Jul 20, 2017

Choose a reason for hiding this comment

jquense commented Jul 20, 2017

nhunzaker commented Jul 20, 2017

acdlite commented Jul 20, 2017

nhunzaker Aug 1, 2017

Choose a reason for hiding this comment

nhunzaker commented Aug 1, 2017 • edited Loading

gaearon commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

nhunzaker commented Aug 2, 2017

gaearon commented Aug 2, 2017

nhunzaker Aug 2, 2017

Choose a reason for hiding this comment

nhunzaker commented Jul 20, 2017 •

edited

Loading

nhunzaker commented Aug 1, 2017 •

edited

Loading