大前端二三事——Weex初探

何为Weex

引用官方的解释:

Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。
Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

如何上手编写一个Hello world,可以参考Weex官方开发集成文档,这里不再赘述。

Weex工作原理

引用一张官方的示意图:
Weex工作原理
由上面的解释可以知道,虽然是跨平台方案,但开发主要使用Web前端的开发技术。虽然由Web语言和相关技术开发,但是Weex最终渲染呈现给用户的都是原生控件。相比官方的原理示意图,我总结了更直观的呈现流程,如下图所示:

由上图可以看出,Weex主要包括三个部分:Web前端做业务开发;打包发布;客户端获取并渲染呈现。

上面说到,集成Weex后,最终渲染呈现的都是原生组件,那和原生开发的有什么差异呢?
下面就以Android平台集成Weex为例,对比Weex版本的Hello world和原生版本的Hello world,看一下两者的差异。

view层级结构

以最简单的Hello world为例,Weex的view层级:
在这里插入图片描述
一个原生Hello world页面的层级:
在这里插入图片描述
通过对比可以看到,虽然Weex最终渲染成了原生页面组件,但是其视图层级,明显比原生开发的页面要深的。这或多或少还是会对性能有一些影响的。

安装包体积

可以看到,对于一个Hello world而言,由于集成了Weex SDK,Weex版本的apk体积要大几M。
在这里插入图片描述
但是!这个对比只是在纯demo层面的。原生应用,在野蛮生长阶段,apk体积增长会比较明显;而Weex,随着业务量增加,由于大部分逻辑代码是通过服务器动态加载的,虽然apk的体积也会有增长,但会比原生的要稍微好一些。

和前端的同事试用下来,前端同学的意见主要还是坑略多,而且针对问题的社区、资料也还没那么完善。对原生开发者而言,主要还是性能体验上有较明显的差异。而这个差异,主要来自于移动端Weex SDK的JS和原生渲染引擎的性能损耗。这个差异,虽然无法消除,但正如官方的宣传,Weex的一大优势,是跨平台,这对很多用户还是很有吸引力的,为跨平台统一提供了新的可能性。所谓有得必有失,鱼与熊掌不可得兼。

发布了26 篇原创文章 · 获赞 7 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/China_Style/article/details/99624152