Improving input responsiveness in Microsoft Edge

Published by at

There's an interesting 'long form' article published over on the Windows blog, talking about the improvements made to EdgeHTML, the engine behind the Edge browser, specifically for the Creators Update (Redstone 2), now being enjoyed by a large fraction of the Windows 10 Mobile world (even Lumia 830s and 930s...!) The improvements mean that it's much harder for a badly behaved web page to take over the browser's UI - and the latter should now remain responsive, no matter what the page is up to!

From the Microsoft post:

As the web becomes more interactive, web pages are becoming increasingly reliant on JavaScript for core functionality, such as input, rendering, layout, and composition. As more and more of this core functionality moves to the client side, it becomes imperative for browsers to adopt smart scheduling mechanisms to ensure that JavaScript workloads are processed in an efficient manner.

With EdgeHTML 15 and the Windows 10 Creators Update, Microsoft Edge takes a big leap forward in how it schedules JavaScript work, leading to noticeable improvements in the usability, responsiveness, and performance of the modern web. In this post, we’ll share some behind-the-scenes details on how the EdgeHTML engine works, as well as the huge impact these improvements have had on making the browser feel faster and more responsive.

Timers: death by a thousand cuts

The web is surprisingly complex when it comes to task management. Rather than running one long JavaScript operation, most websites tend to execute a series of small-to-medium-sized operations that add up over time: event listeners, timeouts, Promises, and various other asynchronous tasks.

Even on a page that looks relatively quiet, below the surface there may be quite a lot of work going on. News and content sites that rely on advertisements, analytics trackers, and scroll listeners are often a good example of this. For instance, here’s a sample site illustrating some problems we often see on poorly optimized sites in the wild:

While this page is loading, and even well after it’s “settled,” there is still an enormous amount of work going on under the hood. A web page such as this one may make network requests for additional resources, or it may call setTimeout to queue a task for the next “tick” of the event loop. Each of these callbacks can then schedule other timeouts and network requests, starting the process anew. It’s the browser’s job to coordinate these tasks, and to ensure that they’re processed correctly along with event listeners, Promises, and any other work in accordance with the HTML5 event loop spec.

The post then goes into some detail to explain how the new EdgeHTML engine improves on the situation by deparating out user inputs and UI from the rendering of javascript resources. PC screens are used throughout to illustrate points, but I don't see why all of this shouldn't apply just as much to Edge on the phone, perhaps all the more so as more and more niche services drop back to 'the web' rather than having a dedicated (native) applications.

Anyway, if you were looking for one more reason to upgrade your phone (if possible) to the Creators Update then this is perhaps the nudge you needed.

Source / Credit: Microsoft