网站白屏优化
<div v-for=item in 10000><child></child>
</div>
比如要渲染当前页面,会很慢,页面上出现长时间的白屏,因为要渲染10000次child组件。
我们提供的解决方案是
按帧加载Dom。
使用按帧加载就不得不提到
requestAnimationFrame
。
window.requestAnimationFrame(callback),接受一个函数作为参数,在浏览器下次重绘前执行,大约是17毫秒。可以理解成浏览器重绘的回调函数。
<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图,白屏优化方案,可以使用骨架