<!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>
<script>
const total=100000
const once=20
const loopCount=Math.ceil(total/once)
let countRender=0
const ul=document.querySelector('ul')
function add(){
const fragment=document.createDocumentFragment()
for(let i=0;i<once;i++){
const li=document.createElement('li')
li.innerHTML=Math.floor(Math.random()*100000)
fragment.appendChild(li)
}
ul.appendChild(fragment)
countRender++
loop()
}
function loop(){
if(countRender<loopCount){
window.requestAnimationFrame(add)
}
}
loop()
</script>
</body>
</html>