Kraken 是一款基于 W3C 標(biāo)準(zhǔn)的高性能渲染引擎。Kraken 底層基于 Flutter 進(jìn)行渲染，通過(guò)其自繪渲染的特性，保證多端一致性。上層基于 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)，擁有非常龐大的前端開(kāi)發(fā)者生態(tài)。

特性

• Web 標(biāo)準(zhǔn)開(kāi)發(fā)：Kraken 依據(jù) W3C 標(biāo)準(zhǔn)提供渲染能力，提供瀏覽器中常見(jiàn)的標(biāo)簽、CSS 能力、API，讓你使用前端生態(tài)構(gòu)建原生應(yīng)用。

• 跨平臺(tái)一致：基于 Flutter 的自繪渲染技術(shù)，不再受到平臺(tái)能力制約，提供跨平臺(tái)完全一致的 UI，同時(shí)支持桌面端 (macOS、Linux、Windows) 和移動(dòng)端 (iOS、Android)等。

• 原生性能：使用 AOT 構(gòu)建技術(shù)將 Kraken 編譯成機(jī)器碼，提供更接近原生的性能；同步光柵化，支持無(wú)限列表流暢滾動(dòng)且沒(méi)有白屏。

示例

結(jié)構(gòu)與樣式

Kraken 中實(shí)現(xiàn)了 W3C 標(biāo)準(zhǔn)的 HTML 標(biāo)簽與 CSS 樣式，因此可以完全使用 Web 開(kāi)發(fā)的方式來(lái)書(shū)寫(xiě)頁(yè)面結(jié)構(gòu)與樣式。

搭建頁(yè)面結(jié)構(gòu)

以下例子演示了如何使用原生 HTML 標(biāo)簽寫(xiě)一個(gè)簡(jiǎn)單的博客文章結(jié)構(gòu)：

<div>
  <div>Kraken 入門(mén)教程</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 標(biāo)準(zhǔn)的高性能渲染引擎。Kraken 底層基于 Flutter
    進(jìn)行渲染，通過(guò)其自繪渲染的特性，保證多端一致性。上層基于 W3C
    標(biāo)準(zhǔn)實(shí)現(xiàn)，擁有非常龐大的前端開(kāi)發(fā)者生態(tài)。
  </div>
</div>

添加樣式

為方便演示，代碼示例中統(tǒng)一使用 React / Rax 支持的 JSX 語(yǔ)法來(lái)設(shè)置內(nèi)聯(lián) style。

<div style={{ margin: '20px' }}>
  <div style={{ fontSize: '30px', margin: '10px 0' }}>Kraken 入門(mén)教程</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 標(biāo)準(zhǔn)的高性能渲染引擎。Kraken 底層基于 Flutter
    進(jìn)行渲染，通過(guò)其自繪渲染的特性，保證多端一致性。上層基于 W3C
    標(biāo)準(zhǔn)實(shí)現(xiàn)，擁有非常龐大的前端開(kāi)發(fā)者生態(tài)。
  </div>
</div>

渲染效果