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，都會默認會有短暫的延遲執行，因此會形成短暫的間隔

相關標籤/搜索

requestidlecallback

requestanimationframe

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。