开发 | 提升 1 倍运行效率!有了这些技巧,你的小程序也能快如闪电

作者:邬泉

微信小程序的一大优势体现在「小」上面,小而轻的微信小程序,能给用户带来非常良好的体验。

但是要想将小程序轻快的特点发挥到极致,开发者还是要多下一点功夫。

本期,知晓程序(微信号 zxcx0101)就来为你介绍一些,能够增强小程序用户体验的手段和方法。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发经验大全。

1. 压缩小程序包体积

从点击打开一个微信小程序,到第一个页面加载完,通常情况下需要 2 到 3 秒的时间。

这 2 到 3 秒的时间里,小程序完成了数据包的加载与同服务器间的通讯。自然地,在加载数据包时,数据包的大小与加载时间成正相关。

微信小程为了提高加载速度,刻意将数据包的大小限制到了 2 MB(最早为 1 MB)。我们要做的是在 2 MB 的基础下,进一步去减少数据包的大小。

具体来说,不要在数据包里放置大的图片及其他文件,也不用过多的图片来当 UI,还可以缩减代码的行数等。通过这些方法,最高可减少约 1 秒的加载时间哦!

2. 大图片和长图片

在微信小程序的页面里不要放置大的图片。

在小程序里,进行页面加载或跳转时,通常页面已经出现或者跳转完成,但大体积图片往往还正在加载。这样会严重影响用户体验。

如果小程序以提供高清大图为主题的话,像上述的「必应观世界」。我们可以选择在页面里显示适当压缩的图片,再在 wx.previewImage() 中显示原图即可。

在微信小程序里放置长图片,会出现在页面插入大图片类似的情况。

不同的是,长图片的 mode 通常只选择 aspectFit,然后在小程序加载时,就会出现以下结果:这个图片会以被压扁了的形式先出现,之后再按正常的形式出现。(不知道的还以为乱码了呢!)

对于这类图片,建议将其截短,分段在小程序中进行展示

3. 不要滥用 setData

setData 是微信小程序里运用得非常频繁的一个接口,在数据绑定后对数据进行赋值是常用方法。语法如下:

微信小程序的视图层和逻辑层相互独立,setData 是跨层实现数据的传递,中间过程复杂且耗时。

使用一些 setData 不严谨的小程序,当执行下拉刷新或滑动页面时,你会感觉到明显的卡顿感。这是由于此时小程序在频繁 setData,程序无法将用户操作实时传输到逻辑层,逻辑层的结果就更加无法传输给视图层了。

但这并非代表只要使用 setData 就会造成卡顿、要放弃它,我的建议是:合理运用事件来触发 setData,切莫利用时钟频繁赋值,且不要一次性 setData 太多值,容易造成卡顿。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏React Native开发圈

React Native学习资源全家桶

目前网络上已经存在几个汇总的资源,已经汇总了很多优秀文章、控件和开源APP。先分享下目前存在的汇总资源。star数量是截至2017-11-07的数量。

1322
来自专栏魏艾斯博客www.vpsss.net

解决宝塔面板环境的 wordpress 网站页面 404 错误

9954
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-01介绍

码云项目页:https://gitee.com/scooplolwiki/toh-6

872
来自专栏全栈之路

90版坦克大战

涉及知识:ts、h5(canvas),nodejs,java,游戏开发(声音系统、图像系统、行为系统(按键绑定行为)、简单精灵、精灵动画、简单界面绘制),ps(...

2011
来自专栏iOSDevLog

Unity 3D 开发《王者荣耀》:英雄攻击创建按钮源码:https://github.com/iOSDevLog/ArenaOfValor

3956
来自专栏吴裕超

浅析前端渲染与服务端渲染

背景知识:   「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;   「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA ...

9534
来自专栏IMWeb前端团队

微信小程序初体验

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 微信小程序初体验 1 背景 微信小程序刚出来的时候就想玩玩了,个人开发者开...

1.3K11
来自专栏汇智网教程

angular教程推荐

2582
来自专栏小白课代表

为效率而生——真正的系统收藏夹 所有碎片信息&临时文件 All in One

课代表有一个烦恼,就是平时需要看的东西太多了,看到好的东西就想收藏起来,浏览器里看到?加个书签。QQ看到的?转发到小号。微信看到的?收藏。或者老师发来了要求,需...

1132
来自专栏小文网

PotPlayer

这个播放器我认为是最好用的,解码库强大,播放流畅,最喜欢的就是可以随时CTRL+C以原大小复制画面帧,还有更多等等等等。

2624

扫码关注云+社区

领取腾讯云代金券