Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。

特性

• Web 标准开发：Kraken 依据 W3C 标准提供渲染能力，提供浏览器中常见的标签、CSS 能力、API，让你使用前端生态构建原生应用。

• 跨平台一致：基于 Flutter 的自绘渲染技术，不再受到平台能力制约，提供跨平台完全一致的 UI，同时支持桌面端 (macOS、Linux、Windows) 和移动端 (iOS、Android)等。

• 原生性能：使用 AOT 构建技术将 Kraken 编译成机器码，提供更接近原生的性能；同步光栅化，支持无限列表流畅滚动且没有白屏。

示例

结构与样式

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

搭建页面结构

以下例子演示了如何使用原生 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>

添加样式

为方便演示，代码示例中统一使用 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>

渲染效果