Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞

开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞

作者头像
知晓君
发布于 2018-06-29 09:05:31
发布于 2018-06-29 09:05:31
5.6K0
举报
文章被收录于专栏:知晓程序知晓程序

文 | vic yao

小程序科普类的文章已经很多了,这里讲下针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。

1. 提高页面加载速度——前端永恒不变的话题

在小程序这个环境下,怎样提高页面加载速度呢?

这个问题很大,我把问题再改得具体一点:如何缩短从用户点击某个链接,到打开新页面的这段时间?

这里抛一个核心关键点:

从页面响应用户点击行为开始跳转,到新页面 onload 事件触发之间,存在一个延迟,这个延迟大概在 100-300 ms 之间(不同机型会有差异)。

我们可以利用这段延迟,预先发起新页面所需要的网络请求。这样一来,就节省了 100-300 ms(或者一个网络请求的时间)。

那么,如何利用这段 gap,提高页面加载速度呢?说白了,就是实现跨页预加载数据的功能。但而这种跨页面的调用,很容易把逻辑搞得非常复杂。

所以,我们的目标就是:将预加载的逻辑隐藏于无形中,不增加任何的页面间耦合,以及开发复杂度。

下面以腾讯视频小程序为例,讲解下技术实现。

小程序首页:

当用户点击海报图后,会执行以下代码:

接下来程序会加载播放页:

播放页主要代码:

可以看到,不管是外部页面的调用还是实际逻辑的实现都非常简洁。

在第二个页面中,我们扩展了 Page 的生命周期函数,增加了 onNavigate 方法。该方法会在页面即将被创建、但还没开始创建的时候执行。

老司机也许会发现这里有点蹊跷。在首页点击的时候,播放页根本就没有创建。对象都不存在,怎么访问到里面的方法呢?

这里就要说下微信的页面机制。

在小程序启动时,会把所有调用 Page() 方法的 object 存在一个队列里。每次页面访问的时候,微信会重新创建一个新的对象实例(实际上就是深拷贝)。

也就是说,在前一页面在执行点击响应事件的时候,新页面的实例还没创建,这时候调用的 onNavigate 方法,实际上是 Page 对象的原型(小程序启动时候创建的那个)。

而接下来马上要被创建的新页面,又是另外一个 object。所以,在 onNavigateonLoad 方法中,this 指针指的不是同一个对象,不能把临时数据存储在当前 object 身上。

因此,我们封装了一对全局的缓存方法:$put()$take()

为了通用性,Page 上用到的公共的方法,比如 $route$put$take 等,都定义在了 Page 的基类里面。

基类还同时保存了所有页面的 list,这样就可以做到根据页面名调用具体页面的 onNavigate 方法。

当然,并不是每个页面都需要实现 onNavigate 方法,对于没有定义 onNavigate 方法的,$route 函数会跳过预加载环节,直接跳转页面。

所以对于开发者来说,不需要关心别的页面实现了什么。

2. 用户行为预测

在上面的例子中,我们实现了用户主动点击页面,提前加载下一页面数据的方法。

而在某些用户的行为可以预测的场景下,我们可以在用户还没点击的时候,就预加载下个页面的数据

这样就可以让下个页面秒开,进一步提升体验的流畅性。

继续以腾讯视频小程序为例,主界面分为 3 个页卡(大部分小程序都会这么设计)。通过简单的数据分析,发现进入首页的用户有 50% 会访问第二个页卡。

所以,预加载第二个页卡的数据,可以很大程度提高用户下个点击页面的打开速度。

同样,先看看代码实现。首页预加载频道页的姿势:

频道页的实现方法:

跟第一个例子类似,这里定义了一个 $preLoad() 方法,同时给 Page 扩展了一个 onPreload 事件。

页面调用 $preLoad() 后,基类会自动找到该页面对应的 onPreload 函数,通知页面执行预加载操作。

跟第一个例子不同,这里预加载的数据会保存在 storage 内。

因为用户不一定会马上访问页面,而把数据存在全局变量会增加小程序占用的内存。微信会毫不犹豫的把内存占用过大的小程序给杀掉。

也许对于大部分有 app 开发经验的同学来说,更普遍的做法是先让页面展示上次缓存的数据,再实时拉取新数据,然后刷新页面。

这个方法在小程序上,体验并会不太好。原因是小程序的性能以及页面渲染速度都不如原生 app。

将一个大的 data 传输给视图层,是一个很重的操作。因此不建议采用这种方法。

3. 减少默认 data 的大小

刚刚说到,页面打开一个新页面时微信会深拷贝一个 Page 对象。

因此,应该尽量减少默认 data 的大小,以及减少对象内的自定义属性

有图有真相:

以一个带有 100 种属性的 data 对象为测试用例,在 iPhone 6 上,页面的创建时间会因此增加 150ms。

4. 组件化方案

微信没有提供小程序的组件化方案(相信一定在实现中)。但开谈不说组件化,写再多代码也枉然。这里演示一个简单的组件化实现。

以腾讯视频播放页为例,页面定义如下:

其中,P() 函数是自定义的基类。这是一个非常有用的东西,可以把所有通用的逻辑都写在基类里面,包括 PV 统计,来源统计,扩展生命周期函数,实现组件化等。

函数第一个参数是页面名称,作为页面的 key。第二个是 page 对象,其中扩展了一个 comps 数组,里面就是所有要加载的组件。

以播放器组件 /comps/player/index.js 为例:

组件的定义跟一个普通 Page 对象一模一样,有 data 属性,以及 onLoadonShow 等事件,也有页面响应的回调方法。WXML 模板里定义的事件和 JS 事件一一对应。

基类做的事情,就是把这些组件对象的属性和方法复制到 Page 对象上(浅拷贝)。

其中 data 属性会 merge 到一起。而微信预定义的生命周期函数(包括自己扩展的),则封装成队列按序执行。

比如,当系统调用 onLoad 方法时,实际上是执行了所有组件的 onLoad 方法,最后再执行 PageonLoad

以上说的,都是逻辑层部分。至于 WXML 模板和 WXSS 部分,就要手工 import 过去了。

WXML:

WXSS:

5. 其他

虽然小程序已经足够小巧,但启动速度还是有那么 2-3 秒,无法做到秒开。我尝试对小程序的启动时间做优化,但没有找到多少有价值的优化点。

也许,这里面大部分时间,都消耗在了微信跟服务器通信的过程中。还是期待微信可以不断迭代优化。

原文地址:https://github.com/ysbcc/miniapp

往期精选文章

本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:

  • 在微信后台回复「1228」,获取全网首本《微信小程序入门指南》。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序入门教程之四:API 使用
上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本。有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面。本篇就介绍怎么使用 API。
ruanyf
2020/11/04
3.2K0
微信小程序入门教程之四:API 使用
微信小程序之提高应用速度小技巧
小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。
WeTest质量开放平台团队
2018/10/29
1.2K0
微信小程序之提高应用速度小技巧
WeTest质量开放平台团队
2017/03/10
5K0
详解:小程序页面预加载优化,让你的小程序运行如飞
如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术,可以缩短用户的等待时间,极大的提升用户的使用体验。今天我来具体的讲下这个技术实现方式。
极乐君
2020/09/08
8.6K0
详解:小程序页面预加载优化,让你的小程序运行如飞
小程序架构
小程序上线以来,一向被称为“便携版”的APP,关于两者之间的区别,无外乎小程序相对轻便、开发成本低,下面让我们来看一下小程序的“庐山真面目”!
只喝牛奶的杀手
2019/08/26
1.9K0
小程序架构
微信小程序底层框架实现原理|万字长文
我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情
虎妞先生
2022/10/27
4.8K0
微信小程序底层框架实现原理|万字长文
小程序开发-生命周期
为了更好地理解生命周期的概念,我们可以将其与生活中的实例进行类比。例如,一个人的一生就可以看作是一个生命周期:
小白的大数据之旅
2025/01/12
870
小程序开发-生命周期
探索微信小程序的奇妙世界:从入门到进阶
https://cloud.tencent.com/developer/article/2465647?shareByChannel=link
忆愿
2024/12/01
2160
探索微信小程序的奇妙世界:从入门到进阶
微信小程序-开发入门(一)
微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值得我们学习的,技术上面如果了解React的话,会发现他们在组件化上面有很多雷同之处。说白了,小程序就是基于微信平台的H5轻应用,微信将系统底层功能(设备、位置、媒体、文件等)和微信自身功能(登录、支付、分享等)封装成相应API供小程序调用。 自己根据官方文档写过一个DOME,借助和风天气开放API接口,实现天气
小古哥
2018/03/08
2.6K2
微信小程序-开发入门(一)
小程序页面管理与跳转
原文链接:https://godbasin.github.io/2018/09/08/wxapp-page-and-navigate/
李成熙heyli
2018/11/14
2.9K0
小程序页面管理与跳转
「大众点评点餐」小程序开发经验 04:逻辑层
继上次谈到了视图层开发经验,本期,知晓程序(微信号 zxcx0101)想要和大家分享大众点评点餐小程序开发中,逻辑层开发的经验。
知晓君
2018/08/01
7910
「大众点评点餐」小程序开发经验 04:逻辑层
小程序开发项目实战:在线学习平台
随着教育行业的数字化转型,在线学习平台成为了学习者的重要选择。通过微信小程序,开发者可以为用户提供高效、便捷的在线学习体验。本文将通过实例分析,指导你开发一个简单的在线学习平台小程序,涵盖项目需求分析、架构设计、技术实现及优化等方面。
LucianaiB
2025/01/28
1700
小程序开发的40个技术窍门,纯干货!
A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件
极乐君
2019/07/01
1.1K0
小程序页面的渲染机制
小程序作为一种轻量级的应用程序,其开发框架在实现功能和性能的平衡上面临挑战。为了保证用户获得流畅的体验,理解小程序页面的渲染机制是非常重要的。通过掌握小程序的渲染过程,开发者能够优化页面加载速度,提升用户体验。本文将详细解析小程序的页面渲染机制,探讨其中的关键流程,并结合实际示例分析如何优化渲染过程。
LucianaiB
2025/01/28
890
微信小程序开发全流程:从注册到上线的完整指南
这种说法不能说不真实,只能说肯定不是这么简单的事情。毕竟广告收入的多少,归根结底还是取决于用户量,不可能随便做个小程序,就能吸引大量用户来看广告。
苏琢玉
2025/03/13
4870
微信小程序开发全流程:从注册到上线的完整指南
前端-小程序开发实践总结
css样式不能引用本地图片资源,只能引用线上资源(background-image),引用本地图片资源只能用<image>标签。
grain先森
2019/03/29
1.5K0
前端-小程序开发实践总结
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
微信小程序作为一个轻量级的应用平台,为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例,详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤,你将轻松掌握微信小程序的开发技巧,为用户打造一款实用且美观的新闻阅读应用。
陆业聪
2024/07/23
3940
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
微信小程序函数处理之保姆级讲解
在使用Page()构造器注册页面时,需要使用生命周期函数,包括onLoad()页面加载时生命周期函数、onShow()页面显示时生命周期函数、onReady()页面初次渲染完成时生命周期函数、onHide()页面隐藏生命周期函数和onUnload()页面卸载生命周期函数。
淼学派对
2022/11/20
1K0
微信小程序函数处理之保姆级讲解
小程序开发-页面事件之上拉触底实战案例
在实现这个小程序实战案例的过程中,我们遵循了以下六个核心步骤。这些步骤不仅涵盖了基础的开发流程,还融入了一些优化技巧,以提升用户体验和性能。
小白的大数据之旅
2025/01/10
960
小程序开发-页面事件之上拉触底实战案例
【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。
一时两无
2018/06/08
3.2K3
相关推荐
微信小程序入门教程之四:API 使用
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档