Taro 小程序 性能优化

手上有个小程序项目，遇到了挺多坑，有关性能方面的，时间间隔一段时间了，突然发现都快忘完了，赶紧在此记录一下，

一 页面加载耗时

这是首次性能检测时页面加载情况：

页面最长渲染居然达到了900多毫秒！！！，看到问题出在setData,去了解了一下原生小程序的setData渲染工作原理，原来setData里面的所有数据都会被转成字符串，然后字符串又转换成JS脚本，然后页面根据JS脚本去渲染页面，所以我们频繁的去更新setData就会造成页面不断的重排重绘，
了解问题所在，就从根源解决问题，第一点就从数据的获取赋值的地方着手，一方面在需要渲染列表的地方用高阶函数map,只返回需要的数据,如：

let list = data.map(item => {
// item 中可能包含很多不需要的字段 如：{id,name,a,b,c,d,c,d,g....}
//而我们只需要id和name 
 return {
     id: item.id,
     name: item.name 
 } 
})
console.log(list)  // 输出 [{id:'xx',name:'xx'}]

另一方面在设置state值时，多个值可以合并设置 如：

this.setState({title:'页面标题'})
this.setState({pageColor:'#fff'})
...
//可以设置为:
this.setState({
title:'页面标题',
pageColor:'#fff'，
...
})

优化成功后，再次检测结果：

很好，有了一百毫秒的进步。。。。
排查了很久，最后通过在不同生命周期去检测执行情况发现，某些生命周期居然执行了两遍，查看state有很多

尝试着把数据的渲染从componentDidShow 中换到componentWillMount中，并把不需要渲染页面的数据单独提出赋值，执行检测结果：

很好，从最初的932ms变成了现在的679，由于时间关系 没有做进一步优化了，后面有时间再来研究一下。

二 其它优化

1 列表渲染
在列表中使用以下代码来实现不同状态的节点有不同的className,会造成页面的state生成很多无用参数：

{
list.map(item=>(
    
))
}

数据量越大，这种无用内容越多，通过测试，我发现以下代码反而渲染性能更优：

   {
list.map(item=>{
return item.type == '1' ? ():()
})
}

页面中 style属性也是如此（图中anonymousState__temp…）

2 ScrollView 相关
静态页面元素或一些model弹窗类组件，尽量不要在ScrollView中使用，因为每次滚动渲染时也会把这些元素渲染一遍，并且会造成页面滑动的卡顿，而在真机（安卓机）中，在ScrollView中的model元素未实现全屏model的效果（亲测），猜测原因（未实验）：业务需要 有把ScrollView的position 设置为absolute或relative;
未使用scrollView 的地方，但有滚动需要的 ，要设置惯性滚动，安卓貌似自带
ios要设置：-webkit-overflow-scrolling: touch

3 自定义底部导航栏的定位问题
自定义底部导航栏时，一般使用类似的如下代码：

  position: fixed;
  left: 0;
  bottom:0;

在部分安卓机型上会出现导航栏并没有实现粘在底部的效果，可以加入：

top:页面高度 - 自定义导航栏高度

目前在出现过问题的某一安卓品牌上亲测有效

4 图片

最初使用的图片很大，图片太大会增加下载时间和内存的消耗，应根据显示区域的大小合理控制图片的大小,最后自己把作为背景的图片压缩了一下来减少渲染耗时，
注意： 1是需要图片质量的压缩 2是需要图片的宽高比像素压缩，如：图片像素with 1200， 但我们一般的手机竖屏宽度不超过500