基于 Flutter 构建的高性能 Web 渲染引擎 Kraken

2022-11-03 今日头条 GitHub精选

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎——Kraken（北海）。

Kraken 是一款采用基于 Flutter 而实现的自绘渲染引擎。它使用 W3C 标准的 html，css，JAVAScript，并支持通过 JavaScript 实现对画面的实时交互。

Kraken 基于 Flutter Rendering 层的实现进行了深度定制，在保留兼容 RenderObject API 的情况下，扩展出了兼容 W3C 标准的布局能力，并在此基础之上添加了 DOM，CSS 的解析处理，并对接 JavaScript 引擎，实现了一个类浏览器的技术架构。

特性

Web 标准开发：Kraken 依据 W3C 标准提供渲染能力，提供浏览器中常见的标签、CSS 能力、API，让你使用前端生态构建原生应用。
跨平台一致：基于 Flutter 的自绘渲染技术，不再受到平台能力制约，提供跨平台完全一致的 UI，同时支持桌面端 (macOS、linux、windows) 和移动端 (IOS、Android)等
原生性能：使用 AOT 构建技术将 Kraken 编译成机器码，提供更接近原生的性能；同步光栅化，支持无限列表流畅滚动且没有白屏。

基础使用

Kraken 中实现了 W3C 标准的 HTML 标签与 CSS 样式，因此可以完全使用 Web 开发的方式来书写页面结构与样式。

搭建页面结构：

Kraken 支持大部分常用的标准 HTML 标签，使用这些标签可以帮我们搭建出页面的基本结构。以下例子演示了如何使用原生 HTML 标签写一个简单的博客文章结构：

<div>
  <div>Kraken 入门教程</div>
  <div>2021-1-1</div>
  <div>
    <img src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png" />
  </div>
  <div>
    Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter
    进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C
    标准实现，拥有非常庞大的前端开发者生态。
  </div>
</div>

添加样式：

Kraken 支持大部分常用的 CSS 样式，接下来我们继续在上面博客文章示例的 HTML 代码示例上添加样式：

为方便演示，代码示例中统一使用 React / Rax 支持的 JSX 语法来设置内联 style。

<div style={{ margin: '20px' }}>
  <div style={{ fontSize: '30px', margin: '10px 0' }}>Kraken 入门教程</div>
  <div style={{ fontSize: '14px', color: '#666' }}>2021-1-1</div>
  <div style={{ margin: '10px 0' }}>
    <img
      style={{ width: '100%' }}
      src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png"
    />
  </div>
  <div style={{ fontSize: '16px' }}>
    Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter
    进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C
    标准实现，拥有非常庞大的前端开发者生态。
  </div>
</div>

渲染效果：

进阶使用（使用 HTML 格式渲染）

Kraken 应用的入口是一个 JavaScript 文件，开发一个普通应用通常直接打出一个 JS bundle 或者是 bytecode 文件。考虑到前端 SSR 的场景，开发者往往需要通过服务端渲染等方式加快首屏的渲染速度，这时可以将入口改成 HTML 文件，以支持 SSR 渲染 Kraken 应用。

简单的例子：

<html>
  <head>
    <title>Kraken App</title>
  </head>
  <body>
    <div
      style="box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; align-content: flex-start; border-width: 0vw; border-style: solid; border-color: black; margin: 26.6667vw 0vw 0vw; padding: 0vw; min-width: 0vw; align-items: center;"
    >
      <img
        src="https://img.alicdn.com/imgextra/i1/O1CN01CUE2IL1FdAGnYPawX_!!6000000000509-2-tps-350-116.png"
        style="height: 24vw; margin-bottom: 2.6667vw;"
      />
      <span
        style="box-sizing: border-box; display: block; font-size: 6vw; white-space: pre-wrap; font-weight: bold; margin: 2.6667vw 0vw;"
        >Welcome to Your Kraken App</span
      >
      <span
        style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
        >More information about Kraken</span
      >
      <span
        style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
        >Visit http://openkraken.com/</span
      >
    </div>
    <script>
      console.log('eval JavaScript!');
    </script>
  </body>
</html>

渲染效果：

-END-

开源协议：Apache2.0

开源地址：
https://github.com/openkraken/kraken