Beihai (Kraken) v0.9 — supports QuickJS 20% faster above-the-fold loading

foreword

This article is the release log of the rendering engine Beihai (Kraken) v0.9. If you don't know much about Kraken, please jump to the end of this article to read our previous articles.

Following the upgrade from v0.8 to Flutter 2.0 + Null Safety, in this version, we focused on optimizing the loading performance of the first screen, the correctness and performance of the layout, and the front-end community ecology. The detailed update log can be found in CHANGELOG .

Next, I will focus on several new features added in v0.9.

Support QuickJS as JavaScript Engine

QuickJS is a lightweight JavaScript engine that has several advantages over JavaScriptCore:

Lightweight, its implementation consists of only a few C files, no external dependencies, and only about 180 KiB for a simple "hello world" program under x86.
A fast interpreter with extremely low startup time, combined with pre-compiling JS source code into bytecode format, greatly improves the application startup performance after ignoring the time-consuming parsing.
Almost complete ECMA standard support, the latest version natively supports ES2020, no need to compile babel to ES5, not only the size of JSBundle can be reduced, but also the performance of execution can be improved.
Better multi-platform support, even a full compilation doesn't take much effort.

Kraken v0.9 migrates the default JavaScript Engine implementation of the original Bridge layer to QuickJS, which can improve application startup performance with bytecode pre-compilation. And these changes are completely insensitive to front-end developers.

We also performed Benchmark performance tests on the new and previous version of Kraken:

Test device: MI 6 (Android arm64) Test page: https://kraken.oss-cn-hangzhou.aliyuncs.com/data/cvd3r6f068.js Test method: Use 0.8.4 (JavaScriptCore) and 0.9.0-rc ( QuickJS) version of each cold start page, compare the loading time. Detailed log:

0.9.0-rc

0.8.4

Analyze the logs for JavaScript-related key performance indicators:

js_context_init_cost: JS Engine initialization time
polyfill_init_cost: Kraken JS polyfill initialization time
js_bundle_eval_cost: JS Bundle execution time
js_parse_time_cost: JS Bundle parsing time

Version	js_context_init_cost	polyfill_init_cost	js_bundle_eval_cost	js_parse_time_cost
0.8.4	17.30ms	20.39ms	229.53ms	31.25ms
0.9.0-rc	0.55ms	2.06ms	122.61ms	122.91ms

QuickJS supports bytecode loading, js_parse_time_costso it can be ignored when using bytecode format.

Get the total loading time about JS:

JavaScriptCore: 17.3 + 20.39 + 229.53 + 31.25 = 298.47ms
QuickJS: 0.55 + 2.06 + 122.61 = 125ms

Real machine screen recording verification

The above is the benchmark data at the code level. How does the actual user feel? We conducted a screen recording test on the real machine:

Indicator definition:

White screen stage: the time from when the user clicks on the app to start the first frame of the page
Rendering stage: the time from the appearance of the first frame of the page to the stable completion of rendering of all the content (including pictures) of the target page

Through frame-by-frame analysis, multiple groups are averaged to obtain the following data:

Limited by the precision of the progress bar of the video player, the precision of the test data is 0.05s.

test grouping	White Screen Stage (Mean)	Render stage (average)
0.8.4	0.95s	0.80s
0.9.0-rc	0.95s	0.60s
0.9.0-rc + bytecode	0.76s	0.66s

It can be concluded that under the above conditions, the Kraken v0.9 + bytecode mode can further improve the performance of the first screen by 18.86% compared with the v0.8 version. It is worth noting that the real machine test uses an Android mid-end device, and the impact of JS Engine parsing time is greater on low-end devices, so there is reason to believe that the optimization brought by QuickJS can be obtained on low-end devices. For more benefits, we will further test and update the specific data.

Supports parsing and rendering of HTML files

