Android Chromium WebView Learn to start

Android offers webview based on the chromium implementation from 4.4. Previously WebView was based on WebKit implementations. WebKit provides basic functions such as Web page parsing, layout and plotting, and JS running. Chromium provides infrastructure for WebView process, threading, and rendering on a webkit basis. Therefore, WebView based on chromium provides a better way to provide web browsing capabilities. From the beginning of this article we started to learn about Android Chromium WebView.

Lao Luo's Sina Weibo: Http://weibo.com/shengyangluo, welcome attention!

Learning WebView is not just about how it embeds a browser in the application to display the Web page, but rather webview as a starting point to study how a modern browser is implemented. Just as learning about Android is not just about how its applications work, it's about how a modern mobile operating system is implemented as an entry point for Android.

Why choose a browser as the next research point?

This is because the browser is by far the most opportunity to become a cross-platform development of a technology, and the acceptance of it is very high, especially after the HTML5 standard.

Why cross-platform development?

This is because in modern and increasingly efficient societies, time is money. Specific to software development, mainly is the development of time costs. For mobile app development today, we typically develop two versions of Android and iOS at the same time. They are basically the same, but because they use a different development language and a running platform, they are developed separately. This will naturally increase development costs. Of course we can develop some basic libraries for Android and iOS two versions of apps to minimize development costs. The core features of these base libraries are developed using C/D + + and then encapsulate a set of Java interfaces and a set of objective-c interfaces for Android and iOS respectively. This does not, however, completely solve cross-platform issues, such as the UI and its associated logic, which can be difficult to achieve through a cross-platform base class library.

Why choose WebView based on the chromium implementation of the Android platform as a pointcut to study the browser?

The three keywords for this issue are Android, chromium, and WebView.

First look at the keyword chromium. If you have not heard of chromium, you should also have heard of Chrome browser. The Chrome browser's multi-process architecture and the ability to quickly open Web pages are quite stunning compared to other browsers, and it's based on chromium. Chromium is an open source Google-led browser project that Chrome will choose to develop and publish in one of its stable versions. In addition to the Chrome browser, Chrome OS was developed based on chromium. As a result, chromium is an open source project with a deep technical background, and its architecture is OS-level, otherwise Chrome OS will not be easy to build on.

Next look at the keyword WebView. The Android system, available from 4.4 and later versions, is based on chromium, just like chrome and Chrome OS WebView. That said, WebView, Chrome, and Chrome OS are all chromium customers, and the browser functionality provided by WebView is the simplest. So choosing WebView as the entry point can make us quickly grasp the browser technology involved in chromium. Last look at the keyword Android.

Last look at the keyword Android. Chromium is a cross-platform browser project that can be compiled and run on the current popular PC and mobile platforms. This also means that some of its module implementations are platform-related, such as rendering-related module implementations related to specific platforms. The Android system is familiar to us and has been studied for a few years, so it is the best choice.

What can I learn from browser technology?

The two core objects that a browser handles are HTML and JavaScript. The most important technique that HTML uses to implement Web UI is UI rendering technology. JavaScript is used to implement Web features that involve the most core technology of JavaScript engine technology.

All smart devices with a screen, the UI is a core module of the system they are running, it is responsible for interacting with the user and feedback the interaction results to the user, thus forming a closed loop. Users in the use of a system, the first contact is its UI, often contact with its UI, so the quality of the UI directly affects the user experience of the system is good or bad. The user experience is critical to a system, for example, where many people feel that the iOS system works better than the Android system.

One of the important criteria for measuring the user experience of a system is whether the UI is fluent or not, which is centered on the smoothness of the animation, because a smooth animation shows that the UI rendering speed required is 60fps. In order to achieve 60fps rendering speed, each system in the implementation of the UI module is a painstaking effort to do their best. Rendering strategies such as vertical layering and horizontal chunking are often used.

The so-called vertical layering, which is to divide the UI by layer in the z direction, provides the benefit of not having to redraw every layer of the UI when rendering each frame. This layered rendering strategy uses a UI rendering technique called drawing-compositing. That is, each layer is responsible for drawing its own UI, which is then synthesized by a separate module. This way, when each frame of the UI is rendered, only layers that have changed UI need to be redrawn, and layers without UI changes need to be part of the compositing step. This technique can greatly reduce rendering operations for a smoother UI experience.

The so-called horizontal chunking, which is for each layer of the UI, blocks it according to certain rules, and the benefit is that when each frame of the rendering UI encounters a layer that needs to be redrawn, it is not necessary to redraw all the contents of that layer, only the blocks in the visible interval. This can also reduce rendering operations to some extent to achieve a smoother UI experience.

Today's smart devices are equipped with CPUs that are multi-core. To be able to take full advantage of CPU multicore features, one frame of UI rendering usually takes two steps: The first step is to collect the UI drawing commands, and the second step is to execute the UI drawing commands. Each step is done on a separate thread, so you can take advantage of the multicore nature of the CPU: the UI drawing commands for frame n+1 are collected while the UI drawing commands for nth frames are executed. In addition, some additional optimizations can be made for the UI drawing commands that are collected in the first step. When we collect all the drawing commands for a frame of the UI, we are the equivalent of knowing the full picture of the frame UI. Once you know the full picture of a UI frame, you can do some optimizations, such as rearrange and merge some UI drawing commands, and discard the drawing commands that are related to the masked UI. These optimizations can also reduce rendering operations to achieve a smoother UI experience.

Today's smart devices, many of which are equipped with GPUs, mean that we can use the GPU to further improve the rendering speed of the UI, which is called hardware-accelerated rendering technology. For example, the UI layers and blocks we mentioned earlier can be drawn and synthesized directly from the GPU's textures or FBO. The GPU has a sophisticated and professional UI rendering technology, so it can be used to render the UI for a smoother UI experience.

All of the above mentioned UI rendering techniques, no matter what the system, we can more or less see their shadow, so they are universal, modern UI rendering technology. With these UI rendering techniques in mind, we can easily handle whatever system is in the future. Therefore, the 1th core technology that learning browser technology can get is modern advanced UI rendering technology.

I do not know whether the students have found that in recent years have seen a new programming language release, especially with the release of the new system, which is more famous for Google's go language and Apple's swift language. While we marvel at the ease of use of these programming languages, have you ever wondered how they were designed and implemented? If we consider this, we have to mention JavaScript, an old and popular programming language.

JavaScript is considered a "toy language", it is said that it took only 2 weeks to design, and then was used for 20 years. In the 20, everyone used it, and then scolded it. This is to show how much we like it, is called "Scold is Love, Fight is Pro". JavaScript is inherently designed to operate on Web pages, but it is not just applied to web-front-end applications, it also permeates mobile and server-side application development.

On the mobile side, in the last two or three years there have been many web-based OS specifically for mobile phones, such as the Firefox OS, Ubuntu mobile OS, Tizen OS, and Ali's Cloud OS, all supporting the running of Web applications, which means that JavaScript can be used to develop applications on these systems. Of course, Web apps can also be developed on Android and iOS, but they're all running on webview, not directly on the OS level. On the service side, node. JS is a representative framework that allows us to develop Web servers using JavaScript.

In addition to the mobile and service side, JavaScript is even used in the field of MCU (microcontroller Unit), which is commonly known as the microcontroller field. These MCUs provide a JavaScript runtime environment so that we can manipulate them using JavaScript.

A language that was designed to be used in web development, because of its simplicity and ease of use, now permeates not only mobile, server-side development, but also the MCU domain, which is enough to see that JavaScript is so widely accepted and used by developers. Of course, JavaScript is widely accepted and used by developers, and does not mean that it is perfect, such as performance is a more prominent problem. But will it be that one day later, when JavaScript's performance problem is solved, all the fields that can be programmed will be replaced by JavaScript?

Anyway, given the prevalence of JavaScript today, as a software developer, we not only use JavaScript, we also need to know how JavaScript works behind the scenes in order to reach a higher level. JavaScript is a dynamic language that, like the static languages of C + + and Java, involves compilation-related knowledge, such as parsing, generating syntax trees, generating bytecode instructions, generating local commands, and instruction optimization. Only for dynamic languages, these operations occur when the application is running, and for static languages, these operations occur before the application runs. In addition, the engine running JavaScript, like a virtual machine running Java bytecode, provides the memory auto-management technology at run time, that is, the GC is executed. This shows that learning JavaScript can get a lot of knowledge about compiling languages. This is also the 2nd core technology that learning browser technology can get.

When we are learning chromium-based browser technology, we can not only get the two core technologies mentioned above, but also learn the architecture of a complex system, such as its object management technology, multi-process architecture, multithreaded programming model and so on. In a word, learning browser technology can make us get a lot of computer technology that is popular now and even in the future.

What is the learning route for Android Chromium WebView?

We will learn the implementation of Android Chromium WebView by analyzing the Android 5.0 version of the Chromium_org project, and use a gradual learning approach, starting with some basic knowledge, such as the Chromium Smart pointer Technology , threading communication models, and process communication models, and then using scenarios to gradually analyze complex technologies. such as Web resource download, Web page layering, chunking, drawing, compositing and hardware accelerated rendering and other technologies.

This will be a challenging learning process, but if you can stick to it, the harvest is huge, because the knowledge we learn is likely to be the next technology Tuyere!

Android Chromium WebView Learn to start