JS 分时函数性能优化验证 性能提升500%
2022-01-10 本文已影响0人
cinoliu
1.背景
在一些开发场景中，我们可能会一次性向文档中注入上千个节点，在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消，结果往往会让浏览器卡顿或吃不消，解决方案之一便是使用分时函数
<!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>分时函数</title>
</head>
<body>
<div>分时函数性能优化验证</div>
<script>
// 一次性添加到页面
const dataSource = new Array(10000).fill('DYBOY');
// 创建DOM
const createDiv = (text = 'DYBOY') => {
const div = document.createElement('div');
div.innerHTML = text;
document.body.appendChild(div);
}
// 批量添加
for (data of dataSource) {
createDiv(data);
}
</script>
</body>
</html>
1.png
分时函数的思想就是将一次性执行大量重复操作时，分批次时间周期的进行，这样就可以不阻塞页面首屏的渲染，避免出现假死现象。
<!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>分时函数</title>
</head>
<body>
<div>分时函数性能优化验证</div>
<script>
// 一次性添加到页面
const dataSource = new Array(10000).fill('DYBOY');
// 创建DOM
const createDiv = (text = 'DYBOY') => {
const div = document.createElement('div');
div.innerHTML = text;
document.body.appendChild(div);
}
// 批量添加
// for (data of dataSource) {
// createDiv(data);
// }
/**
* 分时函数
* @param dataSource - 数据数组
* @param fn - 分时执行的函数
* @param count - 每分段时间内执行函数的次数
* @param duration - 分段时长，单位ms
**/
const timeChunk = (dataSource, fn, count = 1, duration = 200) => {
let timer;
const start = () => {
const minCount = Math.min(count, dataSource.length);
for(let i = 0; i < minCount; i++) fn(dataSource.shift());
}
return () => {
timer = setInterval(() => {
if (dataSource.length === 0) return clearInterval(timer);
start();
}, duration);
}
}
const newRender = timeChunk(dataSource, createDiv, 100, 300);
newRender();
</script>
</body>
</html>
2.png
通过对比可以看到后者经过分时函数的首屏里scripting的时间只有425ms，前者是2410ms，通过分时函数使得首屏性能提节省了500%的时间，非常可观。
