As for this research report, it is not an in-depth exploration from the technical point of view, but focuses on the analysis of the product itself, which is easy to understand. It is mainly to exercise the ability to do technical research and competitive product analysis, as well as the technical reserve of business development. The following **X5 ** kernel research report will be divided into three parts: Why-What-how description.

According to the classic 2W1H strategy description

WHY

Why do you need to consider the browser kernel on Android?

** It boils down to this: are you trying to fix compatibility issues on one X5 or hundreds of Android phones? ** Compatibility issues are analyzed from multiple dimensions as follows:

System built-in browser core differentiation

For The Android system, the following four nodes are usually used as the important basis to analyze the differences between the browser kernel and the system. The following are the latest statistics of Google:

System version Equipment accounted for
The Android 4.0 below 0.9%
Android 4.0 – Android 4.4 11.0%
The Android 4.4 20.0%
Android5.0 and above 68.1%

According to the above data, most Android phones are running Android 4.4 or above, which is also the dividing line of major changes to the System WebView kernel. In Android 4.4, the original WebView implementation based on Android WebKit was replaced with a Chromium implementation that focused on providing a consistent interface (for compatibility with older applications), The internal rendering engine was changed to use a Blink/Content kernel based engine, which resulted in a huge improvement in both functionality and performance.

Chromium is an open source browser project led by Google, Chrome browser will choose a stable version of its development and release. In addition to Chrome, Chrome OS is also based on Chromium.

Since Android 5.0, Google has pulled the Chromium Blink webView kernel from the system as an APK and can receive installation updates on the app market. Applications can use the WebView kernel directly, and Google can release updates in a timely manner, eliminating the need to update the browser kernel through system updates, and avoiding some of the fragmentation problems of the Android system.

Android platform fragmentation

The fragmentation of Android is mainly reflected in the following aspects:

  • Various equipment, hardware configuration is uneven, equipment performance is different, the gap is very large
  • There are many brands, inconsistent standards of manufacturers, and different customized system experiences
  • Different versions, domestic and foreign system environment is huge difference
  • Resolution is not unified, various types of size

Below is OpenSignal’s basic statistics, released in August 2015, looking at the market share of 1,294 popular phone brands, which shows how fragmented the distribution is.

The following figure shows the distribution of Android device resolutions. It can be seen that Android devices are of various types and sizes, and it is very difficult for developers to adapt.

Especially in the case that the Android system is open source but the basic services provided by Google cannot be used in China, domestic manufacturers often abandon the existing specifications of Google and carry out a lot of customization of the system, resulting in a huge difference between the device ROM and the native Android system environment.

The same is true for browser kernel. Even though Google launched WebView based on Chromium Blink kernel, many domestic manufacturers streamlined or replaced it, resulting in serious fragmentation problem of WebView kernel. This allows developers to directly use the system browser kernel development has many concerns, different models of adaptation difficulty also greatly increased.

Ii. What are the existing problems of H5 adaptation on mobile terminal?

** In a nutshell: device fragmentation and UI style customization (animation effects, etc.) performance is poor. ** Due to the fragmentation of Android itself, the experience on different devices varies greatly, making it difficult for developers to fully adapt. Although Google continues to introduce industry-leading technologies to improve the experience, it is difficult to cover in a short time, and the open source feature makes it difficult to unify the choice of system customization among different vendors.

On some old models, even if there is not much picture and text information in the H5 page, there will be some phenomena such as not smooth dragging, white switching and window flickering when displaying in WebView, which is caused by the weak rendering ability of WebView itself.

Another example is the Html5 Video control to play the Video. Click the Video part on iOS, and the Video will be played in full screen with the browser of the system, with good experience effect. Android WebView can not be full screen, the experience is poor. Slow page loading, occasional memory leaks, compatibility issues with different Android versions using different kernels, etc., are all common problems encountered when using native WebView components for development.

Therefore, the first problem we face is how to solve the mobile ecosystem chaos currently described.

Third, why use X5 kernel to improve the effect? (For Tencent browsing service X5 kernel official website to introduce endorsement)

Tencent Browsing service is produced by the QQ Browser team, which is committed to optimize the mobile end webview experience of a complete set of solutions, using QQ browser X5 kernel SDK and X5 cloud services, to solve all the problems in the use of mobile end Webview, optimize the user’s browsing experience.

