第24天 javascript 如何渲染⼏万条数据并不卡住界⾯-CFANZ编程社区

第24天 javascript 如何渲染⼏万条数据并不卡住界⾯

如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏万条都渲染出来，⽽应该⼀次渲染部分 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>

0 条评论