wepy开发微信小程序上存在的优化

一、预加载与欲查询

传统 H5 在启动时，page1.html 只会加载 page1.html 的页面与逻辑代码，当 page1.html 跳转至 page2.html 时，page1 所有的 Javascript 数据将会从内存中消失。page1 与 page2 之间的数据通信只能通过 URL 参数传递或者浏览器的 cookie，localStorge 存储处理。

小程序在启动时，会直接加载所有页面逻辑代码进内存，即便 page2 可能都不会被使用。在 page1 跳转至 page2 时，page1 的逻辑代码 Javascript 数据也不会从内存中消失。page2 甚至可以直接访问 page1 中的数据。

最简单的验证方式就是在 page1 中加入一个 setInterval(function () {console.log(‘exist’)}, 1000)。传统 H5 中跳转后定时器会自动消失，小程序中跳转后定时器仍然工作。

小程序的这种机制差异正好可以更好的实现预加载。通常情况下，我们习惯将数据拉取写在 onLoad 事件中。但是小程序的 page1 跳转到 page2，到 page2 的 onLoad 是存在一个 300ms ~ 400ms 的延时的。如下图：

因为小程序的特性，完全可以在 page1 中预先拿取数据，然后在 page2 中直接使用数据，这样就可以避开 redirecting 的 300ms ~ 400ms 了。

预加载数据

用于 page1 主动传递数据给 page2，比如 page2 需要加载一份耗时很长的数据。我可以在 page1 闲时先加载好，进入 page2 时直接就可以使用。

// page1.wpy 预先加载 page2 需要的数据。

methods: {
  tap () {
    this.$redirect('./page2');
  }
},
onLoad () {
  setTimeout(() => {
    this.$preload('list', api.getBigList())
  }, 3000)
}

// page2.wpy 直接从参数中拿到 page1 中预先加载的数据
onLoad (params, data) {
  data.preload.list.then((list) => render(list));
}

预查询数据

用于避免于 redirecting 延时，在跳转时调用 page2 预查询。
扩展了生命周期，添加了 onPrefetch 事件，会在 redirect 之时被主动调用。同时给 onLoad 事件添加了一个参数，用于接收预加载或者是预查询的数据。

// page1.wpy 使用封装的 redirect 方法跳转时，会调用 page2 的 onPrefetch 方法
methods: {
  tap () {
    this.$redirect('./page2');
  }
}

// page2.wpy 直接从参数中拿到 onPrefetch 中返回的数据
onPrefetch () {
  return api.getBigList();
}
onLoad (params, data) {
  data.prefetch.then((list) => render(list));
}

二、避免页面内引用多余的组件

前端语言大多面向组件开发的，也就是说一个界面通常都是由许多组件组成的，这个观点是没什么问题。但是，如果一个界面里面引用了大量的组件，而其中有一部分在某种情况下不显示（也就是使用过当前页面里的某种条件来选择是否显示某些组件）。这样做，虽然说也体现的是组件化开发，但是对于性能的影响是巨大的。举个例子：如果我们直接将页面里面的布局部分全部删除，只是简单的将组件引进当前文件，然后放进components中，观察编译的代码，wxml文件内容没了，js文件没有任何变化。也就是说，只要你将组件放进components中，必将会将js代码引入。js代码引入，便会去执行组件的生命周期函数（如果某些组件的生命周期函数中存在耗时的操作，而这个组件又不需要显示，岂不是浪费资源影响性能）。
总结一下，wepy组件化开发并没有问题，前提是我们要尽量去保证引进来的组件是需要显示的，否则影响性能。