1-服务器代码
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.get('/list', (req, res) => {
let list = []
let num = 0
for (let i = 0; i < 100000; i++) {
num++
list.push({
src: 'https://img1.baidu.com/it/u=337195790,3454436041&fm=253&fmt=auto&app=138&f=PNG?w=300&h=500',
text: `我是${
num}号嘉宾`,
tid: num,
})
}
res.json(list)
})
app.listen(2000, () => {
console.log('http://127.0.0.1:2000')
})
2-前端代码
css
<style>
* {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
overflow: auto;
}
.item {
display: flex;
padding: 10px;
}
img {
width: 150px;
height: 150px;
}
</style>
html
<div id="container"> </div>
js
/* 1-直接渲染页面直接卡死 */
const renderList = async () => {
console.time('列表时间')
const {
data: list } = await axios.get('http://127.0.0.1:2000/list')
// 获取container对象
const container = document.getElementById('container')
var str = ''
list.forEach(item => {
str += `<div class='item'><img src="${
item.src}" /><span>${
item.text}</span></div>`
})
container.innerHTML = str
console.timeEnd('列表时间')
}
renderList()
/* 2-分页渲染 */
const renderList = async () => {
console.time('列表时间')
const {
data: list } = await axios.get('http://127.0.0.1:2000/list')
// console.log(list);
const total = list.length // 总条数
const page = 0 // 当前第一页
const limit = 200 // 每页显示200条
const totalPage = Math.ceil(total / limit)// 计算得到总页码数
const render = (page) => {
if (page >= totalPage) return // 表示超出最大页码数或者理解成最后一页
setTimeout(() => {
//每次循环渲染200条
/*
page=0 [0,200]
page=1 [200,400]
...
一直page>总页码数就终止递归次循环
*/
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]// 获取200条中的每一项
const div = document.createElement('div')// 动态创建一个divv元素
div.className = 'item'// 定义一个name
div.innerHTML = `<img src="${
item.src}" /><span>阿牛哥:${
item.text}</span>` // 给每一项添加属性
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page)
console.timeEnd('列表时间')
}
renderList()