1、requestAnimationFrame测试：
测试模板html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root>div{
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>测试代码1：不使用requestAnimationFrame：
(function () {
let root = document.getElementById('root');
let divs = [];
for(let i = 0; i< 5000; i++){
let div = document.createElement('div');
divs.push(div);
root.appendChild(div);
}
let setTimer = setTimeout(function () {
divs.forEach(function (item) {
let width = item.offsetWidth;
item.style.width = width - (-10) + 'px';
})
},1000);
}());测试结果：
叙述：我们打开谷歌浏览器开发者工具的Performance进行测试，在接近1100ms处开始计算重绘，红色部分表示浏览器卡顿，原因是计算div宽度时，会损耗大量浏览器性能
测试代码2：使用requestAnimationFrame：
(function () {
let root = document.getElementById('root');
let divs = [];
for(let i = 0; i< 5000; i++){
let div = document.createElement('div');
divs.push(div);
root.appendChild(div);
}
let setTimer = setTimeout(function () {
divs.forEach(function (item) {
let width = item.offsetWidth;
window.requestAnimationFrame(function () {
item.style.width = width - (-10) + 'px';
})
})
},1000);
}());测试结果：
叙述：我们打开谷歌浏览器开发者工具的Performance进行测试，在接近1100ms处也开始计算重绘，会有一点卡顿，但性能提升会很大
测试代码3：使用setTimeout：
(function () {
let root = document.getElementById('root');
let divs = [];
for(let i = 0; i< 5000; i++){
let div = document.createElement('div');
divs.push(div);
root.appendChild(div);
}
let setTimer = setTimeout(function () {
divs.forEach(function (item) {
let width = item.offsetWidth;
window.setTimeout(function () {
item.style.width = width - (-10) + 'px';
})
})
},1000);
}());测试结果：
叙述：我们打开谷歌浏览器开发者工具的Performance进行测试，在接近1100ms处也开始计算重绘，和requestAnimationFrame的一样，不会造成卡顿，但从测试图上可以发现，重绘是不连续渲染，这种差异在html显示会更加明显（可以拷贝代码进行尝试）
三者差异说明：setTimeout和requestAnimationFrame都是异步进行的，读写操作分开进行，所以不会造成卡顿，而requestAnimationFrame操作会监听每一帧，在每一帧都会渲染一次，并且将一帧能做的事全放在了一帧进行处理，而setTimeout则不会监听每一帧，我们没办法自己定义一帧能进行的所有动作，所有在每次setTimeout执行时，可能会有空余的未执行时间
