微信小程序代码优化总汇

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

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解析慢，但比网络加载图片要快的多。