关于小程序优化的一些建议(小结)

setData

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下 setData 背后的工作原理。

工作原理

小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。

而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。

常见的 setData 操作错误

1. 频繁的去 setData

在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：

  • Android 下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；
  • 渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；

2. 每次 setData 都传递大量新数据

由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程，

3. 后台态页面进行 setData

当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。

图片资源

目前图片资源的主要性能问题在于大图片和长列表图片上，这两种情况都有可能导致 iOS 客户端内存占用上升，从而触发系统回收小程序页面。

图片对内存的影响

图片对页面切换的影响

除了内存问题外，大图片也会造成页面切换的卡顿。我们分析过的案例中，有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。

当前我们建议开发者尽量减少使用大图片资源。

代码包大小的优化

小程序一开始时代码包限制为 1MB，但我们收到了很多反馈说代码包大小不够用，经过评估后我们放开了这个限制，增加到 2MB 。代码包上限的增加对于开发者来说，能够实现更丰富的功能，但对于用户来说，也增加了下载流量和本地空间的占用。

开发者在实现业务逻辑同时也有必要尽量减少代码包的大小，因为代码包大小直接影响到下载速度，从而影响用户的首次打开体验。除了代码自身的重构优化外，还可以从这两方面着手优化代码大小：

控制代码包内图片资源

小程序代码包经过编译后，会放在微信的 CDN 上供用户下载，CDN 开启了 GZIP 压缩，所以用户下载的是压缩后的 GZIP 包，其大小比代码包原体积会更小。 但我们分析数据发现，不同小程序之间的代码包压缩比差异也挺大的，部分可以达到 30%，而部分只有 80%，而造成这部分差异的一个原因，就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好，在压缩较大文件时往往可高达 70%-80% 的压缩率，而如果对已经压缩的资源（例如大多数的图片格式）则效果甚微。

及时清理没有使用到的代码和资源

在日常开发的时候，我们可能引入了一些新的库文件，而过了一段时间后，由于各种原因又不再使用这个库了，我们常常会只是去掉了代码里的引用，而忘记删掉这类库文件了。目前小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。

WXS 模块

每个 wxs 模块均有一个内置的 module 对象。
直接在wxml中引入，可以将写需要转化数据的写进去，防止给setData加负担

使用了过大的 WXML 节点数目

一个太大的WXML节点树会增加内存的使用，样式重排时间也会更长，建议一个页面使用少于1000个WXML的节点，节点树深度少于30层，子节点数不大于60

小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。

所有为了保险起见，采用公共方法和组件

编写公共方法和组件，可以避免重复造轮子。
1.公共埋点方法
2.各种处理js的方法（转https，throttle，formatTime等）
3.公共组件（iphonex兼容组件，倒计时组件等）

需要写个请求队列，如果并发量大于10，则等待请求。

埋点的坑

埋点用公共方法，页面曝光pv埋点放入onshow生命周期中更加准确。

setData注意点

1. 频繁的去 setData
存在将未绑定在 WXML 的变量都不需要传入 setData。

2. 每次 setData 都传递大量新数据，可局部更新

this.setData({
  list[index] = newList[index]

})

3. 后台态页面进行 setData

当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。也就是上文提到的不要忘了clearTimeout、clearInterval。

