Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More

Thursday, February 3, 2022

Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 99 is beta as of February 3, 2022. You can download the latest on Google.com for desktop or on Google Play Store on Android. Preparing for Chrome 100This year, Chrome will release version 100, adding a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduced a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called chrome://flags/#force-major-version-to-100 has been available since Chrome 96. For more information, see Force Chrome major version to 100 in the User-Agent string.CSS Cascade LayersCSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.Cascade layers allow authors to create layers to represent element defaults, third-party libraries, themes, components, overrides, etc.—and are able to re-order the cascade of layers in an explicit way. Without cascade layers, authors need to tweak, e.g., selector specificity, @import or source ordering to achieve a certain cascade ordering, which is cumbersome and error-prone.For more information, see Cascade layers are coming to your browser.New showPicker() Method on HTMLInputElement ObjectsThe new showPicker() method on HTMLInputElement allows web developers to programmatically show a browser picker for input elements (temporal, color, file, and those with suggestions like datalist or autofill). Date pickers on various systems

Developers have been asking for years for a way to programmatically open a browser date picker. Without it, they've had to rely on custom widget libraries and CSS hacks for specific browsers.This is currently possible in some browsers, for some controls, via the click() method. Unfortunately, that doesn't work in all browsers, making the experience inconsistent across systems and users. Providing showPicker() gives developers a supported alternative to click(), and aligns Chromium's click() behavior with the specification and other browsers in in the future. For more information, see Show a browser picker for date, time, color, and files.Origin TrialsThis version of Chrome introduces the origin trials described below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones described below, visit the Chrome Origin Trials dashboard. To learn more about origin trials in Chrome, visit the Origin Trials Guide for Web Developers. Microsoft Edge runs its own origin trials separate from Chrome. To learn more, see the Microsoft Edge Origin Trials Developer Console. New Origin TrialsDark Mode Support for Web AppsWeb app manifests now support the color_scheme_dark field for specifying a different theme color and background color for dark mode. Currently in the web app manifest, only a single theme color and background color can be defined. This means there is no way for apps to specify a different color to use for dark mode. Completed Origin TrialsThe following features, previously in a Chrome origin trial, are now enabled by default.Handwriting Recognition APIThis API lets web applications use handwriting recognition services that are available on operating systems to recognize hand-written text in real time. This reduces the need for third-party integration by apps that use handwriting recognition. For more information, see Recognize your users' handwriting.Window Controls Overlay for Installed Desktop Web AppsWindow controls overlay extends an app's client area to cover the entire window, including the title bar, and the window control buttons (close, maximize/restore, minimize). The web app developer is responsible for drawing and input-handling for the entire window except for the window controls overlay. Developers can use this feature to make their installed desktop web apps look like operating system apps. For more information, see Customize the window controls overlay of your PWA's title bar.Other Features in this ReleaseAllow infinity, -infinity and NaN in CSS calc()To improve conformance with the spec, the CSS calc() method now allows infinity and NaN using the 'infinity', '-infinity', and 'NaN' keywords or expressions that can be evaluated as such, for example: 'calc(1/0)'.CSS Color Adjust: 'only' Keyword for color-schemeNote: This feature was erroneously listed as shipping in Chrome 98. It actually shipped in Chrome 99.The only keyword, which has been re-added to the specification for color-scheme, is now supported in Chrome. It allows opting out of color-scheme for single, specific elements. For example, this allows overriding of force darkening. A few examples illustrate its use.div { color-scheme: light } This forces the div element out of color-scheme dark.div { color-scheme: only light } This keeps the color-scheme for the element light as above, and opts it out of forced darkening by the user agent.document.adoptedStyleSheets is Now MutableIn compliance with the spec, the document.adoptedStyleSheets property is now mutable, meaning operations such as push() and pop() work on it. The previous implementation of adoptedStyleSheets was unwieldy. For example, to add a sheet, the entire array had to be re-assigned:document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet]; With the new implementation, the same operation looks like this:document.adoptedStyleSheets.push(newSheet); Note: Previously, this feature was incorrectly listed as shipping in Chrome 98.Improve Alignment with Spec for Exposing nextHopProtocol Across Origin BoundariesThe PerformanceResourceTiming interface exposes the nextHopProtocol property to describe the underlying connection type used to fetch a resource. To follow the spec, Chrome is removing an old special case where cross-origin requests exposed potentially sensitive information, putting users at risk.New Canvas 2D FeaturesChrome has added several new attributes to the CanvasRenderingContext2D interface to conform to specs:

ContextLost and ContextRestored events

"willReadFrequently" option for canvases where lots of readback is expected

More CSS text modifier support

A reset() method

A roundRect draw primitive

