渲染十万条数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul></ul>
<!-- 方法2: 懒加载+分页的方式,分段渲染,逐帧渲染 -->
<script>
console.time();
const total = 100000;
let ul = document.querySelector('ul');
const once = 20;
const loopCount = total / once;
let countHasRender = 0;
function add() {
const fragment = document.createDocumentFragment();
for (let i = 0; i < once; i++) {
const li = document.createElement('li');
li.innerText=Math.floor(Math.random()*total);
fragment.appendChild(li);
}
ul.appendChild(fragment);
countHasRender+=1;
loop();
}
function loop(){
if(countHasRender<loopCount){
window.requestAnimationFrame(add);
}
}
loop();
</script>
<!-- 方法3: 懒加载,防抖,监听 scroll 事件,分页
懒加载和分页方式一般用于做长列表优化, 类似于表格的分页功能,
具体思路就是用户每次只加载能看见的数据, 当滚动到底部时再
去加载下一页的数据.-->
<script>
</script>
<!-- 方法5:虚拟滚动技术也可以用来优化长列表, 其核心思路就是每次只渲染可视区域的列表数,
当滚动后动态的追加元素并通过顶部padding来撑起整个滚动内容,实现思路也非
常简单. -->
<!-- 方法1:普通方式渲染:性能卡顿,时间久 -->
<!-- <script>
console.time();
const total = 100000;
let ul = document.querySelector('ul');
function add() {
const fragment = document.createDocumentFragment();
for (let i = 0; i < total; i++) {
const li = document.createElement('li');
li.innerText = Math.floor(Math.random() * total);
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
</script> -->
</body>
</html>