Big, Fatty CaveatsTo access these secret settings, simply enter chrome://flags into your address bar, aka the omnibox, which we've hacked a couple times over the last week to make a tab-based text editor and speed up our Gmailing. Not Canvas2D or WebGL), what does that term really mean? This article explains the basic model that underpins hardware accelerated rendering of web content in Chrome. When talking about a normal web page (i.e. Modern browsers have changed the way rendering works in recent years to take advantage of graphics cards: this is often vaguely referred to as “hardware acceleration”. Rendering is the often obscure process of turning this representation of a page into a picture on the screen. Systems like macOS are often neglected in terms of security training, as automatic updates and a hands-free expectation of administration is For most web developers the fundamental model of a web page is the DOM.The web platform and standards don’t codify this level of implementation detail, so there are no guarantees anything in this article will apply to other browsers, but knowledge of internals can nevertheless be useful for advanced debugging and performance tuning.Also, note that this entire article is discussing a core piece of Chrome’s rendering architecture that’s changing very fast. This article covers implementation details of Chrome, not web platform features. We intend to change the Sec-CH-UA-Platform value from Mac OS X to macOS.We’re talking about WebKit here, and more specifically we’re talking about the Chromium port of WebKit. It's okay.The API provides frame performance data, as experienced by the end user on.When trying to improve the performance of your own site it can be helpful to understand the layer model, but it’s also easy to shoot yourself in the foot: layers are useful constructs, but creating lots of them can introduce overhead throughout the graphics stack. On Mac and Linux only pages that need compositing for some of their content go down the accelerated path (see below for more on what would require compositing), but soon all pages will go down the accelerated path there, too.Lastly, we’re peeking under the hood of the rendering engine and looking at features of it that have a big impact on performance. As of this writing all pages go down the hardware accelerated path on Windows, ChromeOS, and Chrome for Android.
Speed Hacks Chrome Free Expectation OfI’ll just say “layer” from here on out to mean GraphicsLayer.Quick aside on GPU terminology: what’s a texture? Think of it as a bitmap image that’s moved from main memory (i.e. The latter is most interesting to us here, because GraphicsLayers are what get uploaded to the GPU as textures. The most important of these structures is a layer.In Chrome there are actually several different types of layers: RenderLayers, which are responsible for subtrees of the DOM, and GraphicsLayers, which are responsible for subtrees of RenderLayers. When rendering a page, however, the browser has a series of intermediate representations that aren’t directly exposed to developers. Media player for mac downloadThis is how 3D CSS works, and it’s also great for fast scrolling - but more on both of these later.Let’s look at a couple examples to illustrate the layer concept.A very useful tool when studying layers in Chrome is the “show composited layer borders” flag in the settings (i.e. Textures can be cheaply mapped to different positions and transformations by applying them to a really simple rectangular mesh. Once it’s on the GPU, you can map it to a mesh geometry - in video games or CAD programs, this technique is used to give skeletal 3D models “skin.” Chrome uses textures to get chunks of web page content onto the GPU. Figure 1: A single-layer page. These screenshots and examples are all taken from the latest Chrome Canary, Chrome 27 at the time of this writing. It very simply highlights where layers are on-screen. elements using accelerated video decoding 3D or perspective transform CSS properties Layer Creation CriteriaWhat else gets its own layer? Chrome’s heuristics here have evolved over time and continue to, but currently any of the following trigger layer creation: Figure 2: An element in its own layer ( open stand-alone)Screenshot of rotated layer's render bordersBy putting a 3D CSS property on the that rotates it, we can see what it looks like when an element gets its own layer: note the orange border, which outlines a layer in this view. They aren’t really important here. The blue grid represents tiles, which you can think of as sub-units of a layer that Chrome uses to upload parts of a large layer at a time to the GPU. If that content doesn’t change in the future, it doesn’t need to be repainted. In the basic case, Chrome paints the contents of a layer into a software bitmap before uploading it to the GPU as a texture. Figure 3: Animated Layers ( open stand-alone)As mentioned earlier, layers are really useful for moving around static web content. Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)We can move layers around, too, which makes them very useful for animation. Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer) Elements with CSS animation for their opacity or using an animated transform Figure 4: Repainting Layers ( open stand-alone)Document.getElementById('paint'). Screenshot of Dev Tools timeline during animation Invalid! RepaintingBut if the layer’s content changes, it has to be repainted.
0 Comments
Leave a Reply. |
AuthorJay ArchivesCategories |