当前位置: 首页 > Web前端 > HTML

requestIdleCallback

时间:2023-03-27 22:46:20 HTML

MDN解释说window.requestIdleCallback()方法插入一个函数,该函数将在浏览器空闲时调用。这使开发人员能够在主事件循环上执行后台和低优先级工作,而不会影响动画和输入响应等延迟关键事件。函数一般按照先进先出的顺序执行。但是,如果回调函数指定了执行超时超时,则可能会打乱执行顺序以便在超时之前执行函数。您可以在空闲回调函数中调用requestIdleCallback()以在下一次通过事件循环之前安排另一个回调。语法varhandle=window.requestIdleCallback(callback[,options])requestIdleCallback(function(deadline){//deadline.timeRemaining()获取浏览器空闲时间})浏览器空闲时间页面是逐帧绘制的,当每秒绘制帧数达到60,页面流畅。小于这个值时,用户会感觉卡顿1s60帧,每帧分配的时间为1000/60≈16ms。如果每帧执行时间小于16ms,说明浏览器有空闲时间。如果任务没有在剩余时间内完成,则停止任务执行,先继续执行主任务。也就是说,requestIdleCallback总是利用浏览器的空闲时间来执行任务。示例playground

workinginteractionvarplay=document.getElementById("play")varworkBtn=document.getElementById("work")varinteractionBtn=document.getElementById("interaction")variterationCount=100000000varvalue=0varexpensiveCalculation=function(IdleDeadline){//浏览器剩余时间大于1mswhile(iterationCount>0&&IdleDeadline.timeRemaining()>1){值=Math.random()<0.5?value+Math.random():value+Math.random()iterationCount--}requestIdleCallback(expensiveCalculation)}workBtn.addEventListener("click",function(){requestIdleCallback(expensiveCalculation)})//改颜色interactionBtn.addEventListener(“点击”,函数(){play.style.background=“palegreen”})