MDN解释
window.requestIdleCallback()办法插入一个函数，这个函数将在浏览器闲暇期间被调用。这使开发者可能在主事件循环上执行后盾和低优先级工作，而不会影响提早要害事件，如动画和输出响应。函数个别会按先进先调用的程序执行，然而，如果回调函数指定了执行超时工夫timeout，则有可能为了在超时前执行函数而打乱执行程序。
你能够在闲暇回调函数中调用requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。
语法
var handle = window.requestIdleCallback(callback[, options])requestIdleCallback(function(deadline) { // deadline.timeRemaining() 获取浏览器的空余工夫})浏览器空余工夫
页面是一帧一帧绘制进去的，当每秒绘制的帧数达到 60 时，页面是晦涩的，小于这个值时， 用户会感觉到卡顿
1s 60帧，每一帧分到的工夫是 1000/60 ≈ 16 ms，如果每一帧执行的工夫小于16ms，就阐明浏览器有空余工夫
如果工作在残余的工夫内没有实现则会进行工作执行，持续优先执行主工作，也就是说 requestIdleCallback 总是利用浏览器的空余工夫执行工作
例子
<div class="playground" id="play">playground</div><button id="work">working</button><button id="interaction">interaction</button><style> .playground { background: palevioletred; padding: 20px; margin-bottom: 10px; }</style>var play = document.getElementById("play")var workBtn = document.getElementById("work")var interactionBtn = document.getElementById("interaction")var iterationCount = 100000000var value = 0var expensiveCalculation = function (IdleDeadline) { // 浏览器剩余时间大余1ms while (iterationCount > 0 && IdleDeadline.timeRemaining() > 1) { value = Math.random() < 0.5 ? value + Math.random() : value + Math.random() iterationCount-- } requestIdleCallback(expensiveCalculation)}workBtn.addEventListener("click", function () { requestIdleCallback(expensiveCalculation)})// 扭转色彩interactionBtn.addEventListener("click", function () { play.style.background = "palegreen"})