微信小程序代码优化总汇

时间: 2018-11-23阅读: 5326标签: 优化

之前有一篇文章是:微信小程序性能优化入门指南. 主要讲述的是:小程序的加载流程、启动性能优化、首屏加载性能优化、汇渲染性能优化等方面讲解的。这写篇文章的目的,是以开发小程序代码的层面的优化。


1、条件判断将wx:if换成了hidden  

在小程序中使用wx-if,是基于局部渲染的形式。比如wx:if初始渲染条件为false时,框架什么都不会做;只有为真的时候才开始渲染该组件。而使用hidden在初始的时候就会渲染,它的值只是负责该组件的显示与隐藏。因此在切换的时候,wx:if有更高的性能消耗,当我们项目需要频繁切换时,建议把wx:if换成了hidden。


2、页面跳转,请销毁之前使用的资源

小程序一般有多个页面,所有的页面即使拥有直接的webview(渲染层),但是在小程序环境中,它们都是共享同一个js运行环境。这一点区别于常规的H5浏览器环境,浏览器跳转之前页面的js环境是会被自动销毁的,当然单页应用除外哈。

因此我们需要在小程序生命周期onUnload中进行资源的销毁操作,比如当前跳转页面之前,这个页面的定时器。

onUnload: function () {/**监听页面卸载 */ 
      context && context.stop();
},


3、列表的局部更新

在一个列表中,有n条数据,采用上拉加载更多的方式,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果

此时,可以采用setData全局刷新,点赞完成之后,重新获取数据,再次进行全局重新渲染,这样做的优点是:方便,快捷!缺点是:用户体验极其不好,当用户刷量100多条数据后,重新渲染量大会出现空白期(没有渲染过来)

如果采用布局刷新,将点赞的id传过去,知道点的是那一条数据, 将点赞的id传过去,知道点的是那一条数据。 重新获取数据,查找相对应id的那条数据的下标(index是不会改变的),用setData进行局部刷新。

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


4、小程序中多张图片懒加载方案

由于小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误。我在项目中用到的优化方案是:使用scroll-view实现分屏加载,然后给未加载的图片设置默认图片。 

小程序文档中有新增image的lazy-load属性,当值为true时生效,注意:只针对page与scroll-view下的image有效。


5、其他

1、Input状态下隐藏input,应预留出键盘收起的时间,具体情况类似下图当点击页面中的取消按钮,页面输入框和mask会消失,因为输入框会消失,引起键盘收起。此时页面会有明显的抖动重绘。我的解决办法是点击取消后,先让键盘消失(大约500ms),再去隐藏input,体验会好很多  

2、压缩代码,合并雪碧图也都是可以使用的。但在有些情况下,比如特别常用的小图标(自定义tabbar上的图标),建议用base64写在css中,虽然base64解析慢,但比网络加载图片要快的多。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1397

从4个方面优化你的Vue项目

运行时优化:1、使用v-if代替v-show,2、v-for必须加上key,并避免同时使用v-if,3、事件及时销毁。首屏优化:1、图片裁剪、使用webp,2、资源提前请求,3、异步路由,4、异步组件,5、使用轻量级插件、异步插件

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。

34个JavaScript简写优化技术

开发者的生活总是在学习新的东西,跟上变化不应该比现在更难,我的动机是介绍所有 JavaScript 的最佳实践,比如简写功能,作为一个前端开发者,我们必须知道,让我们的生活在 2021 年变得更轻松。

工程架构的优化

client端和server端的配置有重复的地方,优化的手段就是将两个文件中重复的配置项提取出来,然后利用webpack-merge包去合并配置。提取公共的配置到webpack.config.base.js文件

性能优化小册 - React 搜索优化:防抖、缓存、LRU

最近要对 react 项目做重构优化等相关的工作,由于有好长时间没碰 React 了,今天索性把一个基于关键字搜索的 demo 做一下简单优化,在此记录以下。

js的防抖节流优化高频触发

js的防抖就是比如一个水龙头坏了一直在滴水,我们为了节约用水,那么我们会想办法让他不再滴的那么快,这就是防抖。常见的比如scroll,onresize这些高频触发的情况。

webpack常用构建优化总览

读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度,理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录

css性能优化-will-change

will-change通过告知浏览器该元素会有哪些变化,使浏览器提前做好优化准备,增强页面渲染性能。不要将 will-change 应用到太多元素上,如果过度使用的话

通过HTML5 Video来优化动态GIF

网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单。但是GIF图片通常具有较大的体积,就导致网页加载速度变慢,内存使用增加

如何对 React 函数式组件进行优化?

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!