<div v-for=item in 10000>
<child></child>
</div>
比如要渲染当前页面，会很慢，页面上出现长时间的白屏，因为要渲染10000次child组件。
我们提供的解决方案是
按帧加载Dom。
使用按帧加载就不得不提到
requestAnimationFrame。
window.requestAnimationFrame(callback)，接受一个函数作为参数，在浏览器下次重绘前执行，大约是17毫秒。可以理解成浏览器重绘的回调函数。文章来源：https://www.toymoban.com/news/detail-729205.html
<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图，白屏优化方案，可以使用骨架文章来源地址https://www.toymoban.com/news/detail-729205.html
到了这里，关于网站白屏优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
