页面渲染分析

[douzi8]

页面渲染3种情况，

1. 全屏转圈圈，接口完成，直接渲染（默认情况）
2. 先渲染出来一部分页面（比如用户中心首页），接口完成，填充数据上去而已
   • PageView类新增preRender方法，在onCreate里面提前渲染界面
   • 骨架渲染

开发建议

1. 在h5环境下面，url参数里面包含?pause=1， 就会自动停止渲染首屏
2. 如果一个接口对页面渲染不是那么重要，需要强制在ajaxGen里面自行catch

   *ajaxGen () {
   // 获取活动人数, 如果获取失败，强制返回0
   let getUsers = yield service.request().catch(() => {
       return 0
   })
   }

3. 局部loading + 出错重试

   vueLink () {
   let data = {
   // 1: loading, 2:正常渲染 3: 渲染失败
   bannerStatus: 1
   }
   }

   <div v-if="bannerStatus === 2">
   数据正常渲染
   </div>
   <template v-else>
   <loading v-if="bannerStatus == 1" :height="1.2"></loading>
   <placeholder v-else :text="'领券失败, 点击重试'" :height="2.08" @retry="retryAction"></placeholder>
   </template>