<html>
<head>
<title>框架使用示例</title>
<style>
#app {
height: 300px;
width: 200px;
overflow: hidden scroll;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button onclick="alert(123)">按钮</button>
<ul>
列表
<li v-for="(item,key) in list" :key="key">{
<!-- -->{item}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
// v-for循环的数据数组
list: [],
// 接口请求回来的完整数据
data: [],
// 渲染总数
total: 0,
// 设置每次插入显示的DOM数量，根据情况自己设置
once: 20,
// 当前已经渲染DOM的总数
countOfRender: 0
},
created() {
this.fetchData();
},
methods: {
fetchData() {
// 模拟接口请求
new Promise((resolve, reject) => {
setTimeout(() => {
let res = { total: 100000 };
res.data = [];
for (let i = 0; i < res.total; i++) {
res.data.push(i);
}
resolve(res);
}, 100);
}).then((res) => {
this.data = res.data;
this.total = res.total;
this.loop();
});
},
// loop() {
// // 用setTimeout模拟懒加载，用requestAnimationFrame提高渲染效率和动画流畅度
// setTimeout(() => {
// // 每次只渲染once条数据
// const temp = [];
// for (let i = 0; i < this.once; i++) {
// // 当DOM渲染完就退出
// if (this.countOfRender >= this.total) return;
// temp.push(this.data[this.countOfRender]);
// this.countOfRender += 1;
// }
// this.list = this.list.concat(temp);
// console.log(this.list.length)
// this.loop();
// }, 700);
// }
loop() {
// 游览器单线程，一次性渲染大量的DOM，会阻塞用户操作，阻塞CSS渲染，有较长白屏事件等问题
// 所以我们只需要每次渲染少量的DOM不会阻塞用户操作即可解决这些问题
requestAnimationFrame(() => {
// 每次只渲染once条数据
const temp = [];
for (let i = 0; i < this.once; i++) {
// 当DOM渲染完就退出
if (this.countOfRender >= this.total) return;
temp.push(this.data[this.countOfRender]);
this.countOfRender += 1;
}
this.list = this.list.concat(temp);
console.log(this.list.length)
this.loop();
})
}
}
});
</script>
</body>
</html>
console