小程序开发完成后根据体验评分报告优化小程序

小程序开发完成后可以用开发工具中体验评分工具，通过操作页面来生成页面体验分析报告，包括性能、体验、最佳实践三个方面具体分析页面之中存在的问题和需要优化的地方。

上面是体验评分的入口，点击运行，然后操作页面，操作完点击生成报告就可以了。

这是优化前生成的体验报告评分

下面分别从这三个方面对项目进行优化:

性能优化

1. 页面节点太多

uniapp官方文档:

页面加载时一次性渲染过多的节点会影响页面加载速度，造成页面卡顿。

优化： 在加载长列表时采用分页的方式，一次加载10条数据，在用户滚动的时候动态加载数据。

2. 图片优化

uniapp官方文档上：

优化：尽量用与视图显示大小匹配的图片，图片太小看上去会很模糊，图片太大会造成页面卡顿。

体验优化

1. 图片宽高显示

小程序中使用的服务器图片会和页面中显示的大小尺寸不一致，所以导致页面图片变形...

优化：给image标签加上mode属性

2. 元素滚动

ios中滚动需要开启惯性滚动使滚动更加流畅

优化： 给滚动的元素加上-webkit-overflow-scrolling: touch样式属性

3. 元素点击优化

移动端元素点击区域太小的话，手指点击很难触发点击事件，给用户操作一种不好的体验，所以在元素点击事件区域尽可能的扩大点击事件范围。

优化： 给需要点击的盒子一个大于30 * 30 的尺寸,或者在外面加一个尺寸大于30 x 30 的父盒子，给父盒子绑定点击事件。

最佳实践优化

1. data变量优化

官方的说法是data中的数据每一次变化都会重新渲染视图层页面，如果不是视图层需要响应性渲染在页面中的变量，可以定义在data外面，来减少渲染页面的次数，提升性能。

uniapp官方是这样写的：

优化： 与视图层页面无关的数据定义在页面组件的全局作用域下

问题： 定义在全局作用域下的页面变量在页面销毁后变量的值依旧存在，再次打开页面时的值不是初始化的值，而是最后一次赋值的值，所以要在每次销毁页面的时候重新给变量初始化赋值

   <script>
        let timer = null
        let info = {}
        export default {
            data() {
                return {}
            }，
            onunload() {
                timer = null
                
                info = {}
            }
        }
    </script>

2, 定时器优化

在页面销毁时，因为定时器是全局，并不会随着页面销毁而回收，当不断跳转页面，随着定时器的数量不断增加，会出现内存溢出的情况，导致小程序的闪退。所以要在页面的销毁的时候，手动回收页面中的定时器。

    onunload() {
        timer && clearTimeout(timer)
        
       // or
       
       timer && clearInterval(timer)
    }

3. 样式未使用

页面中存在重复的样式或者有未使用的样式会增加包体积，影响页面加载速度。

优化： 去掉页面中重复或者未用到的样式,减小代码体积。

4. 未使用组件声明

优化后的评分：