网站白屏优化

网站白屏优化

<div v-for=item in 10000>
   <child></child> 
</div>

比如要渲染当前页面，会很慢，页面上出现长时间的白屏，因为要渲染10000次child组件。

<template>
<div v-for="(item, index) in data" :key="item.id">
   <div v-if="index <= current">
     ...
   </div>
</div>
</template>
<script>
export default {
	data() {
	    return {
	      current: -1
	    };
	 },
	mounted() {
	this.defer()
	},
	methods:{
	     defer(){
	       this.current++;
	       // 更新动画
	       if(this.current < this.data.length){
	         requestAnimationFrame(this.defer())
	       }
	     }
	}
}
</script>

Echarts图，白屏优化方案，可以使用骨架