1, an overview of the

GPU(Graphics Processing Unit), also known as Graphics processor, is known as the core component of the Graphics card, is the “heart” of the Graphics card.

The GPU is also capable of computing (computing power).

What are the functions and capabilities of the GPU?

GPU is designed for complex mathematical operations and geometric operations and the design of the chip, its use we usually known is used for graphics image processing (graphics card), but the actual use is not only so (relying on the GPU powerful computing capacity (how powerful will be discussed below) mining, machine learning algorithm).

2. CPU and GPU

As we know above, GPU can process complex computation, and its processing power is stronger than CPU’s. How strong is it? Here is a data to illustrate:

The current mainstream I7 processor has 1/12 of the floating point power of the mainstream Nvidia GPU processor.

Why the PROCESSING capacity of GPU is stronger than that of CPU, which needs to be analyzed from the logical structure.

Control is the controller, ALU is the arithmetic logic unit, Cache is the CPU internal Cache, and DRAM is the memory. From the above we can know the GPU to more space (transistor) is used as the execution unit, rather like CPU as the control unit for complex and cache (CPU need good support parallel and serial operation at the same time, strong commonality is needed to deal with a variety of different data types, and to support complex general logic judgment, This introduces a lot of branch and interrupt handling. All these make the internal structure of CPU extremely complex, and the proportion of computing units is reduced). In fact, 5% of the chip controls of CPU are ALU, while 40% are GPU (GPU is faced with highly unified and non-interdependent large-scale data and pure computing environment that does not need interruption. Therefore, GPU chips are much simpler than CPU chips), which is why Gpus are so powerful.

3. GPU acceleration

Above we compared the GPU and CPU of the differences in logical structure, from which we know from the GPU intensive logical processing units (high parallel structure), the GPU fit for parallel processing, high dense data when the CPU computing tasks, a moment can only process one data, there is no real sense of the parallel (in multicore cpus, True parallelism is possible. That is, in multi-threaded design, one part can be used to deal with the foreground tasks, and one part can be used to deal with the background tasks, so as to realize the true sense of parallelism. , and GPU has multiple processor cores, which can process multiple data in parallel at one time, realizing high parallelism in a true sense. In fact, the principle of GPU acceleration is to make use of the high parallel computing capability of GPU. For example, we use GPU in the front end to process composite layers (pixel intensive) for “acceleration”.

GPU adopts streaming parallel computing mode, which can carry out independent parallel computing for each data. The so-called “independent computing for data” means that the calculation of any element in a stream does not depend on other data of the same type. For example, the world position coordinates of a vertex are calculated independently of the positions of other vertices. The so-called “parallel computing” means that “multiple data can be used at the same time, and the time of multiple data parallel operation is the same as the time of one single data execution”.

4. Application of GPU acceleration in the front end

First we need to understand why GPU acceleration (hardware acceleration) is used (enabled), then we can discuss how and how to apply GPU acceleration.

4.1. Why should GPU acceleration be enabled?

Before answering this question, we can first look at two CSS animations (both of which apply frame Animation, but one does not have GPU acceleration enabled, and the other does).

Not on:

Open:

By comparing the two animations, the first animation runs stutter (not 60fps), while the second animation is perfect (not reflow, not always repaint when animation running) and runs smoothly.

So why turn on GPU acceleration, the answer is obvious, for experience, user experience!!

4.2. How to apply GPU acceleration in the front end

First let’s review the front-end page rendering process.

Take a look at the internal structure of the browser

As we saw in the first figure, the final rendering of the page requires a step that we usually don’t pay much attention to — draw. In fact, there is another step after Painting and before Display –Composite.

In the Painting phase, the engine’s Paint API (canvas calls Draw API) is called to calculate and draw pixel-level information. Pixel-level information is represented as frame information (layers). The browser will send the information of each layer to the GPU (GPU process: at most one, used for 3D drawing, etc.), and the GPU will composite each layer and display it on the screen. So what does Composite do?

To recap what Composite does: The DOM elements on a page are drawn on multiple layers. Once the drawing process is complete on each layer, the browser merges all layers into one layer in a reasonable order and displays them on the screen. This process is especially important for pages with overlapping elements, because if the layers are merged in the wrong order, the elements will display incorrectly.

Reflow is often said to be avoided, but there are three common rendering processes (Layout and Paint steps can be avoided) that occur in real scenes:

But what and why? This requires us to dig deeper into the browser (WebKit kernel) drawing work.

The concept of layer was mentioned above. First of all, what is the ghost of the lower layer?

As you can see from the image above (combined with the basic rendering process of the browser), the rendering tree is eventually converted into a Layer tree, and you can see from the image above that there are actually two types of layers in Chrome.

The RenderLayers render layer, which is responsible for corresponding DOM subtrees

GraphicsLayers graphics layer, which is responsible for the RenderLayers subtree.

In the DOM tree, each node corresponds to a LayoutObject. When their LayoutObject is in the same coordinate space, a RenderLayers will be formed, that is, the rendering layer. RenderLayers ensure that the page elements are composited in the correct order, resulting in a composite that handles the display of transparent and overlapping elements correctly.

Some particular render Layers are thought of as Compositing Layers, which have a separate GraphicsLayer, and other render Layers that are not Compositing Layers share one with their first parent that has a GraphicsLayer.

And each GraphicsLayer has a GraphicsContext, and the GraphicsContext prints the bitmap of that layer, and the bitmap is stored in shared memory and uploaded to the GPU as a texture. Finally, multiple bitmaps are synthesized by GPU and then displayed on the screen. Here, the existence of browser page rendering and rendering GPU is finally revealed. Combined with the computing capability of GPU for intensive data (such as image pixel level) mentioned above, We’ve also pretty much illustrated how GPU acceleration can be applied in the front end, giving elements that need to be animated (or where they are) a separate compositing layer.

Before answering the question of how to make a composite layer, let’s take a look at the advantages of the composite layer:

The bitmap of the composite layer will be synthesized by the GPU faster than the CPU

When repaint is required, only repaint itself is required and no other layers are affected

Layout and Paint are not triggered for Transform and opacity effects

Then we’ll look at how to make a composite layer and how to apply GPU acceleration (hardware acceleration) :

3D or Perspective Transform CSS properties

Elements that use accelerated video decoding have 3D

(WebGL) context or accelerated 2D context elements

Hybrid plug-ins (e.g. Flash)

Animates CSS on opacity or transforms an element using an animation on it

An element that has accelerated CSS filters

An element has a descendant node that contains a composite layer (in other words, an element has a child element that is in its own layer)

Element has a sibling element with a lower Z-index that contains a composite layer (in other words, the element is rendered above the composite layer)

The best way to improve the composition layer is to use the WILL-change property of CSS. Will-change can be set to opacity, transform, top, left, bottom, and right.

Matters needing attention:

After being promoted to the composition layer, the bitmap of the composition layer will be processed by the GPU, but please note that only the composition process (combining the bitmap output of the drawing context) requires the GPU, and the bitmap processing of the generation of the composition layer (the work of the drawing context) requires the CPU.

When you need to repaint, you can just repaint itself and not affect other layers, but there are style and layout before paint, which means that even though the composite layer only repaints itself, the style and layout themselves take up a lot of time.

While transform and opacity alone do not trigger layout and paint, other properties are undefined.

Finally, also talk about the shortcomings or easy to step on the pit (to learn to balance, learn to control) :

The composition layer takes up memory.

Layer of explosion, for some reason may lead to a large number of composite layer, not in expected despite the browser layer compression mechanism, but also has a lot of cannot be compressed, this layer of explosion phenomena may appear (simple understanding is that many don’t need to be upgraded to synthetic layer elements for some improper operation became the composite layer). To solve the problem of layer explosion, the best solution is to break the condition of overlap, that is to say, let other elements not overlap with the elements of composite layer. Simple and direct way: when using 3D hardware acceleration to improve animation performance, it is best to add a Z-index attribute to the element, artificial interference composition of the sorting, can effectively reduce the creation of unnecessary layers of composition, improve rendering performance, especially mobile optimization effect.

This article originally himself in Jane books written: www.jianshu.com/p/204443580… Subsequent articles will be migrated or written directly on nuggets.