X5 SDK calls the X5 kernel of wechat/mobile QQ/ space to solve problems such as poor compatibility, slow loading speed and functional defects of the system Webview. It is easy to develop and access, with a size of only 253K and only a few lines of code, it can solve all the headaches for developers and provide users with the best browsing experience.

Compared with system WebView, it has the following obvious advantages:

  1. Fast speed: compared with the system webView webpage loading speed has nearly 30% improvement.
  2. Save traffic: Cloud optimization technology saves traffic by 20%
  3. Safer: 24-hour security problem resolution mechanism
  4. More stable: After hundreds of millions of users, the CRASH rate is 0.15%
  5. Integrated powerful video player, support a variety of video formats directly open
  6. Suitable screen typesetting, font setting and other browsing enhancement functions
  7. Html5 is more fully supported.
  8. X5 cloud service is through the cloud technology to ensure that users in the case of no QQ browser can also use the X5 kernel to provide excellent services, including cloud acceleration, cloud security, cloud conversion three major functions.

Four, summary

As for the Why part, it mainly analyzes the current market environment and the problems faced by developers and leads to the discussion on the necessity of using x5 kernel. For front-end developers, consider how to more effectively adapt to as many devices as possible, compatible with more user environments, create a consistent user experience, and provide more rich interactive experience while ensuring high availability. Tencent’s introduction of the X5 kernel seems pretty solid, but what it is is a step by step discussion of the browser kernel.

WHAT

What is the browser kernel?

The discussion about the browser kernel can be divided into two parts: layout Engineer (Rendering Engine) and JS Engine. The rendering engine takes the content of a web page (HTML, XML, images, etc.), collates the information (adding CSS, etc.), and calculates how the page should be displayed, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. The Javascript engine is to parse Javascript language, execute Javascript language to achieve the dynamic effect of web pages. At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines. The main function of the browser kernel is to transform the page into a visual image result. The whole process can be simplified into the following steps:

Before 2013, common browser kernels were Trident (IE), Gecko (Firefox), Webkit (Safari Chrome) and Presto (Opera). Google started developing Blink engine in 2013, and Chrome 28 has been used since then. Opera abandoned Presto and joined Google in developing Blink engine. Domestic chrome browsers (360, UC, QQ, Baidu, etc.) have also abandoned WebKit and embraced Blink.

At present, the domestic mainstream browser kernel, such as UC U3 kernel, QQ browser X5 kernel and Baidu T5 kernel in the previous version are based on the open source kernel Webkit development, so it is on the basis of Webkit for secondary optimization, in function and performance are similar. With the development of Chrome, the blink kernel also gradually changed.

The browser kernel rendering engine infrastructure

From the overall structure of the kernel, rendering engine can be summarized as mainly including HTML interpreter, CSS interpreter, layout and JavaScript engine, drawing, etc. :

  • HTML interpreter: An interpreter that interprets HTML text into a DOM(Document Object Model) tree, which is a representation of documents.
  • CSS interpreter: Cascading style sheet interpreter that computes style information for element objects in the DOM and provides the infrastructure for calculating the final layout of a web page.
  • Layout: After the DOM is created, WebKit needs to combine its element objects with style information, calculate their size and location, and form an internal presentation model that can represent all of this information.
  • JavaScript engine: JavaScript code can be used to modify the content of the web page, but also to modify the information of CSS. The JS engine can interpret the JS code and modify the content and style information of the web page through DOM interface and CSSOM interface, so as to change the result of rendering.
  • Drawing: use graphics library to draw the nodes of each web page after layout calculation into graphic results.

About the Android browser kernel

As mentioned above, in Android 4.4 version, the original WebView implementation based on Android WebKit was replaced with Chromium implementation, and the new Chromium internal rendering engine was changed to use Blink/Content kernel engine.

The key to the difference between WebKit and Chromium is that Google gave up the open source WebKit led by Apple. It can be said that WebKit was an important link for technical communication between Google and Apple in the past. Chromium gradually took the road of self-development from a WebKit branch, and adopted the self-developed Blink rendering engine and V8 JavaScript engine as the important support of the new kernel.

The following is a simple quantification of the performance difference of WebView kernel in different system versions based on the actual performance of the two test models with high and low Android system versions:

According to the comparison test, WebView developed based on Chromium kernel in Android 4.4 or above has significantly improved the performance and compatibility compared with the old version of WebKit. In contrast, the Chromium multi-process feature leads to larger memory consumption. In addition, the library file has reached about 28M. The diagram below is the schematic diagram of Chromium architecture and main modules. From the diagram, we can see Blink is only one of them, and there are many Chromium modules along with it. Including GPU/CommandBuffe R (hardware accelerated architecture), V8 JavaScript engine, sandbox model, CC(Chromium synthesizer), IPC, UI, etc

What are the advantages and disadvantages of x5 kernel? Are there any other mature solutions?

Tencent browser service TBS – X5 kernel

Tencent browsing service TBS in version 2.3, its X5 kernel is based on Android 5.0 WebView Blink kernel (M37 version) adaptation customization optimization.

The X5 kernel claims to be compatible with all major Android platforms and can use Blink’s technical capabilities on all Android phones, with better H5/CSS3 support and performance. The latest TBS2.3Blink kernel can be used when the device is installed with wechat, mobile QQ and Qzone. Its official website provides information about x5 kernel parameters:

Actual comparison test performance: The following is the comparison data of H5 support between QQ browser and Google Chrome browser on the same device. Device: Huawei Nexus 6P Android 7.1 Test platform: https://html5test.com Left: QQ Browser 7.2×5 kernel Right: Chrome Dev 55 Chromium kernel

From the actual test comparison, compared with the actual data of the Chromium kernel, the performance of the X5 kernel is not as expected. Of course, the test basis is mainly from the technical indicators such as compatibility and H5 support, mainly from the technical dimension. Considering that the actual development scenario is mainly the compatibility problem is more prominent, running score is not the ultimate goal, so the unified scenario is the most important. Let’s take a look at the x5 features and what you can do.

Typical industry solution introduction — Egret engine

Currently, there are a lot of solutions for HTML5 games. For mature technical products, there are usually multiple dimensions of comparison, not only technical level, but also many non-technical level content, which will not be compared here.

The reason why choose Egret engine to introduce, not only because egret engine has many mature products can be one-stop solution and is popular among developers, the key is that it also has deep cooperation with Tencent X5 browser, its benefits are self-evident, I am afraid it will be the best choice for wechat game development. Egret Engine is an open source, free gaming framework for building two-dimensional games, demos, and other graphical interface interaction applications. Egret is developed in the TypeScript scripting language. When the game is finally packaged, the application can be converted into an HTML5 game. Implement cross-platform features.

Egret Runtime is a 3D-enabled HTML5 game accelerator that solves the problem of poor HTML5 standard support and poor experience on low-end devices and ADAPTS to different systems to make HTML5 games as good as native games. The cooperation with Tencent browser X5 directly supports the underlying functions required for H5 games to run, fundamentally solving the fragmentation and performance problems.

Tencent browser X5 has solved the running problem of HTML5 games in various application scenarios, and Egret Runtime can greatly optimize the terminal experience with cooperation. According to the official website, HTML5 games with Egret Rumtime acceleration get 3-5 times better performance compared to about 30 times better performance compared to PhoneGAP, bringing HTML5 games closer to the experience of native games.

HOW

How to practice with x5 kernel?

Use the X5 kernel access guide provided on the official website of Tencent Browsing service to integrate the SDK of the provided kernel service into the application. Because x5 kernel is the secondary development on the basis of Android native WebView, so it provides in the developer call interface and native to keep consistent, compatible with the various attributes of the native WebView Settings, if the previous use of the original WebView can be almost seamless replacement.

While the discussion of mainstream mobile application development models has been a commonplace, the previously popular Hybrid development model has been overshadowed by ReactNative and Weex. The key is that more and more scenarios require highly dynamic content, maintaining a user-friendly and unified experience while allowing for more lightweight, fast interaction, and rapid iteration.

It is meaningless to discuss which development mode is superior or inferior without reference to the actual application scenario. The key is to choose the most suitable one according to the scenario. Therefore, relevant details of the three development modes are not discussed here, but are only considered when developing Web scenarios:

Compared with Native App, Web experience is limited by the above five factors: network environment, rendering performance, platform characteristics, limited by browser kernel, and system restrictions.

