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

Add support for Chrome's ASync Stack Tagging API #404

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

davidtaylorhq
Copy link
Contributor

@davidtaylorhq davidtaylorhq commented Oct 10, 2022

https://developer.chrome.com/blog/devtools-modern-web-debugging/#linked-stack-traces

This enables the Chrome developer tools to link the stack traces of the original event scheduling and the eventual execution on the runloop. This is available in Chrome 106 and above.

To protect production performance, this is disabled-by-default, but can be enabled by setting Backburner.ASYNC_STACKS = true. Applications / frameworks could choose to enable this by default in development modes.


Given the example code:

let bb = new Backburner(['afterRender']);

function renderSomething(){
  debugger;
}

function simulateClick(){
  bb.schedule("afterRender", renderSomething);
}

bb.run(() => {
  simulateClick()
});

Stack Comparison

With backburner.js added to Chrome's 'framework ignore list', it looks like this:

Screenshot 2022-10-10 at 12 57 15


The result is somewhat similar to #340, but this new API allows us to implement async stacks without introducing any behaviour change.

When the flag is disabled, this commit does not have any measurable performance impact. Testing in the latest stable chrome (via #403) both before and after, I see 2.07 million op/s in the "Schedule & Flush - function" benchmark.

When the flag is enabled, there is some performance impact. In chrome, with dev tools closed, it makes the micro-benchmark about 60% slower (2,000k op/s → 870k op/s). With dev tools open, it makes the micro-benchmark about 93% slower (2,000k op/s → 138k op/s). Given that performance hit, we probably should not enable this flag by default in production.

Taking Discourse as a real-world example, an initial render of the application results in about 250 jobs being added to the runloop. So even in the worst case 'dev tools open' scenario, with a little maths based on the op/s, we're talking about a 1.7ms slowdown (0.1ms with flag disabled, 1.8ms with flag enabled). For us, that tiny slowdown in development would definitely be worth it for the improved developer experience. It may even make sense as a default for Ember when in Debug mode.

lib/index.ts Outdated Show resolved Hide resolved
https://developer.chrome.com/blog/devtools-modern-web-debugging/#linked-stack-traces

This enables the Chrome developer tools to link the stack traces of the original event scheduling and the eventual execution on the runloop. This is available in Chrome 106 and above.

To protect production performance, this is disabled-by-default, but can be enabled by setting `Backburner.ASYNC_STACKS = true`. Applications/frameworks could choose to enable this by default in development modes.
davidtaylorhq added a commit to discourse/discourse that referenced this pull request Oct 11, 2022
This version of backburner is patched to include
- Fix for scheduleOnce/cancel bug: BackburnerJS/backburner.js#402
- Async stack debugging in Chrome: BackburnerJS/backburner.js#404

The async debugging feature is enabled only in debug builds of Discourse to ensure production performance is unaffected.

Adding to `vendorFiles` causes the JS to be inserted directly after the `ember-source` bundle. That means that the `backburner` module defined by ember-source will be replaced with the patched version.
davidtaylorhq added a commit to discourse/discourse that referenced this pull request Oct 12, 2022
…18549)

This version of backburner is patched to include
- Fix for scheduleOnce/cancel bug: BackburnerJS/backburner.js#402
- Async stack debugging in Chrome: BackburnerJS/backburner.js#404

The async debugging feature is enabled only in debug builds of Discourse to ensure production performance is unaffected.

Adding to `vendorFiles` causes the JS to be inserted directly after the `ember-source` bundle. That means that the `backburner` module defined by ember-source will be replaced with the patched version.
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.

None yet

2 participants