Conic gradients

Better support for SVG filters

For more information, see It's always been you Canvas2D.Unprefixed text-emphasis PropertiesChrome 99 introduces unprefixed versions of text emphasis CSS properties, specifically: "text-emphasis", "text-emphasis-color", "text-emphasis-position", and "text-emphasis-style" CSS properties. These are unprefixed versions of "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-emphasis-position", and "-webkit-text-emphasis-style".Deprecations, and RemovalsThis version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of current deprecations and previous removals.Remove Battery Status API on Insecure OriginsBattery Status API is no longer supported on insecure origins, such as HTTP pages or HTTPS iframes embedded in HTTP pages. The Battery Status API allows web developers to access, among other things, a system's battery charging level and whether it is being charged. It is a powerful feature that has been around for over a decade and, as such, was originally designed with different security constraints.Remove font-family -webkit-standardThis version of Chrome removes support for the font-family value "-webkit-standard". This value is merely an alias for the proprietary keyword "-webkit-body" and is only exposed because it's inherited from WebKit. Removing this improves alignment with the CSS specifications and with Firefox.Remove GamepadListThe navigator.getGamepads() method now returns an array of Gamepad objects instead of a GamepadList. GamepadList is no longer supported in Chrome. This brings Chrome in line with spec and with Gecko and Webkit. For information on Gamepads generally, see Play the Chrome dino game with your gamepad.
Update WebCodecs to Match SpecChrome has removed two items because of recent changes in the WebCodecs spec..

The EncodedVideoChunkOutputCallback() method takes an EncodedVideoChunkMetadata dictionary. Previously a member called temporalLayerId was located at EncodedVideoChunkMetadata.temporalLayerId. In conformance with the spec, it is now located at EncodedVideoChunkMetadata.SvcOutputMetadata.temporalLayerId.

The spec requires that the VideoFrame() constructor include a timestamp argument (VideoFrameInit.timestamp) for CanvasImageSource types that don't implicitly have a timestamp (e.g. HTMLCanvasElement). Failing to include the timestamp should result in a TypeError, but Chrome previously defaulted the timestamp to zero. This seems helpful, but is problematic if you then send the VideoFrame to a VideoEncoder, where timestamps are used to guide bitrate control.

Chrome 98 Beta: Color Gradient Vector Fonts, Region Capture Origin Trial, and More

Monday, January 10, 2022

Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 98 is beta as of January 10, 2022. You can download the latest on Google.com for desktop or on Google Play Store on Android. COLRv1 Color Gradient Vector FontsIn this version Chrome supports COLRv1 color gradient vector fonts as an additional new font format. A color font contains glyphs with multiple colors in them, which can be for example an emoji or a country flag or a multi-colored letter. COLRv1 is an evolution of the COLRv0 font format intended to make color fonts widespread on the web. COLRv1 fonts bring expressive visual capabilities such as gradients, transforms and compositions at a very small font size. COLRv1 fonts also support OpenType variations. Internal shape reuse and a compact font format definition, plus effective compression, lead to very small font sizes. The image illustrates the example of Noto Color Emoji, which is about 9MB as a bitmap font, but only 1.85MB as a COLRv1 vector font (after WOFF2 compression).

Two national park emojis, one crisp, one blurry and a bar chart comparing binary size of Noto Emoji as Bitmap font and as COLRv1 font, about 9MB
vs. 1.85MB

Crisp COLRv1 vector font (left) compared to a bitmap font (right).
Noto Emoji font size as bitmap font vs. COLRv1 font after WOFF2 compression.

For more information, see COLRv1 Color Gradient Vector Fonts in Chrome 98.Preparing for a Three Digit Version NumberThis year, Chrome will release version 100, adding a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduced a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called chrome://flags/#force-major-version-to-100 has been available from Chrome 96 onward. For more information, see Force Chrome major version to 100 in the User-Agent string.Origin TrialsThis version of Chrome introduces the origin trials described below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones described below, visit the Chrome Origin Trials dashboard. To learn more about origin trials in Chrome, visit the Origin Trials Guide for Web Developers. Microsoft Edge runs its own origin trials separate from Chrome. To learn more, see the Microsoft Edge Origin Trials Developer Console. New Origin TrialRegion CaptureRegion Capture is an API for cropping a self-capture video track. Applications can currently obtain a capture of the tab in which they run using getDisplayMedia(), either with or without preferCurrentTab. In this case, the application may want to crop the resulting video track to remove some content from it (typically before sharing it remotely). Other Features in this ReleaseAdding auto Keyword for contain-intrinsic-sizeSupport for the auto keyword in contain-intrinsic-size is added, letting websites use the last-remembered size of an element (if any), which provides for a better user experience than for elements with content-visibility: auto. Without this feature, web developers have to guess the rendered size of the element; when used with content-visibility: auto, this may lead to elements jumping around.AudioContext.outputLatencyThe new AudioContext.outputLatency property is an estimate in seconds of audio output latency. Technically, this is the interval between the time the user agent requests the host system to buffer and the time at which the first sample in the buffer is processed by the audio output device. For devices such as speakers or headphones that produce an acoustic signal, this latter time refers to the time when a sample's sound is produced. This is already implemented in Firefox.CSS Color Adjust: 'only' Keyword for color-schemeThe only keyword, which has been re-added to the specification for color-scheme, is now supported in Chrome. It allows opting out of color-scheme for single, specific elements. For example, this allows overriding of force darkening. A few examples illustrate its use.
div { color-scheme: light } This forces the div element out of color-scheme dark.

