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

2019-12-04 admin

images (1).jpeg

作者: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,有兴趣的可以关注,每周不定期更新,分享可以增加世界的快乐

[转载]原文链接:https://segmentfault.com/a/1190000021190430

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80401.html

文章标题:小程序开发指南之性能优化

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
node.js调用C++开发的模块实例
如何用C++和node交互,在node的程序中,如果有大数据量的计算,处理起来比较慢,可以用C++来处理,然后通过回调(callback的形式),返回给node。先回顾一下正统的用 C++ 开发 native 模块的方法 #include ...
2017-03-25
回到顶部