Therefore, the key to solve these problems lies in providing a good basic operating environment and a mature complete solution. With the help of the X5 kernel, the operating environment can be improved to achieve consistency in interaction.

The term “consistency” is often understood to mean a consistent experience of the same application across various platforms and scenarios. However, in the process of mobile platform development, “consistency” should mean that the visual and interactive habits of the App should be consistent with those of the running platform, and the overall user experience should be consistent. It is reasonable that the “once developed, cross-platform” nature of Web development conflicts with this to a certain extent.

As mentioned above, this is the purpose of doing this with the x5 kernel. The following is the specific implementation process of X5 embedding in accordance with this design idea. From a technical point of view, we will write a Demo test and compare the actual effect to judge how the benefit is improved.

Two, how to carry out the specific implementation process, to solve those existing problems?

The implementation process can be divided into two parts: embedding integration and practical function application.

Integrate the X5 kernel

Tencent browsing service TBS official website provides the X5 kernel SDK is divided into a complete version and a condensed version. The compact version cannot download the x5 kernel independently, but can only share the x5 kernel that uses wechat or mobile Q. The JAR package is about 190Kb. The full version can download the X5 kernel independently, or share the X5 kernel using wechat or Mobile Q, and the JAR package is about 280Kb.

Because the X5 kernel’s API interface is highly consistent with the system’s, the actual usage is the same as if it were developed natively. The actual encoding process is not described. For details, refer to the official access document.

The following features were discovered during x5 integration:

  • If you have installed QQ or wechat (domestic release version), and have opened the built-in – Web, the top of the drop-down page will appear by the X5 kernel provided technology, indicating that the application can use the shared X5 kernel.
  • If qq wechat is not installed, the application cannot share the X5 kernel of wechat or QQ, but cannot share the kernel of other integrated X5 application, only the complete kernel SDK package can be used.
  • On some devices, the X5 kernel cannot be enabled on the first startup. The X5 kernel can be used normally only after the process is restarted or a long wait is required after the first startup.
  • When the X5 kernel cannot be used, Tencent browsing service TBS SDK will use the built-in WebView by default, and the interfaces of the two are highly consistent.
  • X5 has good support for video playback and convenient full-screen effect control. Tencent also provides supporting SDK background services.

Practical application (X5EngineDemoThe sample program)

By using QQ browser X5 kernel SDK and X5 cloud service, the problem that developers need to adapt and compatibility in the process of using webview on mobile terminal can be solved, and the browsing experience of users can be optimized while the performance is improved, which is beneficial to unify the basic environment of users’ devices.

The benefits are mainly to reduce the difficulty of adaptation, improve product compatibility and performance effect. Mature products and a wide range of users, enhance security while reducing unnecessary trouble, reduce development costs.

There are cases of using Html5 Video controls to play Video in the open, to illustrate the benefits of using X5. Here’s a comparison of what the X5 kernel can do in terms of displaying web pages:

As can be seen from the above test, for the first time to load a web page, using systemWebView for web page loading time is better than X5, for the case of open cache, like, open the same page for many times, X5 time is slightly less than the system.

H5 playtest

As shown in the figure below, when testing the full-screen H5 game effect, it is found that there is little difference in the experience of the two on the device with high hardware configuration, and the FRAME rate of X5 is relatively stable. On some low-configuration and lower-version systems, X5 performs better than the system browser kernel and is more adaptable.

Play Web video

As shown in the picture below, Tencent Video website was tested and it was found that the system WebView had the problem of video loading error, while the system using X5 kernel could play normally.

However, the cost of accessing the X5 kernel is also a consideration, and developer reviews of the X5 have been mixed. The following tests the effect of bilibili bullet screen website. In the case of using system Webview, bilibili player with bullet screen is adopted, which can play normally and also support the display of bullet screen. When the X5 kernel is used to play, the loading is automatically replaced by the X5 built-in player. You can see that loading displays the interface provided by X5, so the bullet screen cannot be displayed normally.

Let’s take a look at the full screen mode, and the x5 is very different from native. In testing H5 games, the X5 had normal audio and art synchronization, while the webView had no normal background music, and the frame rate was occasionally 10 or so lower, which were also important factors for many developers to choose the X5.

Native JS Interaction Testing (JsBridge)

