给你的组件分个等级

1,508 阅读3分钟

在进行平台前端系统开发时往往单个路由页面需要继承多个功能模块,而我们的屏幕一次能显示的内容时有限的,所以针对这个场景对系统首屏优化是有必要的。

一个前端页面组合多个模块的方式一般有两种:

  • 1,弹框交互
  • 2,多模块组合成页面

弹框交互

针对这种形式我们的优化主要关注点在dialog组件的内部实现

如果你使用的是vue,又是思考控制弹框的显示是使用v-if,还是v-show的时候

结论是:直接使用这两个都不合适。

  • v-if 有首屏优化效果,但在状态切换时组件不停的销毁和创建这个过程是缓慢的
  • v-show 大家都知道他是通过display:none来控制显示隐藏的,在首屏渲染时用户完全看不到的组件也会被实例化

具体的实现策略: 首次渲染通过v-if控制,之后状态切换通过v-show控制

来看看目前比较流行的几个ui框架的情况。

  • element-ui: 针对DialogDrawer有做优化,而相似交互场景的tab并没有
  • iview:...... 好像都没有任何想法
  • ant-design:不得不说确实很优秀,各种细节完美。

多模块组合成页面

这种场景就复杂点:

  • 这个模块优先级比较低,等关键模块渲染渲染完成再渲染
  • 这个模块依赖于api数据,等拿到后端数据后再渲染
  • 这个模块处于页面底部,等模块进入屏幕视窗再渲染
  • 这个模块某些情况下不展示,等满足条件再渲染

上面这些场景我们在业务开发中无时无刻在接触到,为了提供统一的解决方式和减少重复性的工作lower-component为此类场景给出统一封装

给组件设定等级,组件按等级渲染

lower-component通过给组件划分等级来确定组件的渲染时机源码地址

基本使用

1,默认提供两个level策略

  • async——内部使用setTimeout做延迟渲染
<lower-component level="async">
  <your-component />
</lower-component>
  • viewport——被降级的组件进入屏幕视窗渲染
<lower-component level="viewport">
  <your-component />
</lower-component>

2,自定义策略

level赋值为custom,custom指定具体的策略实现。

  • 提供一个函数,并返回promise(promise状态改变时渲染)
// stage.vue
<template>
  <lower-component level="custom" :custom="getList">
    <your-component />
  </lower-component>
</template>
<script>
  export default {
    methods: {
      getList () {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, 1000)
        })
      }
    }
  }	
</script>
  • 提供一个Boolean值(Boolean为真时渲染)
// stage.vue
<template>
  <lower-component level="custom" :custom="isLoading">
    <your-component />
  </lower-component>
</template>
<script>
  export default {
    data () {
      return {
        isLoading: false
      }
    }
    created () {
      this.$http.get('/list').then(() => {
        this.isLoading = true
      })
    }
  }	
</script>