div { color-scheme: only light } This keeps the color-scheme for the element light as above, and opts it out of forced darkening by the user agent.document.adoptedStyleSheets is Now MutableNote: This feature was incorrectly listed as shipping in Chrome 98. It actually shipped in Chrome 99.In compliance with the spec, the document.adoptedStyleSheets property is now mutable, meaning operations such as push() and pop() now work on it. The previous implementation of adoptedStyleSheets was unwieldy. For example, to add a sheet, the entire array had to be re-assigned:

document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet];

With the new implementation, the same operation looks like this:document.adoptedStyleSheets.push(newSheet); High Dynamic Range Color Media QueriesChrome now supports the CSS media queries 'dynamic-range' and 'video-dynamic-range' for detecting the current display device's support for HDR. Possible values are 'standard' and 'high'. These queries allow pages to toggle CSS rules or respond using Window.matchMedia().New window.open() Behavior for Popups, Tabs, and WindowsAs per a spec update, this version of Chrome lets you specify whether window.open() launches a new window or a new tab. The following examples show the new syntax. The first will open a pop up window. The second will open a new tab or window.

const popup = window.open('_blank','','popup=1');



const tab = window.open('_blank','','popup=0');

Additionally, window.statusbar.visible now correctly returns correct values: specifically, false for popups, and true for tabs, and windows.Private Network Access Preflight Requests for SubresourcesCORS preflight requests are now sent ahead of private network requests for subresources, asking for explicit permission from the target server. A private network request is any request from a public website to a private IP address or localhost, or from a private website (e.g. intranet) to localhost. Sending a preflight request mitigates the risk of cross-site request forgery attacks against private network devices such as routers, which are often not prepared to defend against this threat.structuredClone() Method on Windows and WorkersWindows and Workers now support the structuredClone() methods for making deep copies of objects. A deep copy is one that copies an object's properties, but invokes itself recursively when it finds a reference to another object, creating a copy of that object as well. This ensures that two pieces of code don't accidentally share an object and unknowingly manipulate each others' state. For an explanation of deep copies and how to use them, see Deep-copying in JavaScript using structuredClone.WebAuthn minPinLength ExtensionChrome now exposes the CTAP 2.1 minPinLength extension via Web Authentication. This allows sites preconfigured for a security key to learn the configured minimum PIN length for the authenticator. Window Controls Overlay for Installed Desktop Web AppsWhen the window controls overlay is enabled for installed desktop web apps, the app's client area is extended to cover the entire window—including the title bar area—and the window control buttons (close, maximize/restore, minimize) are overlaid on top of the client area. The web developer is responsible for drawing and input-handling for the entire window except for the window controls overlay. Developers can use this feature to make their installed desktop web apps look like OS apps.WritableStream controller AbortSignalWritableStreamDefaultController now supports a signal property which returns an instance of AbortSignal, allowing a WritableStream operation to be stopped if needed. The streams APIs provide ubiquitous, interoperable primitives for creating, composing, and consuming streams of data. This change permits an underlying sink to rapidly abort an ongoing write or close when requested by the writer. Previously, when writer.abort() was called, a long-running write would still have to continue to completion before the stream could be aborted. With this change, the write can be aborted immediately. In addition to being exposed to streams authored in JavaScript, this facility will also be used by platform-provided streams such as WebTransport.Deprecations, and RemovalsThis version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of current deprecations and previous removals.Remove SDES Key Exchange for WebRTC The SDES key exchange mechanism for WebRTC has been declared a MUST NOT in the relevant IETF standards since 2013. Its usage in Chrome has declined significantly over the last year. SDES is removed because it is a security problem. It exposes session keys to Javascript, which means that entities with access to the negotiation exchange, or with the ability to subvert the Javascript, can decrypt the media sent over the connection.

Chrome on Windows performance improvements and the journey of Native Window Occlusion

