SOURCE

// 同步队列 阻塞
// 微队列 阻塞
// 宏队列 卡顿
function _runTask(task, callBack) {
    // 兼容差一些
    // requestIdleCallback(idle => {
    //     const timeRemaining = idle.timeRemaining()
    //     if (timeRemaining > 0) {
    //         task()
    //         callBack()
    //     } else {
    //         _runTask(task, callBack)
    //     }
    // })
    const startTime = Date.now()
    requestAnimationFrame(() => {
        const timeRemaining = Date.now() - startTime
        if (timeRemaining > 16.6) {
            task()
            callBack()
        } else {
            _runTask(task, callBack)
        }
    })
}

function runTask(task) {
    return new Promise(resolve => {
        _runTask(task, resolve)
    })
}

function test(){
    const start = Date.now()
    for(var i =0 ;i<=1000;i++){
        runTask(()=>{
             for(var i =0 ;i<=1000;i++){}
        })
    }
    console.log(Date.now()-start)
}

<div class="loader"></div> 
<button onclick="test()">执行任务</button>

 .loader {
     width: 40px;
     height: 40px;

     background-color: #f1c40f;
     /* 设置颜色 */
     animation: spin 2s linear infinite;
     /* 应用动画效果 */
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     /* 初始状态为不旋转 */
     100% {
         transform: rotate(360deg);
     }
     /* 结束时完全旋转一周 */
 }