Browser-sync blocks thread when scrolling

[callumacrae]

Related: https://github.com/BrowserSync/browser-sync/issues/1203

browser-sync seems to phone home on every single scroll event, even when ghost mode is disabled. While this may seem like a useful feature for debugging scroll stuff on multiple devices at the same time, it actually does exactly the opposite: it blocks the thread for 5-10ms, lowering the FPS further on poorly performing apps (and making it super difficult to debug them!)

There seems to be no way to disable this, and so I can't use browser-sync when debugging scroll events.

Here's the code in question: https://github.com/BrowserSync/browser-sync-client/blob/master/lib/ghostmode.scroll.js#L25

Suggestions:

• [ ] When ghost mode is disabled, the event listener shouldn't be added
• [ ] Use requestIdleCallback where available.
• [ ] When requestIdleCallback isn't available, either debounce / throttle the scroll events, or use an interval so that it doesn't fire as often as the scroll event does (a lot).

Happy to contribute code fixes if you're happy with the approach. I don't know how to do the first one, though.

[callumacrae]

With browser-sync:

Without browser-sync:

[shakyShane]

@callumacrae Thanks for your investigations

When ghost mode is disabled, the event listener shouldn't be added

This was fixed in the last release

re: the second two point, I'm more than happy to get a PR for that. see https://github.com/BrowserSync/browser-sync-client/blob/master/lib/ghostmode.scroll.js

[callumacrae]

I'm running browser-sync start --server --files "*" --no-ghost-mode and browser-sync is still showing up in the timeline - am I disabling it correctly?

EDIT: I was out of date. whoops.