First of all, let’s understand why JSBridge is used. In the development, in order to pursue the efficiency of development and the convenience of transplantation, we prefer to use H5 for some pages with strong display, and Native for pages with strong functionality. Once H5 is used, in order to achieve the native experience as much as possible in H5, our native layer needs to expose some methods to JS calls, such as Toast reminders, Dialog and sharing, etc. Sometimes, we even leave H5 network requests to Native to complete. A typical example that JSBridge does well is wechat, which provides developers with JSSDK, which exposes many methods of wechat Native layer, such as payment and positioning, etc.

Test the effect of calling local Java interface by JS code in webView through JsBridge, and test the feasibility of auxiliary SDK development. X5 kernel also provides A JS interface security investigation mechanism to ensure that webView itself security vulnerabilities, and will respond to Google’s browser kernel vulnerabilities in a timely manner.

Iii. How to evaluate the improvement brought by the introduction of x5 kernel?

** In general, the improvements brought about by the introduction of X5 can be discussed from the following dimensions. Relevant characteristics are still described in the previous comparative analysis, and it is difficult to determine the actual performance based on qualitative indicators, so it will not be repeated here. For details, you can refer to the actual use effect in Demo to compare the improvement effect brought by X5 kernel. **

  • Page loading speed (partial page preloading cache control)
  • Interface fluency (game frame rate, effect stability)
  • Display compatibility (page compatibility, multi-model adaptation, interface consistency, video playback, etc.)
  • Interaction and feature support (JS support for rich friendliness, new HTML features)
  • Stability and security (security vulnerability patch fixes)
  • Sustainability (iterative update support)

conclusion

Through the pre-research of X5 kernel, the concepts related to browser kernel are sorted out. According to the typical 2W1H model, the technical characteristics and practical application scenarios of X5 kernel are compared and analyzed. The applicability of X5 kernel is discussed from multiple dimensions in the technical test.

Actually can know from the previous description, tencent X5 kernel is mainly in order to solve the Android terminal equipment caused by the difference of the front page adapter and browsing experience, to create a allows developers to reduce the costs of adaptation, enhance the user experience of consistency, browser based service for mobile applications.

What can we do based on X5 kernel SDK according to the study of browser kernel technology and the analysis of mature application scenarios in the market?

There are already too many mature solutions in the industry when it comes to developing H5 game engines, and the general acceptance of H5 games needs to be improved. For example, wechat has a good flow entrance, which is originally a good platform to expand H5 games, but it has been strictly restricted by itself, banning the forwarding of H5 games by public accounts in moments of friends and so on.

Let’s say we build our own SDK based on x5. However, X5 is highly consistent with the webView interface of the system, and secondary encapsulation can only increase the difficulty for developers to use. And the browser kernel is pretty hard to maintain because of the high cost of direct integration due to rapid iteration.

If the integrated auxiliary SDK is made, it is similar to the JS-SDK of wechat, which is a webpage development kit based on wechat provided by wechat public platform for web developers. The purpose is to reduce the cost of web developers using JS to interact with wechat App Native. Consider a scenario here: For example, a web developer plans to develop a game or application, but considering the development cost and benefits, directly implement the H5 interface and then wrap it into a shell and launch it as an App. In this way, while realizing rapid development, dynamic content can be updated quickly, and various disadvantages of traditional App iterative update can be reduced.

There are a lot of vendors like Egret Engine that offer a whole set of solutions, but there aren’t many ideas linking H5 to Native. For example, it is still too expensive for H5 developers to use native platform features for interaction design. Although there is a similar approach to JsBridge, considering BOTH JS and native development requires greater costs for web developers, and how to provide richer and smoother support for H5 interactive experience is a problem that we can try to solve.

All in all, x5 can be used to enrich interaction design and enhance user imagination, and the browser kernel, the basic underlying service, can be better applied.

Some references:

Introduce the kernel of each major browser

Layabox interprets wechat’s X5 Blink kernel upgrade

Introduction to major browser kernels (browser kernel history worth knowing for front-end development)

Process analysis of Loading Chromium dynamic library by Android WebView

HTML5 game engine in-depth review

Tencent X5 teamed up with EgretRuntime to push HTML5 games together

Tencent Browsing Service

Mixed APP development mode based on Tencent X5 kernel

Hybrid APP architecture design idea

Understand JSBridge

Principle and implementation of Android JSBridge

X5 sample Demo project

X5EngineDemo