给你的组件分个等级

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

一个前端页面组合多个模块的方式通常有两种：

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

弹框交互

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

若是你使用的是vue，又是思考控制弹框的显示是使用v-if，仍是v-show的时候

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

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

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

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

• element-ui： 针对Dialog、Drawer有作优化，而类似交互场景的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>
复制代码