《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎——Kraken（北海）。
Kraken 是一款采用基于 Flutter 而实现的自绘渲染引擎。它使用 W3C 标准的 ，，Script，并支持通过 实现对画面的实时交互。
Kraken 基于 Flutter Rendering 层的实现进行了深度定制，在保留兼容 RenderObject API 的情况下，扩展出了兼容 W3C 标准的布局能力，并在此基础之上添加了 DOM，CSS 的解析处理，并对接 JavaScript 引擎，实现了一个类浏览器的技术。
特性
- Web 标准开发：Kraken 依据 W3C 标准提供渲染能力，提供浏览器中常见的标签、CSS 能力、API，让你使用前端生态构建原生应用。
- 跨平台一致：基于 Flutter 的自绘渲染技术，不再受到平台能力制约，提供跨平台完全一致的 UI，同时支持桌面端 (OS、、) 和移动端 (、)等
- 原生性能：使用 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 </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-
开源协议：2.0
开源地址：
https://github.com/openkraken/kraken
