一、是什么

小程序启动会常常遇到如下图场景:

这是因为,小程序首次启动前,微信会在小程序启动前为小程序准备好通用的运行环境,如运行中的线程和一些基础库的初始化

然后才开始进入启动状态,展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:

  • 下载小程序代码包
  • 加载小程序代码包
  • 初始化小程序首页

下载到的小程序代码包不是小程序的源代码,而是编译、压缩、打包之后的代码包

整体流程如下图:

二、手段

围绕上图小程序的启动流程, 我们可以从加载、渲染两个纬度进行切入:

加载

提升体验最直接的方法是控制小程序包的大小,常见手段有如下:

  • 代码包的体积压缩可以通过勾选开发者工具中“上传代码时,压缩代码”选项

  • 及时清理无用的代码和资源文件

  • 减少资源包中的图片等资源的数量和大小(理论上除了小icon,其他图片资源从网络下载),图片资源压缩率有限

并且可以采取分包加载的操作,将用户访问率高的页面放在主包里,将访问率低的页面放入子包里,按需加载

当用户点击到子包的目录时,还是有一个代码包下载的过程,这会感觉到明显的卡顿,所以子包也不建议拆的太大,当然我们可以采用子包预加载技术,并不需要等到用户点击到子包页面后在下载子包

渲染

关于微信小程序首屏渲染优化的手段如下:

  • 请求可以在页面onLoad就加载,不需要等页面ready后在异步请求数据
  • 尽量减少不必要的https请求,可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
  • 可以在前置页面将一些有用的字段带到当前页,进行首次渲染(列表页的某些数据--> 详情页),没有数据的模块可以进行骨架屏的占位

在微信小程序中,提高页面的多次渲染效率主要在于正确使用setData

  • 不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用
  • 数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据
  • 与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下

除此之外,对于一些独立的模块我们尽可能抽离出来,这是因为自定义组件的更新并不会影响页面上其他元素的更新

各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

三、总结

「小程序启动加载性能」:

  • 控制代码包的大小
  • 分包加载
  • 首屏体验(预请求,利用缓存,避免白屏,及时反馈

「小程序渲染性能」:

  • 避免不当的使用setData
  • 使用自定义组件

参考文献

  • https://juejin.cn/post/6969779451177484296

提高微信小程序的应用速度的更多相关文章

  1. gulp提高微信小程序开发效率

      最近公司要求把一套公众号项目的页面迁移到小程序,也就意味着要重新敲一份代码,不能更繁琐了,为了节省时间,提高迁移效率,就决定自己动手用gulp搭一个简易的小程序框架,再记录一下搭建过程.希望有大神 ...

  2. 微信小程序面试题

    小程序与原生App哪个好? 答: 小程序除了拥有公众号的低开发成本.低获客成本低以及无需下载等优势,在服务请求延时与用户使用体验是都得到了较大幅度  的提升,使得其能够承载跟复杂的服务功能以及使用户获 ...

  3. 微信小程序面试题总结

    A类问题 1 请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App.js 设置一些全局的基础数据等: App ...

  4. 微信小程序开发优化

    一.开发优化一 1.使用Vant Weapp 1.1 什么是Vant Weapp Vant Weapp官网链接 Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应 ...

  5. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  6. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  7. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

  8. 微信小程序基础

    前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...

  9. 微信小程序实例-获取当前的地理位置、速度

    微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var a ...

随机推荐

  1. freeswitch的event事件处理

    概述 之前的文章中,我们讲解了freeswitch的源码基本结构,如何新增一个插件式模块,以及如何在模块中新增一个命令式API接口和APP接口. freeswitch本身是事件驱动的,它可以并发响应多 ...

  2. Linux下sed找出IP中第四位

    ip addr|sed -n '9p'|egrep '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'|sed -nr 's#^.*inet (.*) b ...

  3. SpringSecurity-Shiro-初见

    目录 简介 实战环境搭建 SpringSecurity 认证和授权 权限控制和注销 记住我 Shiro 快速上手 shiro整合mybais 简介 在 Web 开发中,安全一直是非常重要的一个方面. ...

  4. Linux的基础命令(一)

    目录: 一.Linux系统基础 1.shell      2. Linux命令的分类 二.Linux命令行 1.Linux命令行提示符      2.Linux通用命令行使用格式      3.Lin ...

  5. Java学习笔记--常用容器

    容器 1. 出现原因 解决程序运行时需要创建新对象,在程序运行前不知道运行的所需的对象数量甚至是类型的问题. Java中提供了一套集合类来解决这些问题包括:List.Set.Queue.Map 2. ...

  6. bash-completion linux命令补全

    1.有时候用docker run 或者kubectl 想tab补全的时候用不了 这个时候可以安装一个神奇的包bash-completion yum install bash-completion 2. ...

  7. 学生信息管理系统.cpp(大二上)

      #include<iostream> #include<fstream> #include<string> #include<iomanip> #i ...

  8. POJ3061——Subsequence(尺取法)

    Subsequence POJ - 3061 给定长度为n的数列整数a0,a1,a2-an-1以及整数S.求出总和不小于S的连续子序列的长度的最小值,如果解不存在输出0. 反复推进区间的开头和末尾,来 ...

  9. url传参和解决中文乱码

    在A页面把参数传给B页面 index.html?name="张三" 在B页面接收(js) function getQueryString(name) { var result = ...

  10. 学习PHP中的高精度计时器HRTime扩展

    不知道大家还记得在学校的时候体育测试时老师带的秒表吗?当枪声想起时,我们开始跑步,这时秒表启动,当我们跑过终点后,老师会按下按扭记录我们的成绩,这就是一个典型的定时器的应用.今天我们要学习的内容其实就 ...