与浏览器的差异

考虑到更高的性能与更小的体积,Kraken 在使用层面与浏览器有一定的差异。

普通应用推荐入口使用 JS 而不是 HTML

Web 的入口文件是一个 .html.htm 等为扩展名的 HTML 文档。

而 Kraken 更类似 React Native 和 Weex,它接受一个 .js 的 JSBundle,使用 DOM API 构建视图和样式。

这样的选择是出于性能的考虑,现代的前端框架通常使用 JS 逻辑操作 DOM 生成 UI,直接下载 JS 可以减少下载解析 HTML 文档所花费的时间。

Web 下的 HTML 文档:

  1. <!DOCTYPE html>
  2. <html>
  3. <head></head>
  4. <body>
  5. <div>Hello World!</div>
  6. </body>
  7. </html>

使用 JS Bundle:

  1. const root = document.createElement('div');
  2. root.appendChild(document.createTextNode('Hello World!'));
  3. document.body.appendChild(root);

相比 HTML,JS 具有更灵活的特性。由于实现了标准的 DOM API,你可以使用前端社区中大多数优秀的前端框架,如 Vue、Rax、React 等等,具体可以参考开发文档

当然,对于一个 SSR 应用,还是推荐使用 HTML 作为入口,具体可以参考开发文档

有限的 CSS 支持

到目前为止,Kraken 还不支持使用层叠样式表(CSS),也就是说你无法使用 .css 文件或者 <style> 标签。修改节点样式的方式是使用内联的 CSS 或者节点的 style 属性。

  1. const div = document.createElement('div');
  2. div.style.color = 'red'; // 使用 style 属性.
  3. div.setAttribute('style', 'color: red; font-size: 16px;'); // 使用内联 CSS Text.

有限的 DOM & 全局 API 支持

在 Kraken 中,并不是所有的 DOM 和全局 API 被支持。抛开浏览器的历史包袱,我们实现了大部分现代的、高频使用的、用户友好的 W3C API。

更多详细的支持列表,可以参考站点的 API 文档

样式能力差异

请参考与浏览器差异文档。

本地存储

在浏览器中,我们经常使用 LocalStorage 进行本地数据的存储,而在 Kraken 中则使用 AsyncStorage 实现本地存储,它提供了更高效的异步 API 以防止 I/O 阻塞 UI 线程,更多信息可以查看异步本地存储