- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
例如,如果我做类似的事情
requestAnimationFrame(function() {
el.appendChild(otherEl)
el.appendChild(anotherEl)
anotherEl.removeChild(someOtherEl)
anotherEl.appendChild(yetAnotherEl)
})
当我们试图避免导致重绘/回流时,是否会导致(同步?)重绘/回流发生,从而使 requestAnimationFrame
的目的无效?
或者,浏览器会聪明地等到该帧完成后(在所有这些 DOM 操作完成后),以便最终绘制生成的 DOM 结构吗?
在 requestAnimationFrame 中,哪些事情会导致重绘/回流,我们希望避免这样做?
this html5rocks article中的样式列表仅提及(我认为)在修改时导致重绘/回流的样式。我也很想知道哪些 JavaScript 属性(以及它们在哪个对象上)在被访问时会导致回流(即发生回流是为了能够获取某个属性的值)。
最佳答案
Does that cause a (synchronous?) repaint to happen during the time when we're trying to avoid causing paints, thus voiding the purpose of requestAnimationFrame?
我不太明白你的第一个问题,但我还是会尽力回答。
从 DOM 添加或删除元素会触发回流,而 requestAnimationFrame 是 translateZ(0) 或 translate3d(0,0,0) 技巧的正式版本,用于强制创建图层。从这个意义上讲,触发回流与使用 rAF 无关。您提到了“在我们试图避免引起油漆时发生的重绘”,我认为您指的是无论如何都应该实现的节流。如果我没有正确回答,请告诉我。
Or, will the browser be smart and wait until after that frame is complete (after all those DOM manipulations are complete) in order to finally paint the resulting DOM structure?
鉴于您所有的追加和删除都在同一个 rAF 调用中,浏览器(据我所知)应该将它们全部绘制在一个框架中。
What are all the things that can cause repaints/reflows, and that we would want to avoid doing while inside a requestAnimationFrame?
重绘由任何导致可见性变化但不影响布局的事物触发。不透明度不会触发重绘,因此制作动画的成本要低得多。
重排会影响整个页面或部分页面的布局,导致重新计算受影响元素的大小和位置,因此应避免在动画中使用。平移、旋转和缩放但不触发回流。
您可以阅读更多相关信息 here并获取触发布局和重绘的 css 属性列表。
最后,为了澄清最后一个问题,重绘和布局会发生,无论它们是在 rAF 内部还是外部。请记住这一点。
关于javascript - 在 requestAnimationFrame 中,什么会导致和不会导致重绘/回流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36465997/
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后,我可以在三种 View 之间进行选择: 自上而下(树) 自上而
对于一个可能是菜鸟的问题,我们深表歉意,但尽管在 SO 上研究了大量教程和其他问题,但仍找不到答案。 我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
我已经开始了一个新元素的工作,并决定给 Foundation 5 一个 bash,看看它是什么样的。在创建带有水平字段的表单时,我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
我有一个 Windows 窗体用户控件,其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。 在繁重的 CPU 负载下,UI 会锁定。当我附加
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ,但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败,而 getEval 会
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
考虑到以下情况,我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif),但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面,而是我更愿意给他看一个轻量级图像(例
我正在设计一个小软件,其中包括: 在互联网上获取资源, 一些用户交互(资源的快速编辑), 一些处理。 我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累,我想让用户(可能
我想比较两个理论场景。为了问题的目的,我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。 我有一个很大的Queue dataQueue我必须将其传输给多个客户端。 那么让我们
我有一个二元分类问题,标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少,因此我将训练测试设置为至少 70-30 或 60-40,因此仍然有重要的观察结果。由于我没有过多地衡量准
我是一名优秀的程序员,十分优秀!