百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

解密Weex如何实现性能与动态兼得

toyiye 2024-06-06 22:12 16 浏览 0 评论

2016年Qcon大会首日,阿里巴巴资深总监、淘宝移动平台、阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源。此消息一出,群情汹涌,在座的程序猿、攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力。

在第二天的主题分享会上,阿里巴巴前端开发专家赵锦江和技术专家徐凯对Weex进行了深入的解析。以下为演讲速记整理后的成文。

阿里怎么看待移动开发?

目前的移动开发者面临的最大痛点就是面对极其复杂的环境,对此,庄卓然给出一个公式,移动开发的复杂度=应用数量×平台数量×要适配的各种各样的机型。

如何解决这个问题呢?在解决问题之前,首先要对移动开发的未来有着精准的研判。

阿里认为,移动开发的未来必定更加平衡,也就是说必须是性能与动态兼得,如此,才能够满足未来用户的需求。另外,移动开发在未来也必定是开放互联的状态,移动互联网将来肯定是基于更加大众化的技术体系,没有平台之间的隔阂,而且简单易用。

所以,阿里结合移动开发的现状并围绕其愿景推出了Weex解决方案。

事实上,在去年的双11活动中,Weex就得到了实战的验证,且表现不俗。时至今日,Weex已经被阿里技术团队多次运用,并“创造”出各种丰富的场景,整体的表现非常优异。

把移动端所有界面拆分成各个page,然后中间设置有路由的控制逻辑,同时,将移动端各种各样的能力通过各种API提供给开发者。这是阿里对移动开发模型的理解。

Weex通过标准化的东西,包括HTML、CSS和JS这些前端非常快速易用好学的语法作为开发体验,提供给开发者。另外,Weex的语法设计尊重还Web的标准。

Weex的工作原理

Weex设计之初就考虑到在三端(iOS、安卓和H5)上能够得到展现。在最上面的DSL,阿里一般称之为Weex文件(.we),通过Transformer转换成js-bundle,再部署到服务器,这样服务端就完成了。在客户端,第一层是JS-Framework,最后到RenderRengine。

输入是Virtual DOM输出是native或者H5 view,还原成内存中的树型数据结构,再创建view,把事件绑定在view上,把view基本属性设上去。Weex Render会分三个线程,不同的线程负责不同的事情,让JS线程优先保障流畅性。

Weex的性能、扩展性以及可用性究竟怎样呢?

性能方面,阿里对Weex做了多次压测。在加载时间、帧率、内存消耗、CPU占用(包括静默和峰值)等多个方面,Weex都表现得非常出色。

在谈及性能之时,帧率和加载时间几乎都会被提及,但是往往忽略了一个事实,那就是Native UI开发中通常没有JS资源在服务器端加载。Weex会把JS内置到客户端里,以免除下载的问题,从而更为有效地提升性能。

兼容性是Weex非常重视的问题,对此,阿里是这样来解决的。

首先是单测保证,包括JS和H5的单测,保证最基础的UT(Unit Test)本身所带来的含义。

其次是UI的自动化,分为两个部分,一是截图对比,将最终产生的结果和意料中的结果进行图形对比;二是Layout Results,包括Model以及其他的布局类的,通过基本的信息完成测试的过程。

在扩展性方面,Weex可以写很多页面,而且通过路由机制帮助开发者将页面进行串联。

Weex已开放内测,可用性方面正在逐步完善。包括Playground、调试工具、脚手架、AppHub、编辑器等多个方面,一些工作已经完成就绪,绝大部分工作将在5、6月份完成。

最后,是Weex的三种工作模式。

1.全页模式

目前支持单页使用或整个App使用Weex开发(还不完善,需要开发Router和生命周期管理),这是主推的模式,可以类比RN。

2.Native Component模式

把Weex当作一个iOS/Android组件来使用,类比ImageView。这类需求遍布手淘主链路,如首页、主搜结果、交易组件化等,这类Native页面主体已经很稳定,但是局部动态化需求旺盛导致频繁发版,解决这类问题也是Weex的重点。

3.H5 Component模式

在H5种使用Weex,类比WVC。一些较复杂或特殊的H5页面短期内无法完全转为Weex全页模式(或RN),比如互动类页面、一些复杂频道页等。这个痛点的解决办法是:在现有的H5页面上做微调,引入Native解决长列表内存暴增、滚动不流畅、动画/手势体验差等问题。

另外,WVC将会融入到Weex中,成为Weex的H5 Components模式。

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码