Thursday, December 9, 2021

Whether you prefer organizing your browser with tab groups, naming your windows, tab search, or another method, you have lots of features that help you get to the tabs you want. In this The Fast and the Curious post, we describe how we use what windows are visible to you to optimize Chrome, leading to 25.8% faster start up and 4.5% fewer crashes.

Background

For several years, to improve the user experience, Chrome has lowered the priority of background tabs[1]. For example, JavaScript is throttled in background tabs, and these tabs don’t render web content. This reduces CPU, GPU and memory usage, which leaves more memory, CPU and GPU for foreground tabs that the user actually sees. However, the logic was limited to tabs that weren't focused in their window, or windows that were minimized or otherwise moved offscreen.

Through experiments, we found that nearly 20% of Chrome windows are completely covered by other windows, i.e., occluded. If these occluded windows were treated like background tabs, our hypothesis was that we would see significant performance benefits. So, around three years ago, we started working on a project to track the occlusion state of each Chrome window in real time, and lower the priority of tabs in occluded windows. We called this project Native Window Occlusion, because we had to know about the location of native, non-Chrome windows on the user’s screen. (The location information is discarded immediately after it is used in the occlusion calculation.)

Calculating Native Window Occlusion

The Windows OS doesn’t provide a direct way to find out if a window is completely covered by other windows, so Chrome has to figure it out on its own. If we only had to worry about other Chrome windows, this would be simple because we know where Chrome windows are, but we have to consider all the non-Chrome windows a user might have open, and know about anything that happens that might change whether Chrome windows are occluded or not.

There are two main pieces to keeping track of which Chrome windows are occluded. The first is the occlusion calculation, which consists of iterating over the open windows on the desktop, in z-order (front to back) and seeing if the windows in front of a Chrome window completely cover it. The second piece is deciding when to do the occlusion calculation.

Calculating Occlusion

In theory, figuring out which windows are occluded is fairly simple. In practice, however, there are lots of complications, such as multi-monitor setups, virtual desktops, non-opaque windows, and even cloaked windows(!). This needs to be done with great care, because if we decide that a window is occluded when in fact it is visible to the user, then the area where the user expects to see web contents will be white. We also don’t want to block the UI thread while doing the occlusion calculation, because that could reduce the responsiveness of Chrome and degrade the user experience. So, we compute occlusion on a separate thread, as follows:

Ignore minimized windows, since they’re not visible.
Mark Chrome windows on a different virtual desktop as occluded.
Compute the virtual screen rectangle, which combines the display monitors. This is the unoccluded screen rectangle.
Iterate over the open windows on the desktop from front to back, ignoring invisible windows, transparent windows, floating windows (windows with style WS_EX_TOOLBAR), cloaked windows, windows on other virtual desktops, non-rectangular windows[2], etc. Ignoring these kinds of windows may cause some occluded windows to be considered visible (false negatives) but importantly it won’t lead to treating visible windows as occluded (false positives). For each window:

Subtract the window's area from the unoccluded screen rectangle.
If the window is a Chrome window, check if its area overlapped with the unoccluded area. If it didn’t, that means the Chrome window is completely covered by previous windows, so it is occluded.

Keep iterating until all Chrome windows are captured.
At this point, any Chrome window that we haven’t marked occluded is visible, and we’re done computing occlusion. Whew! Now we post a task to the UI thread to update the visibility of the Chrome windows.
This is all done without synchronization locks, so the occlusion calculation has minimal effect on the UI thread, e.g., it will not ever block the UI thread and degrade the user experience.

For more detailed implementation information, see the documentation.

Deciding When to Calculate Occlusion

We don’t want to continuously calculate occlusion because it would degrade the performance of Chrome, so we need to know when a window might become visible or occluded. Fortunately, Windows lets you track various system events, like windows moving or getting resized/maximized/minimized. The occlusion-calculation thread tells Windows that it wants to track those events, and when notified of an event, it examines the event to decide whether to do a new occlusion calculation. Because we may get several events in a very short time, we don’t calculate occlusion more than once every 16 milliseconds, which corresponds to the time a single frame is displayed, assuming a frame rate of 60 frames per second (fps).

Some of the events we listen for are windows getting activated or deactivated, windows moving or resizing, the user locking or unlocking the screen, turning off the monitor, etc. We don’t want to calculate occlusion more than necessary, but we don’t want to miss an event that causes a window to become visible, because if we do, the user will see a white area where their web contents should be. It’s a delicate balance[3].

The events we listen for are focused on whether a Chrome window is occluded. For example, moving the mouse generates a lot of events, and cursors generate an event for every blink, so we ignore events that aren’t for window objects. We also ignore events for most popup windows, so that tooltips getting shown doesn’t trigger an occlusion calculation.

The occlusion thread tells Windows that it wants to know about various Windows events. The UI thread tells Windows that it wants to know when there are major state changes, e.g., the monitor is powered off, or the user locks the screen.

Results

This feature was developed behind an experiment to measure its effect and rolled out to 100% of Chrome Windows users in October 2020 as part of the M86 release. Our metrics show significant performance benefits with the feature turned on:

8.5% to 25.8% faster startup
3.1% reduction in GPU memory usage
20.4% fewer renderer frames drawn overall
4.5% fewer clients experiencing renderer crashes
3.0% improvement in first input delay
6.7% improvement in first contentful paint and largest contentful paint

A reason for the startup and first-contentful-paint improvements is when Chrome restores two or more full-screen windows when starting up, one of the windows is likely to be occluded. Chrome will now skip much of the work for that window, thus saving resources for the more important foreground window.

Posted by David Bienvenu, Chrome Developer

Data source for all statistics: Real-world data anonymously aggregated from Chrome clients.[1] Note that certain tabs are exempt from having their priority lowered, e.g., tabs playing audio or video.[2] Non-rectangular windows complicate the calculations and were thought to be rare, but it turns out non-rectangular windows are common on Windows 7, due to some quirks of the default Windows 7 theme.[3] When this was initially launched, we quickly discovered that Citrix users were getting white windows whenever another user locked their screen, due to Windows sending us session changed notifications for sessions that were not the current session. For the details, look here.

Faster Chrome - Let The Compiler do the work

Wednesday, December 1, 2021

Chrome is fast, but there's always room for improvement. Often, that's achieved by carefully crafting the algorithms that make up Chrome. But there's a lot of Chrome, so why not let computers do at least some part of our work? In this installment of The Fast And the Curious, we'll show you several changes in how we build Chrome to achieve a 25.8% higher score on Speedometer on Windows and a 22.0% increase in browser responsiveness.

Why speed?

So why do we care about performance benchmarks? It's not a simple "higher numbers is better" chasing of achievements - performance was so important to Chrome that we embedded in our core principles, the "4Ss" - Speed, Security, Stability, Simplicity. And speed matters because we want a browser that responds quickly. Speed matters so much because we want to build a faster and more responsive browser. And by improving the speed of the browser, there's the additional benefit of maximizing battery use, so you don't have to charge your laptop/devices as often.

Speed? Size? Something Else?

Let's look at a typical optimization.

int foo();

int fiver(int num) {

for(int j = 0; j < 5; j++)

num = num + foo();

return num;

}

The compiler can either compile this as a loop (smaller), or turn it into five additions in a row (faster, but bigger)

You save the cost of checking the end of the loop and incrementing a variable every time through the loop. But in exchange, you now have many repeated calls to foo(). If foo() is called a lot, that is a lot of space.

And while speed matters a lot, we also care about binary size. (Yes, we see your memes!) And that tradeoff - exchanging speed for memory, and vice versa, holds for a lot of compiler optimizations.

So how do you decide if the cost is worth it? One good way is to optimize for speed in areas that are run often, because your speed wins accumulate each time you run a function. You could just guess at what you inline (your compiler can do this, it's called "a heuristic", it's an educated guess), and then measure speed and code size.

The result: Likely faster. Likely larger. Is that good?

Ask any engineer a question like that, and they will answer “It depends”. So, how do you get an answer?

The More You Know… (profiling & PGO)

The best way to make a decision is with data. We collect data based on what gets run a lot, and what gets run a little. We do that for several different scenarios, because our users do lots of different things with Chrome and want them to be fast.

Our goal is collecting performance data in various scenarios, and using that to guide the compiler. There are 3 steps needed:

Instrument for profiling
Run that instrumented executable in various scenarios
Use the resulting performance profile to guide the compiler.

But we can do more (ThinLTO)

That's a good start, but we can do better. Let's look at inlining - the compiler takes the code of a called function and inserts all of it at the callsite.

inline int foo() { return 3; };

int fiver_inline(int num) {

for(int j = 0; j < 5; j++)

num = num + foo();

return num;

}

When the compiler inlines foo(), it turns into

int fiver_inline(int num) {

for(int j = 0; j < 5; j++)

num = num + 3;

return num;

}

Not bad - saves us the function call and all the setup that goes with having a function. But the compiler can in fact even do better - because now all the information is in one place. The compiler can apply that knowledge and deduce that fiver_inline() adds the number three and does so 5 times - and so the entire code is boiled down to

return num + 15;

Which is awesome! But the compiler can only do this if the source code for foo() and the location where it is called are in the same source file - otherwise, the compiler does not know what to inline. (That's the fiver() example). A trivial way around that is to combine all the source files into one giant source file and compile and link that in one go.

There's just one downside - that approach needs to generate all of the machine code for Chrome, all the time. Change one line in one file, compile all of Chrome. And there's a lot of Chrome. It also effectively disables caching build results and so makes remote compilation much less useful. (And we rely a lot on remote compilation & caching so we can quickly build new versions of Chrome.)

So, back to the drawing board. The core insight is that each source file only needs to include a few functions - it doesn't need to see every single other file. All that's needed is "cleverly" mixing the right inline functions into the right source files.

Now we're back to compiling individual source files. Distributed/cached compilation works again, small changes don't cause a full rebuild, and since "ThinLTO" does just inline a few functions, and it is relatively little overhead.

Of course, the question of "which functions should ThinLTO inline?" still needs to be answered. And the answer is still "the ones that are small and called a lot". Hey, we know those already - from the profiles we generated for Profile Guided Optimization (PGO). Talk about lucky coincidences!

But wait, there's more! (Callgraph Sorting)

We've done a lot for inlined function calls. Is there anything we can do to speed up functions that haven't been inlined, too? Turns out there is.

One important factor is that the CPU doesn't fetch data byte by byte, but in chunks. And so, if we could ensure that a chunk of data doesn't just contain the function we need right now, but ideally also the ones that we'll need next, we could ensure that we have to go out and get chunks of data less often.

In other words, we want functions that are called right after the other to live next to each other in memory also ("code locality"). And we already know which functions are called close to each other - because we ran our profiling and stored performance profiles for PGO.

We can then use that information to ensure that the right functions are next to each other when we link.

I.e.

g.c

extern int f1();

extern int f2();

extern int f3();

int g() {

f1();

for(..) {

f3();

}

f1();

f2();

}

could be interpreted as "g() calls f3() a lot - so keep that one really close. f1() is called twice, so… somewhat close. And if we can squeeze in f2, even better". The calling sequence is a "call graph", and so this sorting process is called "call graph sorting".

Just changing the order of functions in memory might not sound like a lot, but it leads to ~3% performance improvement. And to know which functions calls which other ones a lot… yep. You guessed it. Our profiles from the PGO work pay off again.

One more thing.

It turns out that the compiler can make even more use of that profile data for PGO. (Not a surprise - once you know where the slow spots are, exactly, you can do a lot to improve!). To make use of that, and enable further improvements, LLVM has something called the "new pass manager". In a nutshell, it's a new way to run optimizations within LLVM, and it helps a lot with PGO. For much more detail, I'd suggest reading the LLVM blog post.

Turning that on leads to another ~3% performance increase, and ~9MB size reduction.

Why Now?

Good question. One part of that is that PGO & profiling unlock an entire new set of optimizations, as you've seen above. It makes sense to do that all in one go.

The other reason is our toolchain. We used to have a colorful mix of different technologies for compilers and linkers on different platforms.

And since this work requires changes to compilers and linkers, that would mean changing the build - and testing it - across 5 compilers and 4 linkers. But, thankfully, we've simplified our toolchain (Simplicity - another one of the 4S's!). To be able to do this, we worked with the LLVM community to make clang a great Windows compiler, in addition to partnering with the LLVM community to create new ELF (Linux), COFF (Windows), and Mach-O (macOS, iOS) linkers.

And suddenly, it's only a single toolchain to fix. (Almost. LTO for lld on MacOS is being worked on).

Sometimes, the best way to get more speed is not to change the code you wrote, but to change the way you build the software.

Posted by Rachel Blum, Engineering Director, Chrome Desktop
Data source for all statistics: Speedometer 2.0.

Simplified Storage Controls

Thursday, November 18, 2021

Posted by Theodore Olsauskas-WarrenAt Chrome, we’re always looking for ways to help users better understand and manage privacy on the web. Our most recent change provides more clarity on controlling site storage settings.

Starting today, we will be rolling out this change to M97 Beta, we will be re-configuring our Privacy and Security settings related to data a site can store (e.g. cookies). Users can now delete all data stored by an individual site by navigating to Settings > Privacy and Security > Site Settings > View permissions and data stored across files, where they’ll land on chrome://settings/content/all. We will be removing the more granular controls found when navigating to Settings > Privacy and Security > Cookies and other site data > See all cookies and site data at chrome://settings/siteData from Settings. This capability remains accessible for developers, the intended audience for this level of granularity, in DevTools.

OLD: We are removing this page. The controls for web-facing storage are now available at chrome://settings/content/all

NEW: Here, in chrome://settings/content/all, users will be able to delete web-facing storage.

Why the change?

We believe that simplifying the granular controls from Settings creates a clearer experience for users. By providing users the ability to delete individual cookies, they can accidentally change the implementation details of the site and potentially break their experience on that site, which can be difficult to predict. Even more capable users run the risk of compromising some of their privacy protection, by incorrectly assuming the purpose of a cookie.

We see this functionality being primarily used by developers, and therefore remain committed to provide them with the tools they need in DevTools. Developers can visit DevTools to continue to gain access to more technical detail on a per-cookie or per-storage level as needed.

Granular cookie controls remain available in DevTools.

As always, we welcome your feedback as we continue to build a more helpful Chrome. Our next step is working to remove this functionality from Page Info to keep all granular cookie controls in DevTools. If you have any other questions or comments on Storage Controls, please share them with us here.

Chrome 97: WebTransport, New Array Static Methods and More

Thursday, November 18, 2021

Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links. Chrome 97 is beta as of November 18, 2021.Preparing for a Three Digit Version NumberNext year, Chrome will release version 100. This will add a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduces a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called chrome://flags/#force-major-version-to-100 is available from Chrome 96 onward. For more information, see Force Chrome major version to 100 in the User-Agent string.Features in this ReleaseAuto-expand Details ElementsClosed details elements are now searchable and can now be linked to. These hidden elements will also automatically expand when find-in-page, ScrollToTextFragment, and element fragment navigation are used. Content-Security-Policy Delivery via Response Headers for Dedicated Workers.Dedicated workers are now governed by Content Security Policy. Previously, Chrome incorrectly applied the Content Security Policy of the owner document.CSSfont-synthesis PropertyThe font-synthesis CSS property controls whether user agents are allowed to synthesize oblique, bold, and small-caps font faces when a font family lacks oblique, bold, and small-caps faces, respectively. Without the font-synthesis property some web pages that do not have font families with the required variations may have unnatural forms of fontstransform: perspective(none)The perspective() function now supports the value 'none' as an argument. This causes the function to behave as though it were passed an argument that is infinite. This makes it easier (or, in some cases, possible) to do animations involving the perspective() function where one of the endpoints of the animation is the identity matrix.Feature Policy for Keyboard APIChrome supports a new keyboard-map value for the allow list of a feature policy. Keyboard.getLayoutMap() helps identify a key pressed key for different keyboard layouts such as English and French. This method is unavailable in iframe elements. The architecture of some web apps (Excel, Word, and PowerPoint) that could not use the Keyboard API can now do so.HTMLScriptElement.supports() MethodThe HTMLScriptElement.supports() method provides a unified way to detect new features that use script elements. Currently there is no simple way to know what kind of types can be used for the type attribute of HTMLScriptElement.Late Newline Normalization in Form SubmissionNewlines in form entries are now normalized the same as Gecko and WebKit, solving a long-standing interoperability problem where Gecko and WebKit normalized newlines late, while Chrome did them early. Starting in Chrome 97, early normalization is removed and late normalization is extended to all encoding types.Standardize Existing Client Hint NamingChrome 97 standardizes client hint names by prefixing them with Sec-CH-. Affected client hints are dpr, width, viewport-width, device-memory, rtt, downlink, and ect. Chrome will continue to support existing versions of these hints. Nevertheless, web developers should plan for their eventual deprecation and removal. WebTransportWebTransport is a protocol framework that enables clients constrained by the Web security model to communicate with a remote server using a secure multiplexed transport.Currently, Web application developers have two APIs for bidirectional communications with a remote server: WebSockets and RTCDataChannel. WebSockets are TCP-based, thus having all of the drawbacks of TCP (head of line blocking, lack of support for unreliable data transport) that make it a poor fit for latency-sensitive applications. RTCDataChannel is based on the Stream Control Transmission Protocol (SCTP), which does not have these drawbacks; however, it is designed to be used in a peer-to-peer context, which causes its use in client-server settings to be fairly low. WebTransport provides a client-server API that supports bidirectional transfer of both unreliable and reliable data, using UDP-like datagrams and cancellable streams. WebTransport calls are visible in the Network panel of DevTools and identified as such in the Type column. For more information, see Experimenting with WebTransport. JavaScriptThis version of Chrome incorporates version x.x of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.Array and TypedArray findLast() and findLastIndex()Array and TypedArray now support the findLast() and fileLastIndex() static methods. These functions are analogous to find() and findIndex() but search from the end of an array instead of the beginning.Deprecations and RemovalsThis version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of current deprecations and previous removals.Remove SDES Key Exchange for WebRTCThe SDES key exchange mechanism for WebRTC has been declared a MUST NOT in the relevant IETF standards since 2013. The SDES specification has been declared historic by the IETF. Its usage in Chrome has declined significantly over the recent year. Consequently it is removed as of Chrome 97.Remove WebSQL in Third-Party ContextsWebSQL in third-party contexts is now removed. The Web SQL Database standard was first proposed in April 2009 and abandoned in November 2010. Gecko never implemented this feature and WebKit deprecated it in 2019. The W3C encourages Web Storage and Indexed Database for those needing alternatives.Remove SDP Plan BThe Session Description Protocol (SDP) used to establish a session in WebRTC has been implemented with two different dialects in Chromium: Unified Plan and Plan B. Plan B is not cross-browser compatible and is hereby removed.