到此这篇关于关于小程序优化的一些建议(小结)的文章就介绍到这了,更多相关小程序优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Android分享微信小程序技巧之图片优化

    Android分享微信小程序技巧之图片优化

    前言 小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳.于是小菜整理了一个简单的小方法处理一下图片! 微信规定,分享小程序展示的图片应该在 128KB 以内,同时图片默认展示比例为 5:4,这样小菜默认的图很多是竖直的图,只会展示一部分. 遮挡部分图片 规定 小菜尝试了图片的[等比压缩][非等比压缩]和[不压缩],效果依旧不合适,图片所占位置默认以横向方向填充满分享出的布局

  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法. 1.小程序传统的回调处理 例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用

  • 微信小程序 轮播图实现原理及优化详解

    微信小程序 轮播图实现原理及优化详解

    轮播图的创建 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加wx:for-item="it"来改变默认的item名 优化 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 小程序多图列表实现性能优化的方法步骤

    写这篇文章的缘由: 最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题. 从小程序提供的性能检测面板分析, 确定是图片元素占用了过多内存导致. 因为本人之前主要是做桌面端应用开发和原生app开发, 没有太顾及过移动端图片的内存占用问题. 这次既然遇到了, 也就趁这个机会学习一下其优化的技巧. 什么造成的性能问题 简单的来说: DOM节点过多 && 图片节点过多 DOM节点过多会造成更多的内存占用. 按照目前的微信小程序限制, 内存占用500M以上会出现卡顿, 甚至闪退. 如果列表

  • 详解微信小程序调起键盘性能优化

    在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析. 需求分析 最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态.从需求来看,我们应该在onReady函数中调起键盘,因为onReady函数是在页面初次渲染完成时被调用.但是在实践中我们发现,对于一些配置不好的手机,其加载页面速度较慢,在onReady函数调用时页面并没有渲染完毕,就会导致placeholder和input组件位置错乱的现象.其本质

  • 微信小程序开发注意指南和优化实践(小结)

    前言 转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚. 一.WXML 不要换行写,有空格不行 微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行. wx:if vs hidden 一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗.因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好. 图片处理 1.大图片也会造成页面切换的卡顿 有一部

  • 微信小程序性能优化之checkSession的使用

    一直发现小程序好慢,尤其是第一次打开的时候.因为第一次会涉及到登录的授权,官方文档是这么说的: 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session 的标识,而应该自己派发一个 session 登录态(请参考登录时序图). 所以后台存储了一个session标识,和微信的session_key 是独立的.而且业务自身的session也有设置有效期,和微信的session_key 是

  • 小程序绑定用户方案优化小结

    在做过一系列小程序之后,对小程序的登陆鉴权的流程也有一定的理解,类似于 B 端小程序自不必说,要用户信息手机号地址可以一把梭,做一个引导页面进行判断然后要求用户给与绑定,用户自然不会多说什么,毕竟这是企业级别应用.但是当涉及到 C 端小程序时候.想让用户进行绑定,就势必要给与用户便利.这里我列出一些我觉得较为不错的小程序应用方案以供参考. 预先绑定类 该类小程序在使用之前就需要绑定用户信息.常见于线下门店类功能性小程序.线下操作时有大量的优惠活动来支持小程序的流量. 功能介绍 例如 便利蜂.之前

  • 关于小程序优化的一些建议(小结)

    setData setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口.在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理. 工作原理 小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境.在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道.当前,视图层和逻辑层的数据传输,实际上通过两边提供的evaluateJavascript 所实现.即

  • mpvue开发音频类小程序踩坑和建议详解

    这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时遇到的一些问题和给出一些建议. 在 Linux 上开发小程序 在公司电脑装了双系统,日常用的是 Ubuntu 系统,Linux或Mac的开发环境对前端相对来说会友好一些.微信小程序官方的开发者工具只有 Windows 和 Mac 版本,所以这就尴尬了. 不过还好,发现已经有大神在Git

  • 微信小程序渲染性能调优小结

    网页的性能优化是前端开发老生常谈的热门话题,其中微信小程序因其页面双线程架构设计,所以性能优化的手段跟传统的 H5 应用不太一样.今天主要介绍一下微信小程序页面双线程架构的特性给页面渲染带来的一些影响,以及应对的一些渲染性能调优策略.为了叙述方便,下文会把微信小程序简称为小程序. 小程序的双线程架构 与传统的浏览器Web页面最大区别在于,小程序的是基于 双线程 模型的,在这种架构中,小程序的渲染层使用 WebView 作为渲染载体,而逻辑层则由独立的 JsCore 线程运行 JS 脚本,双方并不

  • Android分享微信小程序失败的一些事小结

    Android分享微信小程序失败的一些事小结

    前言 小菜这两天接入分享微信小程序的入口,本来很简单的几行代码,可最后搞得我头昏脑胀.微信小程序官网上的接入方式已经说的非常清楚,可在小菜自己实践的过程中,却始终不成功.其实真的很简单,而卡住了还真的是很头疼,因此特意记录一下. 集成方式 build.gradle 中添加 compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+': 在需要调用分享功能的入口添加如下代码,如果配置参数都正常的话基本就可以正常分享了: public

  • 详解wepy开发小程序踩过的坑(小结)

    H5内嵌富文本编辑器 微信小程序没有支持的原生富文本组件,可以通过web-view内嵌H5实现富文本编辑功能,起初使用的是wangEditor富文本编辑器,因为项目使用的是七牛云存储,wangEditor在pc端上传是没有问题的,但在在移动端调用不了本地图片,于是换了个功能强大二次开发较强的富文本编辑器vue-quill-editor,更多请参考官方文档, 基于此对上传图片进行二次开发. 七牛云 + elementUi + vue-quill-editor上传图片和富文本 $ npm insta

  • 详解从0开始搭建微信小程序(前后端)的全过程

    前言 有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来.方向是让用户可以集中获取优质的电影.音乐.书籍.游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据是权威和客观的,能最大化的减少用户获取优质资源的成本. 下面讲解的可能不会太详细,毕竟想呈现的是一个

  • iOS 真机调试微信小程序

    iOS 真机调试微信小程序

    平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低. 小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览.远程调试和设置体验版本三大部分功能.除了这三种方式之外,我们还可以使用真机远程调试,在 iOS 上可以通过实现 Safari 调试代码,安卓中可以安装 X5 内核的 inspect 版本,开启 Chrome remote debug 模式.使用真机调试不仅可以发现开发者工具

  • 小程序实现点击动画效果

    小程序实现点击动画效果

    本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下 今天接到一个小程序优化需求,要实现一个点击的动画效果 考虑实现方法,使用css的transition属性来进行实现,点击的时候给css新增一个active属性,就能实现这个效果了 // html  <view class="list-box">  <view class="list {{item.check ? 'active' : ''}}" wx:for="

随机推荐