Android Chromium WebView learning startup, chromiumwebview

Android Chromium WebView learning startup, chromiumwebview

Android provides WebView Based on Chromium from 4.4. Previously, WebView was implemented based on WebKit. WebKit provides basic functions such as webpage parsing, layout and rendering, and JS running. Chromium provides basic frameworks such as processes, threads, and rendering for WebView Based on WebKit. Therefore, WebView based on Chromium provides better Web browsing functions. Starting from this article, we will start learning about Android Chromium WebView.

Lao Luo's Sina Weibo: http://weibo.com/shengyangluo. welcome to the attention!

Learning WebView is not just to study how it embeds a browser in an application to display web pages, but to study how a modern browser is implemented with WebView as the starting point. Just like learning about the Android system is not just to study how its applications run, but to study how a modern mobile operating system is implemented with the Android system as the starting point.

Why should we select a browser as the next research point?

This is because the browser is so far the most likely to become a technology for cross-platform development, and everyone has a high degree of acceptance of it, especially after the HTML5 standard.

Why cross-platform development?

This is because time is money in an increasingly efficient modern society. Specifically, software development mainly involves the development time cost. For mobile application development, we generally develop both Android and iOS versions. Their functions are basically the same, but because they use different development languages and running platforms, they need to be developed separately. This will naturally increase development costs. Of course, we can develop basic libraries for Android and iOS apps to minimize development costs. The core functions of these basic libraries are developed using C/C ++, and a set of Java interfaces and an Objective-C interface are encapsulated for Android and iOS respectively. However, this does not completely solve cross-platform problems. For example, it is difficult to implement the UI and Its Related logic through the cross-platform basic class library.

Why choose chrome-based WebView on Android as the starting point to study browsers?

The three keywords for this problem are Android, Chromium, and WebView.

First, check the keyword Chromium. If you have never heard of Chromium, you should have heard of Chrome. Compared with other browsers, Chrome's multi-process architecture and the ability to quickly open webpages are amazing, and it is implemented based on Chromium. Chromium is an open-source Google-dominated browser project. Chrome will be developed and released in a stable version of Google. In addition to Chrome, Chrome OS is also developed based on Chromium. It can be seen that Chromium is an open-source project with a profound technical background and uses an OS-level architecture. Otherwise, Chrome OS cannot be easily developed based on it.

Next, let's look at the keyword WebView. The WebView provided by Android 4.4 and later versions, like Chrome and Chrome OS, is implemented based on Chromium. That is to say, WebView, Chrome, and Chrome OS are both Chromium customers, and the Web View provides the simplest browser function. Therefore, choosing WebView as the starting point allows us to quickly master the browser technology involved in Chromium. Finally, let's look at the keyword Android.

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

What do you get by learning about browser technology?

The browser processes two core objects: HTML and JavaScript. HTML is used to implement web UI. The core technology involved is the UI rendering technology. JavaScript is used to implement web page functions, involving the most core technology JavaScript engine technology.

The UI is a core module of the operating system of all smart devices with screens. It interacts with users and reports interaction results to users to form a closed loop. When users use a system, the first thing they come into contact with is its UI, which is often the same as its UI. Therefore, the quality of the UI directly affects the user experience of the system. User Experience is crucial to a system. For example, many people think that iOS is better than Android because the former has a better user experience.

One of the important criteria for measuring the good and bad user experience of a system is the smoothness of the UI, with the smoothness of the animation as the core, because a smooth animated display requires a UI rendering speed of 60 FPS. In order to achieve a rendering speed of 60 FPS, every system is trying its best to implement the UI module. Rendering strategies such as vertical layering and horizontal partitioning are usually used.

Vertical layering is to divide the UI by layer in the Z axis direction. This brings about the benefit that each layer does not have to be repainted when rendering every frame of the UI. This layered Rendering Strategy uses a UI rendering technique called "Drawing-merging. That is, each layer is responsible for drawing its own UI and then merging them by a separate module. In this way, when rendering every frame of the UI, only the layer with a changed UI needs to be re-drawn. The layer without a changed UI only needs to be merged. This technology can greatly reduce rendering operations for a smoother UI experience.

The so-called horizontal block is to block each layer of the UI according to certain rules, the advantage of this is that when each frame of the UI is rendered to a layer that needs to be re-drawn, it is not necessary to re-draw all the content of the layer, you only need to draw the blocks in the visible range. In this way, you can reduce rendering operations to a certain extent to get a smoother UI experience.

The current smart devices are equipped with multiple CPUs. To fully utilize the CPU multi-core features, a frame of UI rendering is usually divided into two steps: the first step is to collect the UI rendering command; the second step is to execute the UI rendering command. Each step is completed in an independent thread, so we can fully utilize the multi-core features of the CPU: While executing the N-frame UI rendering command, collect the UI draw command at the N + 1 frame. In addition, some additional optimizations can be made for the UI rendering commands collected in the first step. When we collect all the drawing commands for a frame of UI, we get a full picture of the UI. After knowing the full picture of a UI frame, you can perform some optimization, such as re-arranging and merging some UI rendering commands, and discarding the rendering commands related to the blocked UI. These optimizations can also reduce rendering operations for a smoother UI experience.

Many of today's smart devices are equipped with GPUs, which means that we can use GPUs to further improve the UI rendering speed. This is called hardware accelerated rendering technology. For example, for the UI Layer and block we mentioned above, you can use GPU texture or FBO to draw and synthesize them directly. GPU has mature and professional UI rendering technology, so you can use it to render the UI and get a smoother UI experience.

All the UI rendering technologies mentioned above, no matter what system, we can see their shadows more or less, so they are all generic and modern UI rendering technologies. If you have mastered these UI rendering technologies, No matter what systems are popular in the future, we can easily deal with them. Therefore, the first core technology that can be obtained by studying browser technology is the modern advanced UI rendering technology.

I don't know whether the students have found that new programming languages have been released from time to time in recent years, especially with the release of new systems, among them, Google's Go language and Apple's Swift language are famous. While amazed at the convenience and ease of use of these programming languages, have we ever wondered how they are designed and implemented? If you have considered this issue, we have to mention JavaScript, an ancient and popular programming language.

JavaScript is regarded as a "Toy language". It is said that it took only two weeks to design and then used for 20 years. In the past 20 years, everyone was using it, and then scolded it. This shows how much you like it. It is called "Love. Although JavaScript is designed to operate web pages, it is not only applied to front-end application development of web pages, but also penetrated into mobile and server application development.

On the Mobile terminal, in the last two or three years, many Web OS targeting Mobile phones have emerged, such as Firefox OS, Ubuntu Mobile OS, Tizen OS, and Alibaba Cloud OS, which support running Web applications, this means that JavaScript can be used to develop applications on these systems. Of course, Web applications can also be developed on Android and iOS, but they all need to run on the WebView, not directly supported on the OS layer. On the server side, Node. js is a representative framework that allows us to use JavaScript to develop Web servers.

In addition to mobile terminals and servers, JavaScript is even used in the MCU (Microcontroller Unit) field, also known as the single chip microcomputer field. These MCU provide a JavaScript runtime environment so that we can operate on them using JavaScript.

A language originally designed for web development. Due to its simplicity and ease of use, it not only applies to mobile and server development, but also to the MCU field, this 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 it is perfect. For example, performance is a prominent problem. But will it be replaced by JavaScript in all programming fields after the JavaScript performance problem is solved one day?

In any case, in view of the popularity of JavaScript, as a software development practitioner, we not only use JavaScript, but also need to know how JavaScript runs behind it to reach a higher level. JavaScript is a dynamic language. Similar to the static languages C/C ++ and Java, the implementation involves compilation-related knowledge, for example, Syntax Parsing, syntax tree generation, bytecode command generation, local command generation, and command optimization. However, for dynamic languages, these operations occur only in static languages when the application is running. In addition, the engine running JavaScript is the same as the virtual machine running Java bytecode. It provides the memory Automatic Management Technology during runtime, that is, it will execute GC. It can be seen that learning JavaScript can gain a lot of knowledge about compilation languages. This is also the second core technology that can be obtained by studying browser technology.

When we are learning chrome-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, and multi-thread programming model. In a word, learning about browser technology allows us to get a lot of computer technologies that are popular today and even in the future.

What is the learning route of Android Chromium WebView?

We will learn how to implement the Android Chromium WebView by analyzing the chromium_org project that comes with the source code of Android 5.0. We will also use a step-by-step learning method to start with some basic knowledge, for example, Chromium's smart pointer technology, thread communication model, and process communication model, and then use the scenario to gradually analyze complex technologies. Such as Web Resource download, web page layering, multipart, rendering, merging, and hardware accelerated rendering.

This will be a challenging learning process, but if we can stick to it, the gains will be huge, because the knowledge we have learned is likely to be the next technical challenge!