10 years of Speed in Chrome
Source:ofollow,noindex">10 years of Speed in Chrome from Chromium
* {line-height: 1.38 !important;white-space: initial !important; } ul {font-size: 11pt !important; } li {line-height: 1.38 !important; } img {margin-bottom: 0 !important; } i {text-align: center !important; }
Speed has been one of Chrome’sfour core principles , since it was first launched ten years ago. We’ve always wanted to enable web developers to provide users with fast, engaging web experiences. On Chrome’s 10th birthday, we thought it would be fun to look at what we’ve done to improve speed over the years and what we’re doing next.
Many components in the browser contribute to speed
V8 is Chrome’s JavaScript and WebAssembly engine. With web pages using an increasing amount of JavaScript, a fast engine to handle it is an important cornerstone. Over the years, we worked on anew JavaScript execution pipeline for V8, launchingIgnition (a new interpreter) andTurboFan (an optimizing compiler). These allowed us to improve performance on the Speedometer benchmark by 5-10%.Script streaming enabled us to parse JavaScript on a background thread as soon as it began downloading, improving page loads by up to 10%. We then addedbackground compilation reducing main-thread compile time by up to 20%.
Our work on projectOrinoco enabled concurrent garbage collection, freeing up the main thread and reducing jank. Over time, we also shifted to focusing onreal-world JavaScript performance , helping usdouble the performance of the React.js runtime and improve performance for libraries like Vue.js, Preact, and Angular up to 40%. Parallel, concurrent, and incremental garbage collection reduced garbage collection induced jank by 100× since the initial V8 commit. We also implementedWebAssembly , enabling developers to run non-JavaScript code on the web with predictable performance, and launched theLiftoff baseline compiler to ensure fast startup times of WASM apps.These new components are just the latest in a10-year effort that has improved V8’s performance release-to-release for an improvement of 20x over the years.
V8 Bench scores for a range of Chrome releases over the years. V8 Bench is the predecessor to the old Octane benchmark. We’ve used it for this chart because unlike Octane, it can run in all Chrome versions, including the initial Chrome Beta.
Chrome has also played a key role in helping evolve network protocols and transport layers throughSPDY ,HTTP/2 andQUIC . SPDY aimed to address limitations of HTTP/1.1 and became the foundation of HTTP/2 protocol, which is now supported by all modern browsers. In parallel, the team has been actively iterating on QUIC, which aims to further improve latency and user experience and now has an active IETF effort behind it. QUIC’s benefits are noticeable for video services like YouTube. Users reported30% fewer rebuffers when watching videos over QUIC.
Next up is Chrome’srendering pipeline . This is responsible for ensuring webpages are responsive to users and display at 60 frames per second (fps). To display content at 60fps, Chrome has16ms to render each frame . This includes JavaScript execution, style, layout, paint and pushing pixels to the user’s screen. Of this 16ms, the less Chrome uses, the more web developers have to delight their users. Improvements to our rendering pipeline have included optimizing how we identify which elements in a page need to be redrawn and better tracking visually non-overlapping sets. This reduced the time to paint new frames to the screen by up to 35%.
In 2015, a user-centric performance model calledRAIL was introduced by the Chrome team. We recentlyupdated it.
What about memory consumption? Between Chrome 63 and 66, a ~20-30% improvement in renderer process memory usage was observed. We hope to continue exploring ways to build on this now that site-isolation has landed. Ignition and TurboFanreduced V8’s overall memory footprint, slimming it down by 5-10% on all devices and platforms supported by V8. Some sleuthing this year also discovered memory leaks impacting 7% of sites on the web, which we’ve now fully fixed.Many components contribute to Chrome’s speed including the DOM, CSS and storage systems like IndexedDB. To learn more about our improvements to performance, continue keeping an eye on the Chromium Blog.
Give web developers more power to measure and optimize their web pages
Understanding where to start with improving your site can be a tedious process. To help, we explored several tools for understanding thelab signals andreal-world experience felt by your users. Over the years, theChrome DevTools Performance panel became a powerful way to visualize the play-by-play breakdown of how web pages were displayed in a lab setting. To continue lowering the friction for findingperformance opportunities sites had, we then worked onLighthouse – a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and specific guidance for improving your users’ experience. Lighthouse can be accessed directly from inside the DevTools Audits panel, run from the command-line, or integrated with other development products likeWebPageTest .
Lighthouse running in the Chrome DevTools Audits panel
To complement the lab data provided by Lighthouse, we released theChrome User Experience Report to help developers get access to field metrics for the experience their users feel in the real-world, such asFirst Contentful Paint andFirst Input Delay . Now, developers can build out their own custom site performance reports and track progress over millions of origins using theCrUX Dashboard .
We also introduced a number of Web Platform capabilities to help developers optimize the loading of their sites. We shippedResource Hints and <link rel=preload> to allow developers to inform the browser what resources are critical to load early on. Chrome was one of the first browsers to implement support for byte-saving approaches likeBrotli for compression ,WOFF2 for smaller web fonts andWebP support for images.
We’ve been excited to see an increasing number of browsers support these features over time. Chrome implementedService Workers , enabling offline caching & network resilience for repeat visits to pages. We’re delighted to see broad modernbrowser support for the feature.
In fact, Google Search now uses Service Worker andnavigation preload for opportunistic caching on repeat searches. This led to a 2x improvement in page load times for repeat visits.
As we look to the future, we are also excited about the potential that emerging standards like native lazy-loading for images & iframes, and image formats likeAV1 have to help deliver content to users efficiently.
Enjoy more of the web on your data-plan with Chrome
Over the last 10 years, the size of web pages has beenever-increasing , but for many users coming online for the first time, data can be prohibitively expensive or painfully slow. To help, Chrome released data-conscious features over the years like Chrome’s Data Saver. Data Saver intelligently optimizes pages, saving up to 92% on data consumption.
Going ahead, we are exploring new ways to help you save data. For users on the slowest connections, we’ve been working onChrome for Android , allowing for smarter page optimizations to show essential content earlier. These page transformations load far faster than the full page, and we’re continuing to improve our fidelity, coverage, and performance.
We’ve also been experimenting with putting guardrails in place for users who are data- or network- constrained. For example, we’re exploring bringingnative lazy-loading to Chrome, as well as providing users the option to stop additional requests from a page when it uses a lot of data.
We’re just getting started…
Together, these changes help developers and businesses deliver useful content to their users sooner. We know there’s still work to be done. Here’s to offering improvements to page load performance over another 10 years!
Posted by Addy Osmani, JavaScript Janitor
除非特別宣告，此文章內容採用知識共享署名 3.0 許可，程式碼示例採用Apache 2.0 許可。更多細節請檢視我們的服務條款 。