Skip to content
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

[Fiber] Performance measurements #9071

Merged
merged 42 commits into from
Mar 8, 2017
Merged

[Fiber] Performance measurements #9071

merged 42 commits into from
Mar 8, 2017

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Feb 27, 2017

Reconciliation phase:

screen shot 2017-03-08 at 3 10 52 am

Commit phase:

screen shot 2017-03-08 at 3 11 42 am

Should work with all Fiber features, including error boundaries and incremental deferred work.

Deferred work example:

screen shot 2017-03-08 at 3 13 15 am

  • Basic implementation
  • Don't display bailed fibers
  • Show deferred work sensibly
  • Include lifecycles
  • Naming and style
  • Always clear marks and measures
  • Replace stack with a field
  • Fix Flow
  • Gate by DEV
  • Host effects
  • Track cascading updates
  • Check the overhead and decide whether to always emit measurements or not
    • I tried my best
    • Gonna test it soon
  • Verify in different browsers
  • Write tests maybe? Or at least shim it in tests?
  • Verify edge cases work:
    • Nested subtrees
    • Error boundaries
    • Uncaught errors
  • What else?

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 8, 2017

@sebmarkbage @trueadm Ready for review.

package.json Outdated
@@ -107,7 +107,7 @@
"./scripts/jest/environment.js"
],
"setupTestFrameworkScriptFile": "./scripts/jest/test-framework-setup.js",
"testRegex": "/__tests__/",
"testRegex": "/__tests__/.*\\.js$",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes an issue that caused Jest to treat snapshot files as test suites. Also matches Jest docs.

@statianzo
Copy link

Great work @gaearon. Integration into the timeline will really help make sense of what's happening.

If this is going to be on by default, a way to disable it would be useful. I regularly use user timing for other purposes too.

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 8, 2017

Ideally it would be great if instead of exposing API to disable it, browsers just had a way to filter out measurements you're not interested in. Related: w3c/user-timing#24, w3c/charter-webperf#28.

cc @paulirish

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 8, 2017

React Native PR: facebook/react-native#12797

Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, but I'd add some dev blocks as per my comments to 100% make sure the code isn't shipped in prod

@@ -53,10 +60,22 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
getPublicInstance,
} = config;

function callComponentWillUnmountWithTimerInDev(current, instance) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this be stripped properly? Maybe it's best to also put it in a dev block?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be because Uglify will find no references to it. At least I think we've been doing this in many places and it worked before.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's cool. Would be good validate as this is something we can improve with flat bundling if it's not happening here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just checked, and it's stripped out. I'll gate by DEV for more explicitness.

stopCommitHostEffectsTimer,
startCommitLifeCyclesTimer,
stopCommitLifeCyclesTimer,
} = require('ReactDebugFiberPerf');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dev block for this require too?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's inside a DEV block (it's just a long one 😄 )

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah my bad :)

@gaearon
Copy link
Collaborator Author

gaearon commented Mar 8, 2017

This PR is already pretty long so I'm going to get this in and address any further comments on top.
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants