Chromium Blog

Universal rendering with SwiftShader, now open source

Wednesday, June 29, 2016

SwiftShader is a software library for high-performance graphics rendering on the CPU. Google already uses this library in multiple products, including Chrome, Android development tools, and cloud services. Starting today, SwiftShader is fully open source, expanding its pool of potential applications.

Since 2009, Chrome has used SwiftShader to enable 3D rendering on systems that can’t fully support hardware-accelerated rendering. While 3D content like WebGL is written for a GPU, some users’ devices don’t have graphics hardware capable of executing this content. Others may have drivers with serious bugs which can make 3D rendering unreliable, or even impossible. Chrome uses SwiftShader on these systems in order to ensure 3D web content is available to all users.

Chrome running without SwiftShader on a machine with an inadequate GPU (left) cannot run the WebGL Globe experiment. The same machine with SwiftShader enabled (right) is able to fully render the content.

SwiftShader implements the same OpenGL ES graphics API used by Chrome and Android. Making SwiftShader open source will enable other browser vendors to support 3D content universally and move the web platform forward as a whole. In particular, unconditional WebGL support allows web developers to create more engaging content, such as casual games, educational apps, collaborative content creation software, product showcases, virtual tours, and more. SwiftShader also has applications in the cloud, enabling rendering on GPU-less systems.

To provide users with the best performance, SwiftShader uses several techniques to efficiently perform graphics calculations on the CPU. Dynamic code generation enables tailoring the code towards the tasks at hand at run-time, as opposed to the more common compile-time optimization. This complex approach is simplified through the use of Reactor, a custom C++ embedded language with an intuitive imperative syntax. SwiftShader also uses vector operations in SIMT fashion, together with multi-threading technology, to increase parallelism across the CPU’s available cores and vector units. This enables real-time rendering for uses such as app streaming on Android.

Developers can access the SwiftShader source code from its git repository. Sign up for the mailing list to stay up to date on the latest developments and collaborate with other SwiftShader developers from the open-source community.
Posted by Nicolas Capens, Software Engineer and Pixel Pirate

Chrome 52 Beta: CSS containment, simpler performance measurement, streamable responses from service workers, and more options for web push

Friday, June 10, 2016

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows. CSS Containment Rich, interactive experiences are a cornerstone of the web, but can sometimes take a long time to render due to their complexity. Currently, Chrome improves rendering performance by using heuristics to determine which parts of a page have changed. Only sections that have changed are updated instead of rendering the entire page 60 times per second. However, because elements can display outside the bounds of their parents, it is possible that changes to one element could affect elements anywhere else in the document. This dramatically increases the number of elements that Chrome must consider while rendering.
New in this release, the CSS contain property allows developers to prevent an element’s children from displaying outside of its bounds. When an element updates, this guarantee allows Chrome to ignore any element outside the parent node during rendering, leading to faster rendering times. Performance Observer Collecting accurate real-user measurement (RUM) data is critical to detecting performance problems and regressions that may hurt the user experience of a site. Chrome's DevTools allow local site testing, but measuring how a site performs for real users with varied devices can be challenging. The latest version of Chrome supports the PerformanceObserver API, which enables a simple and performant way to collect RUM data at runtime. Instead of polling for updates, sites can declare which metrics they’re interested in. The browser notifies the site when new data points for those metrics become available. Service Worker Responses Powered by ReadableStreams Streaming HTTP responses allow browsers to progressively render earlier portions of a large HTML document before the entire response is available. The latest version of Chrome improves service workers by adding streaming support. Sites can use the Streams API to construct streamable Response objects by passing a ReadableStream to the Response constructor. Offline Wikipedia client demonstrates the speed benefits of readable streams. Web Push Protocol and VAPID Support Push notifications have unlocked a new level of re-engagement for web apps, but until now developers have had to use proprietary push message delivery services and different APIs for different browsers. Chrome now supports VAPID, an open standard to authenticate a site’s server with a push service. When using VAPID, sites are given a Firebase Cloud Messaging endpoint, which supports the cross-browser web push protocol. Other features in this release

Chrome now pauses animations while showing modal dialog boxes.

HTTP alternative services allow sites to specify additional origins that can be used to reach a certain resource, enabling easier protocol upgrades and load balancing.

ImageBitmaps can be created more easily using ImageBitmapOptions to specify configurations on construction.

Sites can now free the memory consumed by an ImageBitmap using ImageBitmap.close().

Chrome now supports OpenType small capitals and easier styling of numbers using the font-variant-caps and font-variant-numeric properties.

Touch gestures inside a cross-origin iframe can no longer trigger popups unless they correspond to a tap gesture, preventing accidental pop-ups during scrolling.

Now only secure origins can create or delete secure cookies on Chrome for Android.

The latest version of Chrome supports -webkit-appearance:none which disables the default rendering of HTML5 meter elements and allows easier custom CSS styling.

The unsafe-dynamic Content Security Policy expression allows sites to use single-use or hash-based whitelists to verify script sources, making it easier to protect against cross-origin scripting attacks.

Sites can now use the Fetch API to programmatically set the referrer policy for a request.

CanvasRenderingContext2D now supports the filter attribute, allowing sites to apply effects to primitives drawn to the canvas.

Sites can now test whether or not a key exists within the bounds of an IDBKeyRange using IDBKeyRange.includes().

The HTMLMediaElement.srcObject attribute simplifies associating a MediaStream with a media element.

AudioParam now supports the read-only min and max attributes to simplify introspection.

RTCCertificates can now be stored in IndexedDB.

PannerNode and AudioListener now support automation methods, allowing smooth audio transitions.

Stylesheets can now specify alpha values for colors using eight- and four-bit hexadecimal values instead of the longer rgba() syntax.

Sites can now experiment with persistent storage as an origin trial, allowing a site to disable automatic storage clearing when bookmarked.

Multiple WebVTT tracks will now be presented as user options in the default media controls, enabling language selection for captions and subtitles.

postMessage overrides of the form postMessage(message,transferables,targetOrigin) have been deprecated.
The MediaStream ended event and the corresponding onended attribute have been deprecated.
The web app manifest icons entry no longer supports the density property.
The DynamicsCompressorNode.reduction attribute is now a readonly float instead of an AudioParam.
flexbox children with position:absolute will now be positioned using justify and align if the element does not have a left:, right:, top:, or bottom: position specified.
requestAutocomplete() has been deprecated and removed due to low usage numbers.
X-Frame-Option will no longer be supported in the meta tag to support a more secure implementation.
Invalid values for track-kind are now treated as metadata instead of subtitles to improve media behavior in older user agents.

Posted by Shubhie Panicker, Performance Powerhouse

The Mobile Web Is Open for Business

Thursday, May 19, 2016

Posted by Rahul Roy-chowdhury, VP Product Management, Chrome
One of the virtues of the web is its immense reach, providing access to information for all internet users regardless of device or platform. With the explosion of mobile devices, the web has had to evolve to deliver great experiences on the small screen. This journey began a few years ago, and I am excited to be able to say that the mobile web is open for business. Hear the recording from Google I/O where I discussed the state of the union and how to take advantage of new experiences like AMP and Progressive Web Apps (PWAs) to deliver a best-in-class mobile experience.

If you don’t have time to watch, here’s a quick recap of the four aspects to focus on while building a great mobile web experience:
Accelerate Expressiveness has always been a strength of the web, but sometimes that expressiveness can come at the cost of loading time or smooth scrolling. For example, event listeners allow developers to create custom scrolling effects for their website, but they can introduce jank when Chrome needs to wait for any touch handler to finish before scrolling a page. With the new passive event listener API, we've given control back to the developer, who can indicate whether they plan to handle the scroll or if Chrome can begin scrolling immediately.

Speed also goes beyond user experience gains. Studies have shown that 40% of users will leave a retail site if it takes longer than 3 seconds to load. To get a blazing fast web page in front of users immediately, we've introduced Accelerated Mobile Pages (AMP). With AMP, we have seen pages load 4x faster and use up to 10x less data. AMP is already seeing great adoption by developers, with more than 640,000 domains serving AMP pages.

Engage Progressive Web Apps (PWAs) let developers take advantage of new technologies to provide users with an engaging experience from the very first moment. Thanks to a new API called service worker, all the important parts of a web app can be cached so that it loads instantly the next time a user opens it. This caching also allows developers to continue to provide a fast and meaningful experience even when the user is offline or on an unreliable network. PWAs provide elements of polish too: an icon users can add to their home screen, a splash screen when they open it, and a full-screen experience with no address bar.
image 9.gif

JalanTikus Progressive Web App
Convert Logging in is a ubiquitous pattern on the web, but 92% of users abandon a task if they've forgotten their password. To alleviate this pain, Chrome's password manager enables more than 8-billion sign-ins per month, and we're expanding support with the Credential Management API. Using this API allows web apps to more closely integrate with the password manager and streamline the sign-in process.

Even once logged in, checkout can be a complicated process to complete. That's why we're also investing in capabilities such as the Web Payment API and enhanced autofill, assisting users by accurately filling in forms for them. We've found that forms are completed 25% more when autofill is available, increasing odds for conversion.

Retain Once the first interaction with a user is complete, re-engaging on the web can be tricky. Push notifications address this challenge on native apps, and now the push API is available on the web as well. This allows developers to reconnect with their users even if the browser isn't running. Over 10 billion push notifications are sent every day in Chrome, and it’s growing quickly. Jumia found that users who enabled push notifications opened those notifications 38% of the time and recovered carts 9x more often than other users.

Jumia Mobile Web Push Notifications

Success Stories As developers begin embracing these new technologies, we're seeing success stories from around the world. AliExpress, one of the world's largest e-commerce sites, built a PWA and saw conversion rates for new users increase by 104%. They've also found that users love the experience, spending 74% more time on their site per session.

Another great example is BaBe, an Indonesian news aggregator service that was app-only until they developed a PWA with feature parity to their native app. Since launching they have found it to perform even faster than their native app, and have seen comparable time spent per session: 3 minutes on average on both their mobile website and their native app.

Even developers who have only begun implementing certain PWA technologies have seen success. United eXtra, a leading retailer in Saudi Arabia, implemented push notifications and saw users who opted-in returned 4x more often. These returning users also spent 100% more than users returning from other channels.

These are just a handful of businesses that have begun reaping the benefits of investing in Progressive Web Apps. Learn more about our how partners are using PWA technologies to enhance their mobile web experience.
Screen Shot 2016-05-17 at 6.06.16 PM.png

Screen Shot 2016-05-17 at 6.06.16 PM.png

Subscribe to our YouTube channel to stay up to date with all the mobile web sessions from Google I/O, which we will continue to upload as they’re ready. Thanks for coming, thanks for watching, and most of all, thank you for developing for the web!

Chromium Blog

Universal rendering with SwiftShader, now open source

Chrome 52 Beta: CSS containment, simpler performance measurement, streamable responses from service workers, and more options for web push

The Mobile Web Is Open for Business

Labels

Archive

Feed