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

Removes perf metrics for concurrent and blocking modes #10088

Merged
merged 2 commits into from Jan 14, 2020

Conversation

housseindjirdeh
Copy link
Collaborator

@housseindjirdeh housseindjirdeh commented Jan 14, 2020

Introducing concurrent (or blocking) mode changes how React hydrates on page load/navigations. This PR removes measures and marks that already present to measure hydration and render times to only fire if React is in legacy mode.

CC @spanicker

@ijjk
Copy link
Member

ijjk commented Jan 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall decrease ✓
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
buildDuration 14.6s 14.9s ⚠️ +301ms
nodeModulesSize 49 MB 49 MB -147 B
Client Bundles (main, webpack, commons)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.module.js gzip 4.18 kB 4.18 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes Overall increase ⚠️
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB ⚠️ +1 B
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.06 kB 3.06 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js
@@ -855,15 +855,14 @@
       var reactRoot = null
 
       function renderReactElement(reactEl, domEl) {
-        // mark start of hydrate/render
-        if (_utils.ST) {
-          performance.mark('beforeRender')
-        }
-
         if (false) {
-          var opts, callback
+          var opts
         } else {
-          // The check for `.hydrate` is there to support React alternatives like preact
+          // mark start of hydrate/render
+          if (_utils.ST) {
+            performance.mark('beforeRender')
+          } // The check for `.hydrate` is there to support React alternatives like preact
+
           if (isInitialRender) {
             _reactDom['default'].hydrate(reactEl, domEl, markHydrateComplete)
Diff for main-HASH.module.js
@@ -569,15 +569,14 @@
       var reactRoot = null
 
       function renderReactElement(reactEl, domEl) {
-        // mark start of hydrate/render
-        if (_utils.ST) {
-          performance.mark('beforeRender')
-        }
-
         if (false) {
-          var opts, callback
+          var opts
         } else {
-          // The check for `.hydrate` is there to support React alternatives like preact
+          // mark start of hydrate/render
+          if (_utils.ST) {
+            performance.mark('beforeRender')
+          } // The check for `.hydrate` is there to support React alternatives like preact
+
           if (isInitialRender) {
             _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete)
Diff for index.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -168,13 +168,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
buildDuration 15.4s 15.3s -167ms
nodeModulesSize 49 MB 49 MB -147 B
Client Bundles (main, webpack, commons)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.module.js gzip 4.18 kB 4.18 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_error.js gzip 77.8 kB 77.8 kB ⚠️ +1 B
hooks.html gzip 1.05 kB 1.05 kB ⚠️ +2 B
index.js gzip 78 kB 78 kB
link.js gzip 80.4 kB 80.4 kB ⚠️ +1 B
routerDirect.js gzip 78.1 kB 78.1 kB ⚠️ +2 B
withRouter.js gzip 78.1 kB 78.1 kB ⚠️ +2 B
Overall change 393 kB 393 kB ⚠️ +8 B

Commit: 2138cf6

Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

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

What effect does this have on all of the other locations that use beforeRender?

e.g.:

  performance.measure(
    'Next.js-route-change-to-render',
    navStartEntries[0].name,
    'beforeRender'
  )
  performance.measure('Next.js-render', 'beforeRender', 'afterRender')

@housseindjirdeh
Copy link
Collaborator Author

beforeRender is only referenced in the callbacks that fire after ReactDOM hydrates or renders (markHydrateComplete/markRenderComplete). I removed both these callbacks from firing during blocking or concurrent mode so there are no areas where it's being referenced and not instantiated.

@Timer Timer added this to the 9.2.0 milestone Jan 14, 2020
Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

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

Good call. Thanks!

@ijjk
Copy link
Member

ijjk commented Jan 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall decrease ✓
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
buildDuration 14s 13.8s -143ms
nodeModulesSize 49 MB 49 MB -147 B
Client Bundles (main, webpack, commons)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.module.js gzip 4.18 kB 4.18 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes Overall increase ⚠️
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB ⚠️ +1 B
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.06 kB 3.06 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js
@@ -855,15 +855,14 @@
       var reactRoot = null
 
       function renderReactElement(reactEl, domEl) {
-        // mark start of hydrate/render
-        if (_utils.ST) {
-          performance.mark('beforeRender')
-        }
-
         if (false) {
-          var opts, callback
+          var opts
         } else {
-          // The check for `.hydrate` is there to support React alternatives like preact
+          // mark start of hydrate/render
+          if (_utils.ST) {
+            performance.mark('beforeRender')
+          } // The check for `.hydrate` is there to support React alternatives like preact
+
           if (isInitialRender) {
             _reactDom['default'].hydrate(reactEl, domEl, markHydrateComplete)
Diff for main-HASH.module.js
@@ -569,15 +569,14 @@
       var reactRoot = null
 
       function renderReactElement(reactEl, domEl) {
-        // mark start of hydrate/render
-        if (_utils.ST) {
-          performance.mark('beforeRender')
-        }
-
         if (false) {
-          var opts, callback
+          var opts
         } else {
-          // The check for `.hydrate` is there to support React alternatives like preact
+          // mark start of hydrate/render
+          if (_utils.ST) {
+            performance.mark('beforeRender')
+          } // The check for `.hydrate` is there to support React alternatives like preact
+
           if (isInitialRender) {
             _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete)
Diff for index.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -168,13 +168,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      href="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-24e04d939f54ee455844.js"
+      src="/_next/static/runtime/main-78b2a56dbccd45cda1d4.js"
       defer=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-c26b641603395ec31912.module.js"
+      src="/_next/static/runtime/main-ec225f89ff10c0da79a6.module.js"
       defer=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
buildDuration 14.5s 14.5s -30ms
nodeModulesSize 49 MB 49 MB -147 B
Client Bundles (main, webpack, commons)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
main-HASH.module.js gzip 4.18 kB 4.18 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary azukaru/next.js remove-hydration-measure-concurrent Change
_error.js gzip 77.8 kB 77.8 kB ⚠️ +1 B
hooks.html gzip 1.05 kB 1.05 kB ⚠️ +2 B
index.js gzip 78 kB 78 kB
link.js gzip 80.4 kB 80.4 kB ⚠️ +1 B
routerDirect.js gzip 78.1 kB 78.1 kB ⚠️ +2 B
withRouter.js gzip 78.1 kB 78.1 kB ⚠️ +2 B
Overall change 393 kB 393 kB ⚠️ +8 B

Commit: d8d6dc8

@Timer Timer merged commit 01699c6 into vercel:canary Jan 14, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants