个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在编写一些 WebGL 动画，但无法使 requestAnimationFrame 流畅工作。我写了这个空循环来在不同的浏览器中测试它:
<html>
<body>
<script type="text/javascript">
var prev = Date.now();
function frame()
{
window.requestAnimationFrame(frame);
var now = Date.now();
var diff = now - prev;
prev = now;
if(diff > 20)
{
console.log(new Date().toLocaleTimeString() + ": " + diff);
}
}
frame();
</script>
</body>
</html>
它计算帧之间传递的时间，如果超过 20 毫秒，则将其记录到控制台。我的设置是:Windows 7 x64、Intel i7、Sapphire Tri-X R9 290、16 GB RAM。显示频率为 60 Hz，因此我预计帧之间的间隙为 1/60 = 16.666(6) ms。因此，我设置了 20 毫秒阈值来防止控制台泛滥。后台什么也没有发生，一切都是闲置的。没有打开其他浏览器选项卡。这是我的数字:
Google Chrome:
7:47:13 AM: 53
7:47:16 AM: 53
7:47:19 AM: 53
7:47:22 AM: 53
7:47:25 AM: 54
7:47:28 AM: 53
7:47:31 AM: 53
7:47:34 AM: 53
7:47:37 AM: 54
7:47:40 AM: 54
7:47:43 AM: 54
7:47:46 AM: 54
7:47:49 AM: 55
7:47:52 AM: 54
7:47:55 AM: 54
您可以清楚地看到该模式:每 3 秒 53-55 毫秒的间隙。好的，尝试其他浏览器:
FireFox:
7:49:25: 53
7:49:25: 89
7:49:26: 88
7:49:28: 51
7:49:28: 42
7:49:28: 105
7:49:28: 52
7:49:28: 21
7:49:28: 29
7:49:34: 23
7:49:34: 22
7:49:38: 27
7:49:39: 55
7:49:39: 51
7:49:39: 108
7:49:45: 35
7:49:45: 43
7:49:45: 24
7:49:45: 103
7:50:09: 45
7:50:18: 22
7:50:19: 31
7:50:25: 59
7:50:25: 33
7:50:25: 21
更糟糕的是!好吧，我们继续。 Opera 内部具有与 Chrome 相同的引擎，但令人惊讶的是它显示出几乎完美的时序，因此我将阈值降低到大于 17 毫秒:
Opera:
7:56:57 AM: 18
7:57:00 AM: 18
7:57:12 AM: 18
7:57:13 AM: 18
7:57:17 AM: 18
7:57:19 AM: 18
7:57:32 AM: 18
7:57:33 AM: 18
7:57:34 AM: 18
7:57:37 AM: 18
7:57:48 AM: 18
7:57:50 AM: 18
7:57:51 AM: 18
7:57:54 AM: 18
7:57:55 AM: 18
有趣的是，在您不触摸键盘和鼠标之前，它几乎可以完美工作。如果你移动鼠标光标，它就会写入这个 18 毫秒的消息。还有最大的惊喜——IE11。页面刷新后发送几条 18 毫秒的消息后，它可以绝对流畅地工作很多分钟，精度低于 1 毫秒。干得好，IE11。
IE11:
7:59:25: 18
7:59:25: 18
所以，这是怎么回事？为什么这些行为如此不同？如何在所有浏览器中制作流畅的 WebGL 动画？
更新我已将日志记录条件更改为: if(diff > 17 || diff < 16) 并且我发现 Google Chrome 和 FireFox 有时只有几毫秒的间隙，例如 1-2-3 毫秒。所以看起来他们正在努力保持动画垂直同步，但他们做得不太好。所以我的问题仍然悬而未决。
最佳答案
我在 Chrome 或 Firefox 中的 MBP 上看到的情况并不像你那么糟糕。事实上，在前 1-3 帧之后我没有发现任何问题。
下面是您的内联示例。我对其进行了一些更改，以使用传递给 requestAnimationFrame 的时间而不是 Date.now，因为传递给 requestAnimationFrame 的时间应该更准确.
我会注意到，我打开了 23 个选项卡，其中许多选项卡(包括 Stack Overflow 本身)在后台执行一些操作，例如发送 Websocket 进行通知等。
PS:我认为你的意思是“流畅地”而不是“流畅地”？
var prev = 0;
var frameCount = 0;
function frame(now)
{
++frameCount;
var diff = now - prev;
prev = now;
if(diff > 20)
{
console.log(frameCount, new Date().toLocaleTimeString(), ": ", diff);
}
// It's easier to debug things with this at the bottom
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);关于javascript - requestAnimationFrame不流畅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40837781/
24
4
0
我想在单击按钮时进行移动:向左。这是针对移动运动的... 问题在于它的移动，但只有一次。我需要点击按钮发送垃圾邮件... 代码: 在创建中: this.buttonleft.inputEnabled
前言 今天大姚给大家分享一个.NET开源（MIT License）、免费、现代化、流畅、可测试、可移植的URL构建器和HTTP客户端库：Flurl。 项目介绍 Flurl是一个集现代性、流畅性、
我不确定其他与我的问题明显相似的问题是否归结为同一主题。 请考虑这段代码(为更清楚起见，为 head 部分提取了 CSS 代码): body { margin: 0;
我是一名学习 html/css 的学生，我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难，因此它是流动的而不是固定的。我配置了一个框、图像和一些文本，因此它们在页面上是绝对的，但我无法使页
在我的游戏中，我已将角色设置为移动。它的设置方式是: if game_over_state == False: if event.type == pygame.KEYDOWN:
我一直在研究代码，但似乎无法让它工作。我用谷歌搜索，在这个网站上搜索了 13 页，但仍然找不到我要找的答案。 我希望视频以特定尺寸开始，然后随着我调整浏览器大小(从桌面到 iPad/iPhone)而缩
我已经从 sql server 2005 切换到 mysql，这并不是一个真正的问题。 我对 sql server 中存在的 (n)varchar 有一个小问题。通常我用过: mapping.Map(
我必须使用自定义 odbc 驱动程序。 我需要作为连接字符串传递的只是 DSN。 我如何使用(流畅)nhibernate 做到这一点？ FluentNHibernate.Cfg.Db 仅提供带有 DS
我无法找到我们网站上动态显示的弹出窗口。最初该元素处于以下 html 状态: 使用jquery的show和hide，div显示5秒，稍后隐藏。 在我的 Selenium 脚本中，我尝试使用以下语句等
我有一个 two/three基于屏幕尺寸的列布局。 如果窗口大小大于 1000比我需要遵循 3 column其他布局我需要遵循 two column布局。 我是用JS实现的，但是代码很乱。现在我想用
我有一个 Flutter 应用程序，随着时间的推移和添加的功能越来越多，它变得越来越笨拙。因此，是否有一些实用程序可以使其像 60FPS 一样流畅？ 我知道这里有一些官方指南:https://docs
我在如何实现 $(window).smartresize() 上纠结了几个小时使我的 div 流畅的功能。 我使用了这个 theme 中的 javascript但是当我尝试自己实现它时，我的 div
当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 Canvas 中时，发现与canvas2d相比，w
我有一个所有实体的基类: public class BaseClass { public int SomeProperty {get; set;} } public class SomeEnt
我正在从事一个对时间相当敏感的元素。任务是制作一个微型网站，用户可以通过他们的智能手机访问该网站，在那里他们可以访问许多电影。他们会扫描二维码(我知道他们已经死了，我没有计划这次事件)。并登陆这个网站
我们正在使用Entity Framework 5.0。和数据库MySQL。当我们尝试迁移时间时出现异常。 could not be created because the principal key
快速问题：如何将传递给shiny.fluent：：Text函数的文本设置为粗体？更广泛地说，如何将样式选项传递给此函数？。在函数的帮助页面中，它是这样写的。但我不明白如何使用这个变量参数。。我试着在不
我是一名优秀的程序员,十分优秀！