For browsers, the performance of SSR direct rendering is much better than asynchronous JS rendering of CSR, and the same is true for Kraken. This time, we have brought support for HTML file parsing and rendering to Kraken, directly parsing HTML and rendering views without waiting for JS initialization and execution.

The usage is no different from JSBundle, just pass the URL of the HTML file into the bundleURL:

void main() {
  runApp(Kraken(
    bundleURL: 'https://domain.com/url/to/html',
  ));
}

Kraken will Content-Typeuse HTML parsing or JavaScript engine startup based on HTTP negotiation.

Performance Testing:

Test device: MI 11 Lite (Android arm64) Test page: https://kraken.oss-cn-hangzhou.aliyuncs.com/data/....js Test method: use 0.9.0-rc and use JSBundle / Bytecode respectively / The HTML format is cold-started once each page, and the loading time is compared.

test grouping	Total time cost (average)
JS Bundle	865ms
Bytecode	662ms
HTML	255ms

Cache feature that supports HTTP protocol

As we all know, there are two ultimate problems in programming, one is naming variables, and the other is the use of caches.

The browser supports HTTP caching by default, including strong caching and negotiated caching. It is a specification describing caching formed by the combination of multiple HTTP headers. In the client ecosystem or the basic capabilities of Flutter, HTTP caching is not included. Kraken v0.9 supports HTTP caching by default, whether it is XHR/fetch or images loaded through img tags, JS files loaded with script tags, etc., as long as it is an HTTP(s) request sent from within Kraken, you can enjoy it. To the benefits of caching, currently supported features include:

Strong caching without secondary requests
- Expires
- Cache-Control (max-age/no-store/no-cache)
Negotiation cache that requires a second request (negotiated according to HTTP status code 304)
- Last-Modified / If-Modified-Since
- Etag / If-None-Match

This function brings more obvious optimization benefits to scenarios that contain a large number of pictures in e-commerce product feeds and other pages. Since almost all pictures are resources of strong cache type, there is no need to request the network again in the case of a cache hit, and the cache is The solidified cache of the falling disk can also be optimized for the second cold start application.

Support Vue/React official toolchain

Front-end developers are users of Kraken, and we have continued to receive feedback from many community developers after open source.

For modern front-end development, a framework is essential. In addition to Rax, which is widely used in Taoism, we have recently supported the official toolchains and ecological libraries of Vue and React. Now we use v0.9 to develop Vue/React App will be smoother.

For details, please refer to the official sample project: https://github.com/openkraken/samples

Support module hot update (Hot Module Replacement)

Module hot update is a common feature of Webpack, through which you can directly replace, add or delete nodes after modifying the code without reloading the entire page. Webpack official documentation

Support querySelector / querySelectorAll*

At the same time, querySelector/querySelectorAllwe . The currently supported CSS selectors include:

id ID selector
class class name selector
tag tag selector
attr attribute selector, including the following judgments
- =
- ^=
- *=
- $=

*: Currently only some CSS selectors are supported, see above for details.

More about Beihai Kraken

community collaboration mechanism

We hope to build Kraken's underlying capabilities and ecology together with many developers in the community through a good community collaboration mechanism.

The Kraken team participates in Kraken feature iterations and issue discussions through collaborators . At the same time, through a technical committee (TSC) composed of a group of collaborators to determine the technical direction, release and customize the standard and other work.

Simply put, as long as you submit a certain quality and quantity of code to the Openkraken Group, you can become a collaborator; after submitting constructive contributions to the project, TSC members have the right to nominate collaborators to participate in the TSC.

The Kraken team hopes to enable developers in the community to better participate in the evolution of the project through a friendly and participatory collaboration mechanism, so that everyone's voice can be heard, and jointly promote the development of Kraken and Web standards. developing.

More detailed cooperation mechanisms can be moved to Github TSC .

contact us

Detailed CHANGELOG can refer to CHANGELOG . If you want to get more information about Kraken, you can visit our Github , official documentation and get in touch with the Kraken project team.