Partitioning Chrome's Code for Faster Launch Times on Android

Tuesday, November 16, 2021

Mobile devices are generally more resource constrained than laptops or desktops. Optimizing Chrome’s resource usage is critical to give mobile users a faster Chrome experience. As we’ve added features to Chrome on Android, the amount of Java code packaged in the app has continued to grow. In this The Fast and the Curious post we show how our team improved the speed and memory usage of Chrome on Android with Isolated Splits. With these improvements, Chrome on Android now uses 5-7% less memory, and starts and loads pages even faster than before.

The Problem

For Android apps (including Chrome on Android), compiled Java code is stored in .dex files. The user's experience in Chrome on Android is particularly sensitive to increases in .dex size due to its multi-process architecture. On Android, Chrome will generally have 3+ processes running at all times: the browser process, the GPU process, and one or more renderer processes. The vast majority of Chrome’s Java code is used only in the browser process, but the performance and memory cost of loading the code is paid by all processes.

Bundles and Feature Modules

Ideally, we would load the smallest chunk of Java necessary for a process to run. We can get close to this by using Android App Bundles and splitting code into feature modules. Feature modules allow splitting code, resources, and assets into distinct APKs installed alongside the base APK, either on-demand or during app install.

Now, it seems like we have exactly what we want: a feature module could be created for the browser process code, which could be loaded when needed. However, this is not how Android loads feature modules. By default, all installed feature modules are loaded on startup. For an app with a base module and three feature modules “a”, “b”, and “c”, this gives us an Android Context with a ClassLoader that looks something like this:

Having a small minimum set of installed modules that are all immediately loaded at startup is beneficial in some situations. For example, if an app has a large feature that is needed only for a subset of users, the app could avoid installing it entirely for users who don't need it. However, for more commonly used features, having to download a feature at runtime can introduce user friction -- for example, additional latency or challenges if mobile data is unavailable. Ideally we'd be able to have all of our standard modules installed ahead of time, but loaded only when they're actually needed.

Isolated Splits to the Rescue

A few days of spelunking in the Android source code led us to the android:isolatedSplits attribute. If this is set to “true”, each installed split APK will not be loaded during start-up, and instead must be loaded explicitly. This is exactly what we want to allow our processes to use less resources! The ClassLoader illustrated above now looks like this:

In Chrome’s case, the small amount of code needed in the renderer and GPU processes can be kept in the base module, and the browser code and other expensive features can be split into feature modules to be loaded when needed. Using this method, we were able to reduce the .dex size loaded in child processes by 75% to ~2.5MB, making them start faster and use less memory.

This architecture also enabled optimizations for the browser process. We were able to improve startup time by preloading the majority of the browser process code on a background thread while the Application initializes leading to a 7.6% faster load time. By the time an Activity or other component which needed the browser code was launched, it would already be loaded. By optimizing how features are allocated into feature modules, features can be loaded on-demand which saves the memory and loading cost until the feature is used.

Results

Since Chrome shipped with isolated splits in M89 we now have several months of data from the field, and are pleased to share significant improvements in memory usage, startup time, page load speed, and stability for all Chrome on Android users running Android Oreo or later:

Median total memory usage improved by 5.2%
Median renderer process memory usage improved by 7.9%
Median GPU process memory usage improved by 7.6%
Median browser process memory usage improved by 1.2%
95th percentile startup time improved by 7.6%
95th percentile page load speed improved by 2.3%
Large improvements in both browser crash rate and renderer hang rate

Posted by Clark Duvall, Chrome Software Engineer

Data source for all statistics: Real-world data anonymously aggregated from Chrome clients.

Chromium Blog

Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More

Chrome 98 Beta: Color Gradient Vector Fonts, Region Capture Origin Trial, and More

Chrome on Windows performance improvements and the journey of Native Window Occlusion

Faster Chrome - Let The Compiler do the work

Simplified Storage Controls

Chrome 97: WebTransport, New Array Static Methods and More

Partitioning Chrome's Code for Faster Launch Times on Android

Labels

Archive

Feed