Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a special thread for scrolling in a browser?

I'm writing a JavaScript tutorial for one of my classes and I wanted to illustrate that the call stack can block other processes and while this happens, page interactions are queued until the call stack is empty.

const print = function(){
	console.log( "Hello World" );
}
setTimeout(print,0);
for(let i=0 ; i < 2000000000 ; i++);
console.log();

After running the above code, I have them click links and resize the window to see that the page does not re-render, but scrolling seems to work fine on many websites like Stack Overflow. It is blocked on Reddit. I've tested this on both Chrome and Firefox to double check whether there was some optimization, but it behaved similarly.

I'm hypothesizing if a site does not have event handlers on scroll related events, that there's a special thread for basic scrolling. This is because I noticed sites with sticky headers would allow scrolling, but not have their sticky effect apply until after the loop finished.

like image 799
Ray Avatar asked Mar 04 '23 14:03

Ray


1 Answers

The Microsoft blog post by Nolan Lawson that I linked to below has a lot of good information regarding this exact question - give it a read. Here's a snippet from that blog post:

As it turns out, the whole “browsers are single-threaded” story is largely true, but there are important exceptions. Scrolling, in all its various flavors, is one of those exceptions.

Over the years, browser vendors have recognized that offloading work to background threads can yield enormous improvements to smoothness and responsiveness. Scrolling, being so important to the core user experience of every browser, was quickly identified as a ripe target for such optimizations. Nowadays, every major browser engine (Blink, EdgeHTML, Gecko, WebKit) supports off-main-thread scrolling to one degree or another (with Firefox being the most recent member of the club, as of Firefox 46).

Source: Scrolling on the web: A primer

like image 82
Tom O. Avatar answered Apr 02 '23 10:04

Tom O.