Home > News content

Learn about Google Chrome’s 10-year "acceleration" journey

via:开源中国     time:2018/9/22 10:03:57     readed:385

Multiple browser components dedicated to speeding up

V8 is a JavaScript and WebAssembly engine for Chrome. As the number of web scripts using JavaScript is growing rapidly, a high-speed engine capable of handling these JavaScript scripts becomes a very important foundation. Over the years, we have developed a V8New JavaScript execution pipeline, enabledIgnition(a new interpreter) and TurboFan (an optimized compiler). These initiatives have increased our performance on speed benchmarks by 5%-10%.Script streamingThis allows us to parse these JavaScript scripts in a background thread when the JavaScript script starts downloading, which can increase page load speed by up to 10%. Later joinedBackground compilation processReduce the compilation time of the main thread by up to 20%.

we are atOrinocoThe work on the project enabled concurrent garbage collection, freeing the main thread and reducing jank. Over time, we also turned to focus onActual JavaScript performance, this will help us to put React's runtime performanceDoubledIt also increases the performance of libraries such as Vue, Preact, and Angular by up to 40%. After the initial V8 submission went live, parallel, concurrent, incremental garbage collection was reduced to one percent of the garbage collected by jank. We also realizedWebAssembly,allowDevelopmentRun non-JavaScript code on the Web with predictable performance and enable it at the same timeLiftoff Baseline CompilerTo ensure a fast startup time for WASM applications. These new components areNearly ten yearsThe latest results to improve V8 performance, resulting in a performance improvement of more than 20 times.

The above image is a score of a series of released versions of Chrome on the V8 platform in recent years. The V8 platform is the predecessor of the old Octane benchmark. We use the V8 platform in this chart because unlike the Octane, the V8 platform runs on all Chrome versions, including the latest beta.

Chrome is usingSPDY,HTTP/2withQUICIt also plays a key role in assisting in the development of newer network protocols and transport layers. SPDY was used to address the limitations of HTTP/1.1 and became the basis for HTTP/2, which is now supported by all modern browsers. At the same time, the team actively performs iterations on QUICs designed to better improve latency and user experience, and behind QUIC, there is an active engineering task force (ITEF) working hard. The effect of QUIC is like YouTubevideowebsiteIt’s obvious that the user’s reported re-cache rate when watching videos with QUICReduced by 30%.

Next is Chrome'sRendering pipeline(rendering pipeline). This component is used to ensure that the page responds to the user while guaranteeing 60 frames per second. In order to display content at 60fps, Chrome mustRender each frame within 16 milliseconds. This includes the execution of JavaScript scripts, styles, cascading layouts, drawing, and pushing pixels to the user's screen. Within these 16 milliseconds, the less Chrome is used, the more time developers will have to give users a better experience. The implementation of our rendering pipeline coversoptimizationHow to identify the elements on the page that need to be redrawn and to better track the collection of visually non-overlapping elements. This process shortens the time it takes to draw a new frame image to the screen by up to 35%.

In 2015, the Chrome team came up with a name calledRAILUser-centric performance model. We have recentlyUpdated.

Regarding memory consumption, between 63 and 66 versions of Chrome, the memory usage of the renderer has increased by about 20% to 30%. We hope to continue exploring the RAIL-based build path with site isolation already in place. Use of Ignition and TurboFancut backThe overall memory footprint of the V8 engine reduces memory footprint by 5%-10% on all devices and platforms supported by V8. This year, some surveys found that 7% of the sites on the Internet were affected by memory leaks, and we have completely fixed these issues. The components used to speed up Chrome include DOM, CSS, and storage systems such as IndexedDB. If you want to learn more about our performance enhancements, you can keep an eye on the Chromium blog.

Give Web developers more ability to measure and optimize web pages

Knowing where to start improving your website can be a tedious process. To help, we explored several tools to understand what users feel.LabSignal andrealExperience. For many years,Chrome DevToolsThe Performance Panel is a visual way to visualize how web pages are displayed in a lab environment. In order to continue to reduce conflicts in search of websitesPossibility of performance improvement, we are committed toLighthouse-- A tool for analyzing the quality of your website, providing you with clear metrics for website performance and specific guidelines for improving the user experience. Lighthouse can be accessed directly from the DevTools Audits panel, from the command line, or with other development products (such asWebPageTest)integrated.

Lighthouse running in the Chrome DevTools Audits panel

To supplement the experimental data provided by Lighthouse, we releasedChrome User Experience ReportTo provide developers with something likeFirst content drawingwithFirst input delayData information about the real user experience of the product use population. Today, developers can generate their own personalized website performance reports while passingCrUX dashboardFocus on the processing progress of millions of sources.

We also introduced some Web platform features to help developers optimize their site loading performance. We use the resource prompt(Resource Hints)with<link ref=preload>Let developers tell the browser which key resources need to be loaded as soon as possible. Chrome was the first to implement support such asBrotli for compression,Small web font WOFF2withWebP for imagesOne of the browsers for the byte-saving scheme (byte-saving).

We are happy to see an increasing number of browsers supporting these features. Chrome is implementedService WorkersOffline cache and network resiliency are deprecated to support repeated access to web pages. We are also very happy to see that this feature has beenSupported by most modern browsers.

In fact, Google Search has preloaded Servier Workers and navigation (Navigation preload) is applied to the conditional cache for repeated searches. This doubles the time-consuming performance of page load for repeated access.

Looking to the future, we also have emerging standards such as lazy loading of native images and inline frames, such asAV1Such image formats are very exciting to provide content to users efficiently.

Enjoy the web better with Chrome in your data plan

In the past decade, the number of web pages has grown at an unprecedented rate, but many users are using the web for the first time, Internet traffic may be expensive for them, or the Internet is very slow. With this in mind, Chrome has introduced data-aware features like Data saver in recent years. Data saver intelligently optimizes web pages, saving up to 92% of Internet traffic consumption.

We are also exploring new ways to save data. For those with the slowest connection speed, we have developed Chrome on the Android platform that allows the Smart Web Optimizer to display the necessary content as early as possible. These page conversion loads are very fast compared to the entire page load, and we are constantly improving our accuracy, coverage and performance.

We are also trying to provide some support and assistance to users with limited data or network. For example, we've added a native lazy loading mechanism to Chrome and the option to stop users from stopping other requests from the page when using large amounts of data.

We are just getting started

In summary, these changes help developers and businesses deliver useful content to their users as quickly as possible. We know that there is still a lot of work to be done, and we will be doing more improvements and improvements on page load performance in the next decade.

China IT News APP

Download China IT News APP

Please rate this news

The average score will be displayed after you score.

Post comment

Do not see clearly? Click for a new code.

User comments