requestAnimationFrame与requestIdleCallback

最新推荐文章于 2024-04-22 12:05:56 发布

weixin_34293911

最新推荐文章于 2024-04-22 12:05:56 发布

阅读量153

点赞数

原文链接：https://juejin.im/post/5cb42a8bf265da039257d5ae

版权

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，都会默认会有短暂的延迟执行，所以会造成短暂的间隔