关于前端:requestIdleCallback

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 = 100000000
var value = 0

var 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"})