渲染几万条数据并不卡住界面

最新推荐文章于 2023-02-07 11:16:14 发布

笑望灬星辰

最新推荐文章于 2023-02-07 11:16:14 发布

阅读量142

点赞数

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/hu1628299958/article/details/116140463

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

渲染几万条数据并不卡住界面

如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏万条都渲染出来，
⽽应该⼀次渲染部分 DOM ，那么就可以通过
requestAnimationFrame 来每 16 ms 刷新⼀次

<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head> <body>
 <ul>控件</ul>
 <script>
 setTimeout(() => {
 	// 插⼊⼗万条数据
 	const total = 100000
 	// ⼀次插⼊ 20 条，如果觉得性能不好就减少
 	const once = 20
 	// 渲染数据总共需要⼏次
 	const loopCount = total / once
 	let countOfRender = 0
 	let ul = document.querySelector("ul");
 	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);
 		countOfRender += 1;
 		loop();
 	}
 	function loop() {
 		if (countOfRender < loopCount) {
 		window.requestAnimationFrame(add);
 	}
 	loop();
 }, 0);
 </script>
</body>
</html>