Skip to content

Conversation

@acdlite
Copy link
Collaborator

@acdlite acdlite commented Nov 14, 2018

Scheduler uses a message event to schedule a callback that fires after paint. This happens on every frame until the queue is empty. An unfortunate consequence is that every other message event handler also gets called on every frame; even if they exit immediately, this adds up to significant per- frame overhead. Until there's a better way to insert work after paint, a workaround is to monkey-patch addEventListener so there's only a single listener that wraps all the other ones. When a message
event is fired, we check if the event is Scheduler event. If it is, we call Scheduler, and skip the other event handlers entirely. (We could also use this same wrapper to defer the priority of the message event handlers, though that's a more drastic a change.)

This is a bit hacky, though, and probably doesn't belong in this package. It can be implemented in a wrapper, though, if we expose both the message key used by Scheduler message events and the Scheduler message listener.

Scheduler uses a message event to schedule a callback that fires after
paint. This happens on every frame until the queue is empty. An
unfortunate consequence is that every other message event handler also
gets called on every frame; even if they exit immediately, this adds up
to significant per- frame overhead. Until there's a better way to insert
work after paint, a workaround is to monkey-patch `addEventListener` so
there's only a single listener that wraps all the other ones. When a
message event is fired, we check if the event is Scheduler event. If it
is, we call Scheduler, and skip the other event handlers entirely.

This is a bit hacky, though, and probably doesn't belong in this
package. It can be implemented in a wrapper, though, if we expose both
the message key used by Scheduler message events and the Scheduler
message listener.
@sizebot
Copy link

sizebot commented Nov 14, 2018

React: size: 0.0%, gzip: 🔺+0.1%

Details of bundled changes.

Comparing: d7fd679...ee9dad7

react

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react.development.js +0.9% +1.3% 95.93 KB 96.81 KB 25.21 KB 25.53 KB UMD_DEV
react.production.min.js 0.0% 🔺+0.1% 11.54 KB 11.54 KB 4.58 KB 4.59 KB UMD_PROD
react.profiling.min.js 0.0% +0.1% 13.69 KB 13.7 KB 5.11 KB 5.11 KB UMD_PROFILING

scheduler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
scheduler.development.js +4.2% +5.8% 21.77 KB 22.69 KB 5.88 KB 6.21 KB NODE_DEV
scheduler.production.min.js 🔺+1.2% 🔺+0.8% 4.7 KB 4.76 KB 1.84 KB 1.86 KB NODE_PROD
Scheduler-dev.js +4.1% +5.7% 22 KB 22.92 KB 5.92 KB 6.26 KB FB_WWW_DEV
Scheduler-prod.js 0.0% -0.1% 13.18 KB 13.19 KB 2.88 KB 2.87 KB FB_WWW_PROD

Generated by 🚫 dangerJS

@acdlite
Copy link
Collaborator Author

acdlite commented Nov 14, 2018

@sebmarkbage thought of a better approach: use a MessageChannel. TIL!

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.

3 participants