給你的組件分個等級

在進行平臺前端系統開發時每每單個路由頁面須要繼承多個功能模塊，而咱們的屏幕一次能顯示的內容時有限的，因此針對這個場景對系統首屏優化是有必要的。

一個前端頁面組合多個模塊的方式通常有兩種：

• 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>
複製代碼