Facebook Inc.’s developer team says it worked with Google LLC to implement a new JavaScript application programming interface in the Chrome browser that can help website developers avoid the tradeoff between page load performance and input responsiveness.

In a blog post today, Facebook developers Nate Schloss and Andrew Comminos outlined the problem they’re trying to solve, and it’s one that most people who browse the web can relate to.

Most modern websites today use JavaScript to render their page content, but doing this forces developers to make a tradeoff between loading the content as fast as possible by doing it all at once, or by splitting that work up into segments. That means loading one small block of content at a time, pausing briefly to make that content responsive to input, such as a mouse click, before loading the next block.

“If the page is doing a lot of work while an input event is fired, the page won’t handle the click input event until after that work completes,” Schloss and Comminos said.

So website developers are forced to choose between faster overall load performance but slower input responsiveness, or better responsiveness and slower loading times.

Facebook set out to eliminate that tradeoff, creating what it calls the “isInputPending API” that can improve website responsiveness without yielding to the browser, which means stopping the page loading briefly to check and respond to any mouse clicks.

“Each time the page yields control back to the browser, it takes some time for the browser to check its input event queue, process events, and pick up the next JavaScript block. While the browser responds to events quicker, the overall loading time of the page gets slowed down. And if we yield too often, the page loads too slowly. If we yield less often, it takes longer for the browser to respond to user events, and people get frustrated. Not fun.”

The isInputPending API introduces a new approach to loading websites – what Facebook calls the “concept of interrupts for users inputs” — which essentially allows JavaScript to check for mouse clicks without interrupting the page as it’s being loaded.

Schloss and Comminos delve into the technical nitty-gritty of how the isInputPending API works in their blog post, but the most important thing that end users need to know is it works and it’s now available for developers to implement on their own websites.

“This is the first time that Facebook has built a new web API and taken it from idea incubation to standards proposal to actually shipping in a browser,” Schloss and Comminos said.

The isInputPending API is now shipping by default in the Chrome 87 release.

Image: stories/freepik