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>
渲染效果
评论