RenderingNG: an architecture that makes and keeps Chrome fast for the long term

RenderingNG: an architecture that makes and keeps Chrome fast for the long term
2021-10-07 04:18:26 Author: www.blogger.com(查看原文) 阅读量:40 收藏

tag:blogger.com,1999:blog-2471378914199150966.post-72087045238138334992021-10-06T12:37:00.000-07:002021-10-06T12:37:45.026-07:00RenderingNG: an architecture that makes and keeps Chrome fast for the long term<span id="docs-internal-guid-722b89c5-7fff-a5d2-eb88-8c3d186007ac"><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></p></span><span><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-vBVnY9lvnbc/YV3pQu1mr2I/AAAAAAAABq8/kYFJyBUjZv8RxcW4OYCMaE0NHOvDyy3uACLcBGAsYHQ/s1999/image5.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="830" data-original-width="1999" height="262" src="https://1.bp.blogspot.com/-vBVnY9lvnbc/YV3pQu1mr2I/AAAAAAAABq8/kYFJyBUjZv8RxcW4OYCMaE0NHOvDyy3uACLcBGAsYHQ/w629-h262/image5.png" width="629" /></a></div><span style="font-family: Arial; font-size: 11pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><p></p></span><br /><br /><i>Our continual investments in the performance of Chrome have led to significant improvements in battery life, memory, and the speed of the web. This post in <a href="https://blog.chromium.org/search/label/the%20fast%20and%20the%20curious">The Fast & the Curious series</a> highlights the rendering journey of Chrome over the past eight years, a journey that has led to a browser that is better across the board. For example, Chrome 94, as compared with Chrome 93:<br /></i><ul style="text-align: left;"><li><i>is up to 8% more responsive on real pages,</i></li><li><i>saves more than 1400 years of CPU time per day, and</i></li><li><i>improves battery life by up to 0.5%</i></li></ul><i>In addition, recent versions of Chrome are much better than those of years past with:<br /></i><ul style="text-align: left;"><li><i>150% or more faster graphics rendering, and</i></li><li><i>greater reliability, due to a 6x reduction in GPU driver crashes on problematic hardware</i></li></ul><h2 style="text-align: left;"><br /></h2><h1 style="text-align: left;"><b>Introduction</b></h1><a href="https://developer.chrome.com/blog/renderingng/">RenderingNG</a> is a long-term project to systematically improve Chrome performance as experienced by our users over time, while also anticipating future needs. This enables the web to stay fast even as the web becomes ever richer and more featureful.<span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-V4erpiIvyVg/YV3pw-oFidI/AAAAAAAABrE/TqRWDQQZalsDUV3RtviyYfSd2NtcjVmBACLcBGAsYHQ/s1080/image2.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1080" height="320" src="https://1.bp.blogspot.com/-V4erpiIvyVg/YV3pw-oFidI/AAAAAAAABrE/TqRWDQQZalsDUV3RtviyYfSd2NtcjVmBACLcBGAsYHQ/s320/image2.gif" width="320" /></a></div></span><br /><div style="text-align: center;"><a href="https://developer.chrome.com/blog/renderingng/">RenderingNG</a></div><br /><br />We began the journey more than 8 years ago, and I’m happy to report that in 2021, the core RenderingNG projects are <a href="https://developer.chrome.com/blog/renderingng/#key-projects-that-make-up-renderingng">coming to a conclusion</a>. This not only makes the existing web super fast, but even better, it means Chrome is ready for the next generation of web content.<br /><br />RenderingNG is comprised of three elements: performance, reliability and extensibility.<span><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-CmnzsM84-z4/YV3qZgPCo-I/AAAAAAAABrM/bHW8x5kZRrYSiTmNfgjYW2TD5xxllbrzwCLcBGAsYHQ/s1080/image1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1080" height="320" src="https://1.bp.blogspot.com/-CmnzsM84-z4/YV3qZgPCo-I/AAAAAAAABrM/bHW8x5kZRrYSiTmNfgjYW2TD5xxllbrzwCLcBGAsYHQ/s320/image1.jpg" width="320" /></a></div></span><div style="text-align: center;">The <a href="https://developer.chrome.com/blog/renderingng/#the-pyramid-of-success">pyramid of success</a></div><div><br /></div><div><br /></div><h1 style="text-align: left;"><b>Performance</b></h1>Let’s start with performance.<div><br /></div><div><h3 style="text-align: left;">GPU & multi-core</h3><div>A great way Chrome can render content faster is to take advantage of the multi-core CPUs and advanced GPUs present in today’s devices. Multi-core means we can do multiple kinds of work in parallel. For example, Chrome parallelizes running JavaScript, scrolling a web page, decoding an image or video, and rastering new content that will be on-screen soon. GPUs enable even more parallelization by <a href="https://en.wikipedia.org/wiki/Raster_graphics">rastering</a> every pixel on-screen, rather than one-at-a-time, yielding a large speedup.<br /><br />Earlier generations of browsers were not built to natively support these technologies, because at the time GPUs and multi-core computers were not widespread. It turned out that bolting on highly parallel features was extremely challenging, requiring the team to re-architect the entire Chrome rendering pipeline over time. This re-architecture is RenderingNG.</div><div><br /></div><div><br /><span><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-2OeIQEHWCHI/YV3qxDv5k0I/AAAAAAAABrU/iYULBToUDIoMW_Rj-LnOFf8uncmR3H-CACLcBGAsYHQ/s1078/image6.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1075" data-original-width="1078" height="319" src="https://1.bp.blogspot.com/-2OeIQEHWCHI/YV3qxDv5k0I/AAAAAAAABrU/iYULBToUDIoMW_Rj-LnOFf8uncmR3H-CACLcBGAsYHQ/s320/image6.gif" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div></span><br /><h3 style="text-align: left;">Scaling up and scaling down</h3>To avoid exhausting available resources and potentially diminishing the user experience of the web, browsers must be respectful of efficiency. They should not slow down your ability to interact with your computer or phone, or keep you from multitasking between the browser and other apps. Likewise, browsers also need to maximize battery life of your phone and laptop, and prevent the device itself from getting too hot (here’s looking at you, CPU cooling fans!). And finally, the browser must always be smooth and responsive to the user.<br /><br />This means that the browser needs to be able to scale up and down its use of the GPU and multi-threading to balance multitasking, battery, and device temperature. As one example of scaling up, it’s important that scrolling happen in parallel with JavaScript on all devices; otherwise the browser will have poor user responsiveness. On the other hand, there are times when the browser must scale down because battery life may be considered more important than maximum use of GPU and CPU resources to make rendering faster.<br /><br />It turns out to be challenging to be able to scale up and scale down seamlessly, and in a way that doesn’t break web content or make the browser unresponsive in key situations. RenderingNG applies novel technologies throughout the stack to make this work, including a complete rewrite of how compositing works, enabling the flexible use of GPU or CPU computations for arbitrary pieces of web pages, in order to pick the right fit for each web page and device.<br /><br /><h3 style="text-align: left;">Performance isolation</h3>The third key technique is performance isolation. Performance isolation is what allows you to have a nice experience reading your email while music and video is playing in the background: your computer and operating system (OS) architecture makes sure that they all share the CPU fairly and smoothly. (This feature has been around for native apps for so long, we just take it for granted, but <a href="https://en.wikipedia.org/wiki/Cooperative_multitasking">it wasn’t always that way</a>!)<br /><br />Browsers already have good isolation from other apps on your computer (thanks to the OS), but within a web page, it can be difficult to isolate all the pieces, such as iframes for ads and other embedded content, video and audio, animations, scrolling, JavaScript, and various other browser tasks. In earlier eras of the web, it was a huge achievement to simply make all these features work at all. Now the bar has been raised, and they need to fit together seamlessly in order to create a reliably fast user experience on the web.<br /><span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-u1LG67zjBaA/YV3rGjqx8FI/AAAAAAAABrc/a-4gjRcnbpIpdbqV0ExmJs54InDOhZnhwCLcBGAsYHQ/s1077/image4.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1076" data-original-width="1077" height="320" src="https://1.bp.blogspot.com/-u1LG67zjBaA/YV3rGjqx8FI/AAAAAAAABrc/a-4gjRcnbpIpdbqV0ExmJs54InDOhZnhwCLcBGAsYHQ/s320/image4.gif" width="320" /></a></div><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">RenderingNG’s architecture implements performance isolation for all of these features.</p></span><div><br /></div><h1 style="text-align: left;">Reliability</h1>Most of our work has been focused on <a href="https://developer.chrome.com/blog/renderingng/#reliability">reliability</a> of the user experience. This is especially true when rewriting the entire rendering stack of a web browser--a huge and potentially risky undertaking.<br /><br /></div><div>We did this with four key techniques:</div><div><ul style="text-align: left;"><li>Comprehensive testing, such as a huge battery of <a href="https://wpt.fyi/results/">Web Platform Tests</a>,</li><li>Measuring progress in reliability, through metrics that track performance & quality, and committed goals such as <a href="https://wpt.fyi/compat2021">Compat2021</a>,</li><li><a href="https://docs.google.com/document/d/1JOtp1LS7suqTjMuv41jQFc7aCTR33zJKPoGjKpvVFCA/edit">Listening to and acting on</a> bug reports and feedback,</li><li>Good <a href="https://developer.chrome.com/blog/renderingng-architecture/">software design patterns</a>.</li></ul></div><div><span><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-sgPbMKMmMXg/YV3rb4qCb0I/AAAAAAAABrg/GN7VcmOQUAgKBf68HJMT1yMSbTrO4CP5gCLcBGAsYHQ/s708/image3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="354" data-original-width="708" height="270" src="https://1.bp.blogspot.com/-sgPbMKMmMXg/YV3rb4qCb0I/AAAAAAAABrg/GN7VcmOQUAgKBf68HJMT1yMSbTrO4CP5gCLcBGAsYHQ/w541-h270/image3.png" width="541" /></a></div></span><div style="text-align: center;"><a href="https://web.dev/compat2021/">Compat2021</a> improvements <a href="https://wpt.fyi/compat2021">over time</a></div><br /></div><div><br /></div><div><h1 style="text-align: left;">Extensibility</h1>Finally, we always have one eye toward what web apps will need now and in the future to unlock better and better experiences for users. These apps are always pushing at the boundary of what is possible to do well on the web, and sometimes beyond. When they go beyond what current web APIs or architectures were designed for, the web app may still work, but it’ll sometimes be slower and more cumbersome to use---and more taxing on your computer than necessary. We are <a href="https://developer.chrome.com/blog/renderingng/#extensibility-the-right-tools-for-the-job">filling these gaps with new APIs</a> that allow web apps to continue doing all these things, but in a way that is much easier to implement performantly.<br /><br /><a href="https://developer.chrome.com/blog/renderingng/#extensibility-the-right-tools-for-the-job">Extensibility</a> has been part of the design of RenderingNG from the beginning, and is a big reason why the system is clean and <a href="https://developer.chrome.com/blog/renderingng-architecture/#rendering-pipeline-structure">modular</a>.<br /><br /><h1 style="text-align: left;">Results</h1></div><div>The <a href="https://developer.chrome.com/blog/renderingng/#key-projects-that-make-up-renderingng">first</a> RenderingNG performance optimization shipped in 2015. Below we’ve highlighted a few of the many subsequent performance improvements since then.</div><div><br /><h3 style="text-align: left;">CompositeAfterPaint: faster and more responsive on all pages [1]</h3>In the M94 release, we will ship <a href="https://developer.chrome.com/blog/renderingng/#compositeafterpaint">CompositeAfterPaint</a>, a new compositing subsystem that allows for arbitrary scaling up and down of GPU use for web app content. Even better, due to more efficient, purpose-built algorithms in this subsystem, CompositeAfterPaint will substantially improve:<br /><ul style="text-align: left;"><li>Scroll latency by up to 8%</li><li>Responsiveness by up to 3%</li><li>Peak rendering speed by up to 3%</li><li>GPU memory use by more than 3%</li><li>CPU time spent rendering and interacting with tabs, resulting in a savings of more than 1400 years of CPU time per day</li><li>Battery life by up to 0.5%</li></ul></div><div><h3 style="text-align: left;"><span style="font-size: medium;"><br /></span></h3><h3 style="text-align: left;">GPU Raster: dramatically faster than before [2]</h3>When it <a href="https://developer.chrome.com/blog/renderingng/#gpu-acceleration-everywhere">shipped</a> on Mac in 2016, GPU raster resulted in a 37% improvement on the overall MotionMark benchmark, and 150% on HTML categories. We subsequently brought similar wins to all other platforms and content types, concluding in 2020. In 2021 we shipped improvements focused on further GPU acceleration for 2D Canvas rendering, with up to a 1000% improvement in the Path rendering test, and a 130% improvement overall on the MotionMark 1.2 benchmark, as measured on an Apple M1 Mac.</div><div>  <br /><h3 style="text-align: left;">Out-of-process Raster: much-improved reliability [1]</h3>Out-of-process raster <a href="https://developer.chrome.com/blog/renderingng/#viz">shipped</a> on Android in 2018. This reduced the crash rate for problematic GPU drivers by 6x, bringing reliability in line with other drivers.</div><div><br /><h1 style="text-align: left;">Learn more</h1>If you’d like to learn more about RenderingNG, head over to the Chrome Developers Blog, where we are publishing a whole <a href="https://developer.chrome.com/tags/rendering/">series</a> about the project, with more to come over time.<br /><br />Thanks for reading!<br /><br /></div><div>Posted by Chris Harrelson, Lead Rendering Software Engineer<br /><br /><i>[1] Data source: <a href="https://www.google.com/chrome/privacy/whitepaper.html#usagestats">Real-world data</a> anonymously aggregated from Chrome clients.<br />[2] Data source: <a href="https://browserbench.org/MotionMark1.2/">MotionMark</a>.</i><span><br /></span></div></div>Chromium Bloghttps://www.blogger.com/profile/06394244468194711527[email protected]

文章来源: http://www.blogger.com/feeds/2471378914199150966/posts/default/7208704523813833499
如有侵权请联系:admin#unsafe.sh