uniapp性能,

  uniapp性能,

  UNI-APP开发(仿饿)开发课程:进入学习

  相关学习推荐:微信小程序开发教程

  经过多次论证和几个月的研发,我们重写了部分Vue底层并重构了uni-app框架,实现了对微信性能翻倍及更多Vue语法的支持。

  

背景

   uni-app前期借用了mpvue,实现了微信小程序的快速兼容。感谢美团点评团队对开源社区的贡献!

  随着使用uni-app的开发者越来越多,业务复杂度越来越高,很多开发者抱怨uni-app支持的vue语法越来越少,有些场景存在性能问题(尤其是页面上有复杂组件的时候)。这些问题其实都是mpvue的实现机制造成的。我们将简单地以复杂组件的性能为例进行说明。

  在mpvue/wepy等框架诞生之初,微信小程序并不支持自定义组件,因此无法开发成组件。为了解决这个问题,mpvue/wepy创造性地将用户编写的vue组件编译成WXML中的模板,从而变相实现了组件开发的能力,提高了代码的复用性,这在当时的技术条件下是一个很棒的技术方案。但是这样的方案也会导致Vue组件中的数据被编译成Page中的数据,更新组件的数据也会基于路径映射调用Page.setData。尤其是在组件多、数据量大的页面中,每个组件的局部更新都会引起页面级别的全局更新,产生很大的性能开销。

  后来微信推出的自定义组件,其实是支持组件级别的局部更新的。经过验证,我们发现组件级的数据更新相对于页面的全局更新有显著的性能提升。

  另外mpVue在Vue层的vnode比较和数据diff计算不完整,也会消耗一些性能。

  基于这些原因,我们开始重写微信的框架。

  

新版特性

  

性能翻倍

  新版uni-app对Vue.js的一些底层实现进行了调整和重写,主要包括:

  基于小程序自定义组件的Vue.js组件化开发。Vue层取消了vnode,相比更彻底的diff计算,setData()的通信数据更少。重写新框架后,我们构建了以下测试模型:

  构造一个列表接口,其中每个列表项都是一个自定义组件的上拉和加载触发数据更新。每次本地读取静态数据,屏蔽网络差异触发数据更新计时开始,页面渲染完成,计时结束。求其时间差作为比较指标(耗时,单位为毫秒)。然后,分别使用新旧框架,在同一部手机(vivo nex)上进行多次测试,求其平均值,得到如下结果:

  组件旧框架(mpvue)新框架200204 ms 129 ms 400280 ms 1139 ms 80341 ms 180 ms 1000653 ms 196 ms 196 ms 1从测试数据来看,新框架在复杂页面下性能翻倍!尤其是对于数据更多、组件更复杂的页面,性能会有所提升!

  温馨提示:我们也对目前几个主流的跨端框架(如taro、wepy、chameleon等)做了性能测试。),而uni-app的运行结果同样抢眼。测试代码和测试结果将于近期公开,接受大家的评判。请继续关注。

  

更多 Vue 语法支持

  同时,我们增强了uni-app编译器以支持更多Vue语法,如下所示:

  支持过滤器过滤器支持更复杂的JavaScript渲染表达式,支持模板内方法中函数的使用,支持v-html(富文本解析)组件,支持原生事件绑定,如:@tap.native

体验方式

  。目前微信上已经开发了新框架,其他小程序和app的编译器还是老版本。我们发布了团内测,邀请开发者在微信上抢新鲜体验。

  开发者创建vue-cli和uni-app项目如下,编译发布到微信小程序:

  # npm脚本#全局安装vue-cli$ npm install -g @vue/cli#创建一个uni-app项目,系统会提示您选择项目模板。第一次建议选择hello uni-app模板$ vue Create-p DCloudio/uni-preset-vue my-project #进入项目目录$ cd my-project# dev模式,编译预览$ npm run dev:mp-weixin# build模式,发布打包$ NPM run build:MP-weixin copy code新老版本切换

  为了不影响旧项目,uni-app group beta目前内置了新旧框架,默认使用旧框架。开发人员可以通过配置manifest . JSON-MP-weixin-using components节点启用新的编译框架,如下所示:

  //manifest.json

  {

  //.

  /*特定于子视图的相关性*/

  mp-weixin :

   UsingComponents:true //启用新框架编译,默认情况下为false。

  }

  }复制代码。如果你使用新的vue语法,请注意只有H5和微信支持这些新语法。编译到其他平台时,应该使用条件编译。

  小贴士:

  为保证自定义组件的兼容性,建议运行到微信开发者工具时,将微信基础库设置为最新版本。在体验新框架时,如果有任何问题或建议,请提交给github。问题

现状与未来

  。春节后,Uni-App 1.6版本发布,增加了字节跳动小程序平台支持。至此,实现了一套代码和7端发布!7个终端包括:App(iOS/Android)、小程序(微信/支付宝/百度/字节跳动)和H5平台,如下图所示:

  大量开发者满怀热情地涌入uni-app社区。目前uni-app交流群有几十个。下图是一个500人的QQ交流群,创建2天就满了。开发者的热情可见一斑。

  目前每天新增uni-app项目(含测试项目)数千个,案例过万,其中部分在uniapp.dcloud.io/case.发现相比Taro等一体化微信小程序的案例,uni-app的跨端案例要丰富得多。

  在小程序的跨端框架中,uni-app可能是用户数量最多、跨端案例最丰富的前端框架。

  近日,为了激活Vue的多终端开发生态,uni-app与mpvue团队联合举办的插件开发大赛正式开始!欢迎开发者积极参与。一边做轮子,一边造福社区,再拿个奖(iphone Xs Max,4K显示器等。都是很多奖品),而且你会一举拿下_ _的。点击了解详情。

  接下来,uni-app团队将继续全速运行,在以下几个方面快速提升:

  uni-app的新框架兼容其他平台。uni-ui跨端ui库进行了细化。App端引入更多原生渲染,推广部门可以体验到周边生态的进一步改善。比如行业模板、跨端统计等“为开发者而生”不是口号,而是定位。

  Uni-app团队将一如既往的为开发者解决开发痛点,提高开发效率!

  了解更多其他优秀文章,请关注uni-app专栏~

  以上是uni-app让微信性能翻倍的妙招细节。请多关注我们的其他相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: