性能体验优化相关

[TokenYangForever]

骨架屏(skeleton screen)

简介

• 骨架屏(skeleton screen)，它不是对响应速度的优化而是在用户体验上优化，让用户感觉'更快'。传统的加载过程都是一个菊花loading转圈圈，或者进度条什么的。
• 而在页面结构比较固定的情况下，使用骨架屏用户体验就比较好了，可以给人一种页面'预加载'的感觉，其实这个时候并没有获取到数据或者渲染完成。因为用户看到骨架屏后可以预感到页面内容，在它们实际出现之前，下面是一个使用骨架屏的示意图：
  

样式的实现

• 骨架屏的实现可以用css来写，也可以直接切图用图片，完成后还可以加上一些css动画效果。

逻辑的实现

• 在设计的时候需要注意的就是页面的状态，一般来讲只需要三种状态，这里结合我们的app项目(使用的vue框架)说明一下：会在vue实例的data中定义一个表示页面状态变量，模板根据这个状态来显示不同的内容。
• 1."预渲染"状态，这个阶段还没有调取接口，首先把页面的vue实例初始化完成，这个时候只显示骨架屏、一些不需要调接口获取的数据渲染出的内容、固定写死的内容。并且最好把所有的交互禁止掉(免得出错)，就是尽管有的按钮已经渲染出来了，但是点击是没有效果的。
  
• 2.正常状态，这个阶段在调完接口获取到数据之后，修改页面的状态，把获取到的数据渲染成内容替换掉之前骨架屏的位置，页面其他内容不动，这个时候交互逻辑恢复正常。
  
• 3.异常状态，这种状态就是针对接口报错或者其他错误出现的时候，可根据需要显示特定错误页面的内容。