小程序开发指南之性能优化

作者:HerryLo

将从代码层面项目层面,聊一聊微信小程序的性能优化问题,希望有所帮助。也是自己最近的一个总结。(前置知识:微信小程序的视图层是WebView支持,逻辑层是JSCore支持,逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面)详见:小程序的运行环境

下面的内容不论是使用Taro框架开发,还是微信小程序原生开发,都是适用的。

代码层面

通过代码细节提升性能,而且在这方面,空间是非常大的。对于比较早期的小程序项目,由于代码细节方面没有过多的考虑,也导致了开发出的小程序非常的消耗性能。下面将提到的一些点,不论是正在开发的项目,还是在维护的项目,都会有一定的帮助。

👇· 拆分组件

对于小程序的项目,由于野蛮式开发,不会太多的考虑组件拆分。当然对于关注组件开发的公司,肯定会在早期就做好一定的规划。做好组件的拆分,可以保证组件的复用,大量的减少重复的代码。(组件开发的思想,目前基本适用所有的前端开发项目)。如何有效拆分组件方法,详见[译] 你是如何拆分组件的?

👇· 图片压缩

在微信小程序项目中,不会在本地存放图片,基本都是网络图片,而网络图片的下载,需要消耗一定的时间和内存。较小图片的大小,可以提升小程序的渲染时间,减少内存的占用。通过CDN静态资源服务器获取图片资源,添加图片压缩规则,可以极大的提升性能。

👇· 减少不必要数据

减少data中的亢余数据。不必要数据,传入setData会造成不必要的性能消耗。建议:不要直接将接口数据全部保存在data中,只有页面需要渲染的 数据,才通过setData进行挂载,非必要的数据可以直接挂载在当前页面page的this上。

let data = {
    list: [item, item, item, item, item],
    title: "xxxx",
    path: 'xx/xx/xx'
}
// ❌不好的处理
this.setData({
    data: data
})

// 👌好的处理 只挂载必要参数
this.setData({
    dataList: data.list
})
this.title = data.title
this.path = data.path

👇· 避免频繁setData

// ❌不好的处理
this.setData({
    count: 1
})
this.setData({
    count: 2
})
this.setData({
    count: 3
})

三次setData会被全部触发嘛?是的,会被全部调用

在微信小程序中,并不像react,把多次操作合并。每次setData的过程,就是一次JSCore逻辑层 和 webView视图层的交互。过多的交互,会降低小程序的用户体验。例如 滑动监听滚动,操作setData,非常的消耗性能,可以考虑使用节流函数,降低调用频率。

官方给出的说法是:setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。来修改一下上面的代码。

// 👌好的处理
let data = { count: 1 }
data.count = 2;
data.count = 3;
this.setData(data)

👇· webView组件开发

灵活性非常强的页面,同时需要多端使用,建议使用微信小程序提供的webView组件,套用h5页面进行页面开发,避免重复开发。当微信小程序包过大之后,也建议使用h5页面替换开发。详见webView 组件

<web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/>

项目层面

通过微信小程序项目配置来提升加载性能,下面的方案可以有效的解决问题,不过也要试情况而定。

👇· 拆分小程序

在包过大的情况下下,可以进行小程序包的拆分,详见:分包加载。对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。如果业务庞大,也可以单独抽离一个新的小程序。

👇· 分包预加载

采用分包配置之后,分包加载也是需要时间的。对于一些比较常用,或者比较重要的页面,可以采取分包预加载的手段,来完成分包的提前下载,减小分包载入的时间。详见 分包预下载

👇· 尽量升级版本库

注意基础版本库的问题,在合适的前提下升级版本库,尽量将版本库升级为最新版本。因为版本库升级为最新,可以有效避免很多问题。

目前随着各大公司业务的不断迭代,小程序的体积不断真大,小程序渐渐的不在小。请让小程序尽量的小起来,发挥它小的作用。希望以上内容可以帮到你。

更多内容:

小程序个人开发指南

ps: 微信公众号:Yopai,有兴趣的可以关注,每周不定期更新,分享可以增加世界的快乐

原文链接:segmentfault.com

上一篇:你可能不知道的15个 Git 命令
下一篇:webpack less/css文件中的background:url()编译后是 url([object module])

相关推荐

  • 高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

    前言 事实上, 只有的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余的最终用户体验。

    1 年前
  • 高德APP启动耗时剖析与优化实践(iOS篇)

    前言最近高德地图APP完成了一次启动优化专项,超预期将双端启动的耗时都降低了65%以上,iOS在iPhone7上速度达到了400毫秒以内。就像产品们用后说的,快到不习惯。

    2 个月前
  • 首页白屏优化实践

    前言 自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范...

    9 个月前
  • 首屏优化图片懒加载

    图片懒加载有几个重要的点: 1. 图片 的src放到其他属性上,加统一的类名,供选择和 加样式,比如: 2. js懒加载函数 有几个重点: 1. 获取可视区域的高度,ie9 用win...

    2 年前
  • 飞冰 - ICE Design Pro 使用指南

    写在前面: 目前在飞冰中,我们提供了 21 套模板(后续会持续的增加),可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目,然后基于区块快速搭建页面进行二次开发,减少各种环境...

    2 年前
  • 项目优化杂记

    本项目源码均可在 这里(https://github.com/HuangXiZhou/webpackcdndemo) 找到。 之前公司的官网项目静态文件都是放在静态服务器中,这其中的弊端就不赘述了。

    2 年前
  • 项目中数组循环的一个优化案例

    最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000,甚至更长,所以导致筛选之后的...

    3 个月前
  • 顶级测试框架Jest指南:跑通一个完美的程序,就是教出一群像样的学生

    facebook三大项目:yarn jest metro,有横扫宇宙之势。 这个项目的宗旨为:减少测试一个项目所花费的时间成本和认知成本。 ——其实,它在让你当一个好老师。

    2 年前
  • 面试官:来,给本官讲讲前端页面性能优化及错误处理有哪些?(看你懵不懵)

    题目:提升页面性能的方法有哪些? 1. 资源压缩合并,减少HTTP请求 2. 非核心代码异步加载异步加载方式 异步加载区别 3. 利用浏览器缓存 缓存的分类 缓存原理 4. 使用CD...

    2 年前
  • 面相 vue 开发者的 react 入坑指南

    吾辈的博客原文:https://blog.rxliuli.com/p/b6... 场景 问:为什么吾辈要使用 React? 答:React 拥有更加庞大的生态,以及对 TypeScript 的更好...

    4 个月前

官方社区

扫码加入 JavaScript 社区