《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎——Kraken（北海）。
Kraken 是一款采用基于 Flutter 而实现的自绘渲染引擎。它使用 W3C 标准的 html，css，JAVAScript，并支持通过 JavaScript 实现对画面的实时交互。
Kraken 基于 Flutter Rendering 层的实现进行了深度定制，在保留兼容 RenderObject API 的情况下，扩展出了兼容 W3C 标准的布局能力，并在此基础之上添加了 DOM，CSS 的解析处理，并对接 JavaScript 引擎，实现了一个类浏览器的技术架构。
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>
渲染效果：
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
京公网安备 11010802035086号