jjzjj

javascript - DOM 渲染是否保证在单个(同步)函数执行期间阻塞？

coder 2024-07-24 原文

DOM 阻塞是许多不熟悉 JavaScript 严格的单线程同步执行模型的人发现的困难方法，它通常只是我们想以某种方式解决的问题(使用超时、网络 worker 等)。一切都很好。

但是，我想知道阻止实际的用户可见渲染是否是您实际上可以依赖的东西。我有 90% 的把握事实上在大多数浏览器中都是这种情况，但我希望这不仅仅是一个愉快一致的意外。我似乎无法从 DOM 规范甚至 MDM 等 vendor 文档中找到任何明确的声明。

让我有点担心的是，虽然从页面上看确实看不到 DOM 的变化，但内部 DOM 几何结构(包括 CSS 转换和过滤器)确实在同步执行期间实际上更新了。例如:

console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");

...确实会报告两个不同的宽度值，尽管该页面不会出现到 flash。在添加类之后同步等待(使用 while 循环)也不会使临时更改可见。在 Chrome 中做一个时间轴跟踪显示内部绘制和重新绘制是一样的，这是有道理的......

我担心的是，如果没有特定原因，一些浏览器，比如那些处理动力不足的移动 CPU 的浏览器，可能会选择在 期间在用户可见的布局中实际反射(reflect)这些内部计算函数的执行，因此会在此类临时操作期间导致丑陋的“闪光”。因此，更具体地说，我要问的是:他们是否有特定的理由不这样做？

(如果你想知道我为什么关心这个，我有时需要使用 getBoundingRect 为处于特定状态的元素测量计算尺寸，以规划间距或动画或其他类似的东西，没有实际上将它们置于该状态或首先为它们设置动画......)

最佳答案

根据各种消息来源，获取 DOM 元素的位置或大小将在必要时触发输出重排，以便返回的值是正确的。事实上，读取元素的 offsetHeight 已成为强制回流的一种方式，如 Alexander Skutin 所报告的那样和 Daniel Norton .

Paul Irish给出了导致回流的几个 Action 的列表。其中有这些元素框度量方法和属性:

  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,
  • elem.offsetParent elem.clientLeft, elem.clientTop, elem.clientWidth,
  • elem.clientHeight elem.getClientRects(), elem.getBoundingClientRect()

Stoyan Stefanov描述了浏览器用于优化回流的策略(例如排队 DOM 更改并批量执行)，并添加以下注释:

But sometimes the script may prevent the browser from optimizing the reflows, and cause it to flush the queue and perform all batched changes. This happens when you request style information, such as

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. getComputedStyle(), or currentStyle in IE

All of these above are essentially requesting style information about a node, and any time you do it, the browser has to give you the most up-to-date value. In order to do so, it needs to apply all scheduled changes, flush the queue, bite the bullet and do the reflow.

关于javascript - DOM 渲染是否保证在单个(同步)函数执行期间阻塞？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20251332/

执行期javascriptsectionelem的domhtml-rendering

有关javascript - DOM 渲染是否保证在单个(同步)函数执行期间阻塞？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  5. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  6. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

  7. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  8. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  9. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  10. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

随机推荐