Question

我遇到了谷歌提出的一个奇怪的功能。它看起来像某种文件就绪功能。我无法理解它。

任何人都可以解释一下吗？

var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;

if (raf) raf(function() { window.setTimeout(someInitFunction, 0); });

else window.addEventListener('load', someInitFunction);

此功能在Google的开发者网站上提出：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Answer 1

首先它将为变量分配requestAnimationFrame函数；

var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;

然后它将检查它是否存在（由浏览器实现）

if (raf){
 // requestAnimationFrame is available to use
 // we can use it directly or by the reference 
 // raf(someCallback) or requestAnimationFrame(someCallback) both equal
}else{
 /* requestAnimationFrame is not implemented thus can't be used */
}

在true的情况下，它将使用requestAnimationFrame将someInitFunction推到RAF执行的回调队列的最后（将在所有主要任务和回调之后执行）

在false中；这意味着requestAnimationFrame不是本地实现的，它会回退以使用旧式方法在窗口的“加载”事件上运行someInitFunction

花时间研究此代码段的执行顺序；

多次运行，最好在不同的浏览器中运行。有时在所有主队列的任务之后（“ a”之后）打印“ sync raf”；大多数时间是在所有主队列的任务和回调之后打印的（在“异步raf”之前）；

请注意，“异步raf”始终是在任何情况下，任何浏览器上均可运行的最新版本；

function a () { console.log("a") }
function b () { console.log("b") }
function c () { console.log("c") }
//same as others, but with the settimeout hard-coded
var d = function () { 
  setTimeout(()=>console.log("d"),0)
}


a();
setTimeout(b,0);
requestAnimationFrame(()=>{
    setTimeout(()=>console.log("async raf"),0);
    console.log("sync raf")
});
setTimeout(c,0);
d();

谷歌的例子函数是requestAnimationFrame - 解释？

1 个答案: