Microsoft’s new fix for Chromium’s scrolling & CPU usage on Windows

Microsoft Edge for Windows 10

Microsoft has been actively contributing to the open-source
Chromium that has replaced EdgeHTML in Microsoft Edge.
Microsoft plans to bring a lot of new capabilities and
improvements to the open-source platform, and it will benefit
all Chromium browsers including Chrome.

Microsoft is also
porting Edge-style smooth scrolling to Chromium and the
company has now proposed a new series of changes to further
enhance the experience.

As a two-year-old bug post
on Chromium noted, Chrome’s performance takes a hit when
scrolling on certain webpages with a large number of elements
set to the sticky or fixed position.

In theory, position: sticky allows an element to keep showing
on the screen throughout scrolling. For example, titles of
webpages or text in the menu that remain placed on the top of
the screen when you scroll.

A Chromium developer notes that tests revealed 13% CPU hikes on
Windows and CPU increases more than 100% upon scrolling with
trackpad and mouse wheel respectively.

The bug has been ignored for more than two years, but an
engineer from Microsoft Edge team has figured out a solution
and observed the following improvements:

  • Significant improvements in Blink.MainFrame.UpdateTime
    (~50%) around compositing lifecycle updating.
  • Significantly more main-thread frames were produced on my
    dev machine (857 to 1375).
  • Smoothness metric increased from 87% to 94%

Windows Performance Analyzer revealed ~22% main thread CPU-time
improvement. “This was for a manual scenario where I held down
the ‘down arrow’ key for ~60 seconds after page load,” wrote
Sam Fortiner, Principle Software Engineer at Microsoft.

A commit
with the following details has been marked active:

Enter assumed-overlap mode after encountering a fixed or
sticky element. This speeds up composited scrolling, because it
no longer has to re-do the overlap test on every frame.

New look of radio and checkbox

On Windows 10, Microsoft is also implementing a new look for
radio and checkbox on a webpage. According to a commit, this
change will allow the radio and checkbox to use Windows 10’s
accent color.

Chrome new check boxes

“This CL implements the new look of radio (accent color),
checkbox (accent color and indeterminate state), range (accent
color),” a commit reads.

i am as a writer and blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *