前往小程序,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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
typecho启用php7.0数据库连接错误解决
PHP版本切换引起Typecho博客访问错误,500 Database Query Error。
梦溪
2021/08/09
9310
什么是服务器?
一个服务器 是一种计算机程序或设备,提供由其他程序或设备,被称为请求的服务或资源的客户 。这种通过网络或设备将服务器连接到客户端的模式 称为客户端-服务器模型。
梦溪
2021/08/05
2.5K0
宝塔面板下phpMyadmin曝502错误,无法正常使用
前几天修改博客界面,由于本地只有很少几篇测试文章,对内容溢出的测试不完全,虽然复制了一堆无用的内容在里面进行测试。今天就想到把服务器上的数据和本地同步一下。
世纪访客
2018/08/02
5K0
宝塔面板下phpMyadmin曝502错误,无法正常使用
Django博客开发教程-Python零基础开发网站<一>
Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。
梦溪
2021/08/09
1.1K0
一款简洁的Typecho主题 仿制主题Splity博客主题
Typecho是一个由中国团队自行开发的开源的博客程序。它基于PHP5构建,并支持多种操作系统(Linux,Unix,BSD,Windows等)、 服务器(Apache,Lighttpd,IIS,Nginx等)和数据库(Mysql,PostgreSQL,SQLite等)。相比较Wordpress,Typecho的主题和插件目前数量不多,但相对于Wordpress的臃肿,Typecho响应非常的快,同时也很简洁,适合新手搭建博客使用。
梦溪
2021/08/09
2.6K0
不会建站?10分钟教你零基础快速搭建个人网站!
轻量应用服务器(Light server)是一种内置应用型镜像或系统型镜像的小规格云服务器, 绑定适配大小的磁盘和带宽,为中小型企业和个人用户提供官网搭建、web应用搭建、云上学习和测试等场景的服务。
网络安全自修室
2022/12/06
2.5K0
不会建站?10分钟教你零基础快速搭建个人网站!
解决小程序的图片路径和mysql数据库访问的问题
一.问题过程现象描述: 1,在mysql数据库正常访问的时候,图片路径访问失败(mysql先用80端口测试,之后用的443端口): 之前是打开服务器目录下的图片链接报错是404: image.png 2.关闭80端口之后,mysql数据库也不能正常访问: ①后来在服务器命令行中,查看占用的端口的进程: netstat -alnp | grep 80 kill -9 删除进程号 image.png ②打开服务器目录下的图片链接报错是503: image.png
用户5875349
2020/01/11
3.2K0
解决小程序的图片路径和mysql数据库访问的问题
完整的 Django 零基础教程|初学者指南 - 第 1 部分 转自:维托尔·弗雷塔斯
今天,我将开始一个关于 Django 基础知识的新教程系列。这是开始学习 Django 的完整初学者指南。材料分为七个部分。我们将详细探讨所有基本概念,从安装、开发环境的准备、模型、视图、模板、URL 到更高级的主题,如迁移、测试和部署。
梦溪
2021/08/09
1.1K0
从购买服务器到网站上线的全过程-完全攻略(面向小白)
必备知识:国内的服务器需要备案,包括ICP域名备案和公安备案。而国外的服务器不需要备案。 如果你的域名是国内平台买的,那么请买国内的服务器,如果你的域名是国外平台买的,那么请买国外的服务器(当然了,域名也能转)
huolong
2023/09/16
9520
从购买服务器到网站上线的全过程-完全攻略(面向小白)
宝塔部署java web_除了宝塔面板还有什么
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说宝塔部署java web_除了宝塔面板还有什么,希望能够帮助大家进步!!!
Java架构师必看
2022/06/22
1.6K0
宝塔部署java web_除了宝塔面板还有什么
宝塔爆出高危漏洞 未授权访问phpmyadmin对数据库进行攻击
2020年8月23日,SINE安全监测中心,监测到宝塔官方发布了漏洞补丁更新,该宝塔漏洞会导致phpmyadmin无需密码就能访问,并且能够对数据库进行增删改查等操作,由于宝塔Linux7.4.2版本和Windows6.8版本存在未授权访问漏洞,很多站长朋友们的网站遭到删库。见到同行因为这一漏洞被删库,搞得悲痛欲绝,吓得站长们赶紧按照BT官方的提示去更新了,有些站长还没等更新完,也遭到了删库。
技术分享达人
2020/08/24
1.6K0
服务器安全策略
最近很多站长频繁遇到服务器被入侵的问题,其实都是由于很多站长没有安全意识所导致的。 这篇文章就大致介绍一下新手站长怎么防范服务器的入侵。
何叶
2021/08/24
2.8K0
宝塔面板如何切换数据库版本?
最近我想将网站的数据库版本升级,发现宝塔面板可以切换数据库版本。我尝试切换MySQL版本,但是发现并不像PHP版本切换那么简单。
幻影龙王
2023/07/03
2.6K0
宝塔面板如何切换数据库版本?
如何提高服务器、网站安全性
首先端口,大部分厂商现在都有防火墙自主开放端口,没用的端口就不需要开了,别总想着省事一个ALL就全开了,就以普通的ssh22端口来举例,很多人说改端口会安全很多,但其实不然真的要搞你直接挂上扫端口就行了,最好的办法就是需要连接的时候在开启端口,大部分小白其实基本用不到linux命令也就不存在连接 包括宝塔官方说的很多端口都需要开放,但对于很多不需要的端口确实用不到,就比如3306数据库端口,因为很多人用的还都是同一台服务器搭建的环境,数据库也都是通过内网连接,不涉及外网是完全不需要开放的,888端口管理数据库很多人也不懂数据库表之类的,只是单纯的建站,不懂也就直接阻断就行了
洛叶的Blog
2023/04/17
1.2K0
如何提高服务器、网站安全性
宝塔Linux控制面板FTP无法连接的解决办法
最近发现我云主机的FTP登陆不上,获取不了网站目录,帐号密码都对还是登录失败,还有什么被动模式、主动模式、默认模式都不管用,没办法看来是不能使用8U ftp了,于是乎开始使用FlashFTP,填写IP地址,端口,帐号密码,duang~~~还是进不去,什么情况,难道不是FTP的问题么?
李洋博客
2021/06/15
3.1K0
完整的 Django 零基础教程|初学者指南 - 第 2 部分 转自:维托尔·弗雷塔斯
Django 安装了一个简单的 Web 服务器。在开发过程中非常方便,所以我们不需要安装任何其他东西就可以在本地运行项目。我们可以通过执行命令来测试它:
梦溪
2021/08/09
9800
【网站优化经验】利用可视化面板释放服务器性能
宝塔Linux面板是提升运维效率的服务器管理软件,支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。 有30个人的专业团队研发及维护,经过200多个版本的迭代,功能全,少出错且足够安全,已获得全球百万用户认可安装。
幻影龙王
2021/09/11
4.6K0
【网站优化经验】利用可视化面板释放服务器性能
宝塔面板7.4.2及Windows面板6.8数据库鉴权漏洞 – 官方发布紧急安全更新
据了解,此次更新是为了修复phpmyadmin未鉴权,可通过特定地址直接登陆数据库的严重Bug。存在安全漏洞的面板据悉为linux面板7.4.2版本,Windows面板6.8版本。(就是宝塔的程序员缓存了phpmyadmin的密码  /pma 未授权访问,前提是你在此之前需要从宝塔面板自动登录过phpmyadmin!!!)
陌涛
2020/08/25
1.6K0
宝塔面板7.4.2及Windows面板6.8数据库鉴权漏洞 – 官方发布紧急安全更新
如何在 Ubuntu 20.04 上安装 Go
Go有时也称为“Golang”,是 Google 于 2012 年发布的一种开源编程语言。Google 的目的是创建一种可以快速学习的编程语言。
梦溪
2021/09/23
1.5K0
轻量云 & 宝塔,拿捏自建博客
由于OpenCloudOS是CentOS的替代,所以使用官网提供CentOS的命令。
花花Binki
2024/09/09
2240
轻量云 & 宝塔,拿捏自建博客
推荐阅读
相关推荐
typecho启用php7.0数据库连接错误解决
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档