javascript - requestAnimationFrame 什么时候执行？

coder 2024-05-16 原文

浏览器读取并运行一个 JavaScript 文件，文件中写入的同步任务立即成为 in-mid-execution 任务，setTimeout 回调成为宏任务，promise 回调成为微任务。一切都很好。

在遇到 requestAnimationFrame 之前，我以为我掌握了 JavaScript 事件循环。

@T.J. Crowder 为我提供了以下代码片段。

const messages = [];
setTimeout(() => {
  // Schedule a microtask
  Promise.resolve().then(() => {
    log("microtask");
  });
  
  // Schedule animation frame callback
  requestAnimationFrame(() => {
    log("requestAnimationFrame");
  });
  
  // Schedule a macrotask
  setTimeout(() => {
    log("macrotask");
  }, 0);
  
  // Schedule a callback to dump the messages
  setTimeout(() => {
    messages.forEach(msg => {
      console.log(msg);
    });
  }, 200);

  // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
  const stop = Date.now() + 100;
  while (Date.now() < stop) {
  }
  
}, 100);

function log(msg) {
  messages.push(Date.now() + ": " + msg);
}

Chrome:微任务、requestAnimationFrame、宏任务
Firefox:微任务、宏任务、requestAnimationFrame

规范没有说明这是否可以发生在宏任务完成和它的预定微任务处理之间，或者只发生在宏任务之间。所以大概这会因浏览器而异。

但是在 Chrome 和 Firefox 中，微任务总是在 requestAnimationFrame 回调之前执行。我的以下问题是基于这一观察。

**Q1:**

即使浏览器没有重绘工作，requestAnimationFrame 的回调是否会以刷新率(默认每秒 60 次)执行？

**Q2:**

以下来自https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

The only way to guarantee that your JavaScript will run at the start of a frame is to use requestAnimationFrame.

太重的in-mid-execution任务会导致浏览器滞后，导致帧间隔超过16.66ms，阻塞帧完成。

“保证”一词是否意味着微任务将在当前 JS 堆栈变空时立即执行，从而阻止当前帧完成(如果微任务也太重)？

最佳答案

它基本上是它自己的东西。当浏览器要重绘页面时，如果没有被正在运行的任务阻塞，它通常每秒重绘 60 次，它会在重绘之前调用所有排队的 requestAnimationFrame 回调，然后重绘.

~~The spec没有说明这是否会发生在任务(宏任务)的完成和它的预定微任务的处理之间，或者只发生在(宏)任务之间。所以大概这会因浏览器而异。~~

~~The old spec (现已过时和取代)用(宏观)任务术语描述它，暗示它将在(宏观)任务之间，但事情可能已经从那里开始。~~

规范现在说明何时在 Event Loop Processing Model 中发生这种情况部分。删除了很多细节的简化版本是:

做最早的(宏)任务
做微任务
如果这是渲染的好时机:
1. 做一些准备工作
2. 运行requestAnimationFrame回调
3. 渲染

我们来做个测试:

const messages = [];
setTimeout(() => {
  // Schedule a microtask
  Promise.resolve().then(() => {
    log("microtask");
  });
  
  // Schedule animation frame callback
  requestAnimationFrame(() => {
    log("requestAnimationFrame");
  });
  
  // Schedule a (macro)task
  setTimeout(() => {
    log("(macro)task");
  }, 0);
  
  // Schedule a callback to dump the messages
  setTimeout(() => {
    messages.forEach(msg => {
      console.log(msg);
    });
  }, 200);

  // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
  const stop = Date.now() + 100;
  while (Date.now() < stop) {
  }
  
}, 100);

function log(msg) {
  messages.push(Date.now() + ": " + msg);
}

~~果然，结果因浏览器而异:~~

Chrome:微任务、requestAnimationFrame、(宏)任务

Firefox:微任务、(宏)任务、requestAnimationFrame

~~(我在这些浏览器上反复测试可靠地得到了相同的结果。我手边没有 Edge...)~~

现在 Chrome(可能还有 Chromium、Brave 和新的 Edge)、Firefox、iOS Safari 和 Legacy Edge 都做同样的事情，符合规范:微任务、requestAnimationFrame、(宏)任务。

这是一个忙等待预先的版本，而不是最后，以防它改变某些东西:

const messages = [];
setTimeout(() => {
  // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
  const stop = Date.now() + 100;
  while (Date.now() < stop) {
  }
  
  // Schedule a microtask
  Promise.resolve().then(() => {
    log("microtask");
  });
  
  // Schedule animation frame callback
  requestAnimationFrame(() => {
    log("requestAnimationFrame");
  });
  
  // Schedule a (macro)task
  setTimeout(() => {
    log("(macro)task");
  }, 0);
  
  // Schedule a callback to dump the messages
  setTimeout(() => {
    messages.forEach(msg => {
      console.log(msg);
    });
  }, 200);

}, 100);

function log(msg) {
  messages.push(Date.now() + ": " + msg);
}

~~通过该更改，我在 Chrome 和 Firefox 上可靠地获得了微任务、requestAnimationFrame、(宏)任务。~~我现在得到的结果与前面的代码片段相同。

**Q1: **

Even though the browser has no repaint work, the requestAnimationFrame's callback will be excuted at the refresh rate (default 60 per second).

前提是没有任何阻塞。

**Q2: **

这句话的意思完全且仅是它所说的:您的回调将在绘制帧之前立即被调用(连同任何排队的 requestAnimationFrame 回调)。这并不意味着必须每 60 秒绘制一帧 — 因为线程可能正忙于做其他事情。

这些回调不会中断其他任务。再次声明:如果其他任务让主 UI 线程忙，那么它很忙，并且帧速率会受到影响。

关于javascript - requestAnimationFrame 什么时候执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43050448/

有关javascript - requestAnimationFrame 什么时候执行？的更多相关文章

ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？最佳答案通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2
为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。最佳答案参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。关于ruby-为什么4.1%2使用Ruby返
ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2
它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
ruby - Infinity 和 NaN 的类型是什么？ - 2
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？最佳答案您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby - Chef 执行非顺序配方 - 2
我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

javascript - requestAnimationFrame 什么时候执行？

有关javascript - requestAnimationFrame 什么时候执行？的更多相关文章

随机推荐