requestAnimationFrame与requestIdleCallback

时间 2019-12-10

标签 requestanimationframe requestidlecallback 繁體版

原文原文链接

一、requestAnimationFrame测试：html

测试模板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：bash

(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);
}());复制代码

测试结果：app

叙述：咱们打开谷歌浏览器开发者工具的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：ui

(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);
}());复制代码

测试结果：spa

叙述：咱们打开谷歌浏览器开发者工具的Performance进行测试，在接近1100ms处也开始计算重绘，和requestAnimationFrame的同样，不会形成卡顿，但从测试图上能够发现，重绘是不连续渲染，这种差别在html显示会更加明显（能够拷贝代码进行尝试）

三者差别说明：setTimeout和requestAnimationFrame都是异步进行的，读写操做分开进行，因此不会形成卡顿，而requestAnimationFrame操做会监听每一帧，在每一帧都会渲染一次，而setTimeout则不会监听每一帧，即便不定义setTimeout，都会默认会有短暂的延迟执行，因此会形成短暂的间隔