Introduce my work

My personal profile on LinkedIn is:

Roger at UC Mobile Ltd. (www.uc.cn), focus on graphics stack (rendering architecture) Research of WebKit based browser in Android platform, include the graphics stack of WebKit itself along with the display subsystem
Android platform, and design how to combine the best of both them to achieve butter graphics performance of page rendering.

Simply putFocus on the study of WebKit-based browser drawing stack on Android platformBut what is the so-called "WebKit-based browser drawing stack of Android platform"? I will illustrate it with an example below.

Let's look at the implementation of the simplest HTML5 canvas on the WebKit-based browser of the Android platform:

1. If the webpage contains the canvas tag or is dynamically generated by JavaScript, the WebKit kernel generates an htmlcanvaselement Node object;
2. When JS obtains a 2D context object from the Canvas Element (var ctx = canvas. getcontext ("2D"). In fact, this context JS object will be bound to a C ++ canvasrenderingcontext2d object, all JS calls on this context will be forwarded to the corresponding canvasrenderingcontext2d object by the virtual machine;
3. The 2D drawing in WebKit is based on graphicscontext. Therefore, the canvasrenderingcontext2d object requires a graphicscontext to perform a real 2D drawing operation. It sends a request to the htmlcanvaselement object through its drawingcontext () returns a graphicscontext;
4. Htmlcanvaselement forwards this request to the internal imagebuffer object. Therefore, the graphicscontext used for drawing is provided by imagebuffer;
5. Imagebuffer, as its name implies, is used to manage a bitmap cache. By default, it allocates a piece of memory and encapsulates the memory into a bitmap (skbitmap on Android ), then, use this bitmap to create a platform-related drawing context platformgraphicscontext (skcanvas and platformgraphicscontextskia on the Android platform). Finally, the platformgraphicscontext is encapsulated into a platform-independent graphicscontext and returned;
6. As we can see from the above, when JS draws the context object obtained through the canvas element, it is finally drawn to the memory managed by the imagebuffer object inside the htmlcanvaselement object;

The above only shows the draw path of the JS call itself. to finally see the result on the screen, we also need to draw the content in the imagebuffer to the window:

1. When JS executes every drawing operation on the context object, the corresponding htmlcanvaselement object will broadcast a notification of content change (canvaschanged );
2. This notification will be converted into a repainting request for a certain area of the webpage content;
3. The re-painting request of the webpage content will be intercepted by the adaptation layer of the WebKit kernel. On the Android platform, it is eventually converted to a repainting request (view. invalidate), the re-painting area needs to go through the coordinate transformation from the content Coordinate System of the webpage to the display Coordinate System of the view;
4. When a view of the current Android activity's view hierachy needs to be re-painted, Android will initiate a view hierachy traversal operation (viewrootimpl. dotraversal) at a certain time point later );
5. In this view hierachy traversal operation, Android generates a canvas object, and calls the ondraw method of the view one by one, so that the view can draw its own content to the current window through the canvas, this canvas object is actually obtained from the surface object corresponding to the current window, the surface object needs to extract an idle buffer from the graphics Buffer Queue in the current window (this buffer is allocated by the system Window mixer surfaceflinger), and then encapsulate this buffer into a skbitmap, then generate skcanvas Based on skbitmap, and then generate Java based on skcanvas
   Canvas...
6. When the ondraw method used to display the view object of a webpage is called by the Android system, it needs to retrieve the C ++ skcanvas object from the Java canvas object again, then, wrap the skcanvas into the graphicscontext object required by WebKit and send it to WebKit to draw a webpage. When WebKit draws a render object (renderhtmlcanvas) corresponding to the canvas element, renderhtmlcanvas will actually forward this painting request to its corresponding htmlcanvaselement object (the one mentioned above ), htmlcanvaselement draws its imagebuffer object to the current window through the input graphicscontext;
7. When Android traverses a complete view hierachy, all views are drawn to the current window through the input canvas, but we still cannot see the updated content on the screen, because we actually drew the back buffer of the current window, Android also needs to unlock the drawn back buffer and put it back into the graphics Buffer Queue of the window, it notifies the surfaceflinger window that the content has changed (surface. unlockandpost );
8. When surfaceflinger receives a window update notification, it will switch the front and back cache of the window (page flip), and copy the front buffer of the current visible window one by one to the system's framebuffer, in this way, we can finally see the result drawn by canvas on the screen (starting from Android 4.0, if the hardware supports it, We can omit the step of copying the front buffer of the window to the system framebuffer.
   Hardware is responsible for itself );

Is the above example complex? In fact, many less important parts have been omitted, and some complicated concepts have been simplified, such as the Native window and window compositing mechanisms of Android, And this is just the simplest implementation !!!

If we need to consider the following:

1. Supports multi-threaded rendering architectures like system browsers or multi-process rendering architectures like chrome;
2. Supports GPU-accelerated plotting for Android (supported since Android );
3. Supports accelerated compositing for WebKit );
4. Supports the hardware-accelerated 2D canvas implementation (accelerated 2D canvas );

Each of the above options will make the original process more complex, and these are my main work content ^_^