1. html rendering
through requestAnimationFrame(), a series of dom retakes and redraws can be gathered together for rendering. Compared with setTimeout and setInterval, the consumption of cpu and gpu is greatly reduced. For some businesses that only need to display without other operations, Good to use this
<!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>
2. Table big data loading in vue
can currently be implemented through scrolling monitoring, but I am lazy and have not written, so I recommend a few more useful plug-ins
-
1.vxe-table
-
2.umy-ui
I prefer to use the former of the above two, I feel that the rendering speed is faster, only personal experience
3. table big data in react
I have to say that ant Design is really powerful, you can directly use the virtual table provided