Fatal编程技术网
  • javascript/
  • Javascript 如何在浏览器间快速一致地显示值

Javascript 如何在浏览器间快速一致地显示值

javascript performance

Javascript 如何在浏览器间快速一致地显示值,javascript,performance,Javascript,Performance,我试图创造一个测试，探索我们潜意识的边界。我想简单地显示一个数字，看看用户是否可以用他们的直觉来猜测数值——他们的潜意识是否能够比他们的意识更快地读取数字。所以我试图在屏幕上闪现一个数字几毫秒。Chrome在这段代码中的表现似乎不如Edge。我如何使它在不同浏览器间更一致地工作 我试过各种方法来隐藏和透露数字。最终以这个版本结束 <script> function onLoad() { numberOfPoints = Math.floor(Math.random() *

我试图创造一个测试，探索我们潜意识的边界。我想简单地显示一个数字，看看用户是否可以用他们的直觉来猜测数值——他们的潜意识是否能够比他们的意识更快地读取数字。所以我试图在屏幕上闪现一个数字几毫秒。Chrome在这段代码中的表现似乎不如Edge。我如何使它在不同浏览器间更一致地工作

我试过各种方法来隐藏和透露数字。最终以这个版本结束

<script>

function onLoad() {
    numberOfPoints = Math.floor(Math.random() * (99 - 9 + 1)) + 9;
    document.f.points.value = numberOfPoints;
    setTimeout(hideRun, 3000);
}

function hideRun() {
    hide();
    document.getElementById("hiddenNumber").innerHTML = numberOfPoints;
    document.getElementById("hiddenNumber").style.display = 'block';
    setTimeout(hide, 5);
}

function hide() {
    document.getElementById("hiddenNumber").style.display = 'none';
}

</script>

<body onload="onLoad()">
    <div id=hiddenNumber style="display: block;">GET READY</div>
</body>


函数onLoad（）{
numberOfPoints=Math.floor（Math.random（）*（99-9+1））+9；
document.f.points.value=点数；
设置超时（hideRun，3000）；
}
函数hideRun（）{
隐藏（）；
document.getElementById（“hiddenNumber”）.innerHTML=numberOfPoints；
document.getElementById（“hiddenNumber”）.style.display='block'；
设置超时（隐藏，5）；
}
函数hide（）{
document.getElementById（“hiddenNumber”）.style.display='none'；
}
准备好
在本例中，我希望显示Get Ready文本3秒钟，然后显示一个随机数5毫秒。虽然我无法实际测量，但chrome浏览器上的5毫秒比Edge浏览器长得多

您可以在这里亲自尝试：

在这里，按时间思考是不可靠的，因为您不知道浏览器何时将绘制到屏幕上，也不知道屏幕何时进行v同步。
所以你最好从框架的角度来考虑

幸运的是，我们可以使用方法将回调挂接到before paint事件

let id=0；
btn.onclick=e=>{
cancelAnimationFrame（id）；//停止上一次长时间运行
设i=0，
最大值=输入值；
id=requestAnimationFrame（循环）；
函数循环（t）{
//仅在第一帧
如果（！i）out.textContent='some dummy text'；
//直到我们达到所需的帧数

如果（++i按时间思考在这里是不可靠的，因为您不知道浏览器何时将绘制到屏幕上，也不知道屏幕何时进行v同步。

所以你最好从框架的角度来考虑

幸运的是，我们可以使用方法将回调挂接到before paint事件



let id=0；
btn.onclick=e=>{
cancelAnimationFrame（id）；//停止上一次长时间运行
设i=0，
最大值=输入值；
id=requestAnimationFrame（循环）；
函数循环（t）{
//仅在第一帧
如果（！i）out.textContent='some dummy text'；
//直到我们达到所需的帧数

如果（++i，你能试试2D画布，看看是否有帮助吗


<html>
<head>
<script>
var numberOfPoints;

var canvas;
var context;

function onLoad() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  context.font = "30px Arial";
  // context.fillText("...", 10, 50);
  numberOfPoints = Math.floor(Math.random() * (99 - 9 + 1) ) + 9;
  setTimeout(hideRun, 3000);
}
function hideRun() {
  context.fillText(numberOfPoints, 10, 50);
  setTimeout(hide, 5);
}
function hide() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body onload="onLoad()">
<canvas id="myCanvas"></canvas>
</body>
</html>




var点数；
var帆布；
var语境；
函数onLoad（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
context.font=“30px Arial”；
//上下文。填充文本（“…”，10，50）；
numberOfPoints=Math.floor（Math.random（）*（99-9+1））+9；
设置超时（hideRun，3000）；
}
函数hideRun（）{
上下文。填充文本（numberOfPoints，10,50）；
设置超时（隐藏，5）；
}
函数hide（）{
clearRect（0，0，canvas.width，canvas.height）；
}



在我的测试中，与CSS属性相比，它似乎显示的数字更加一致，但绝对肯定的是，我建议使用60 fps的屏幕阅读器来记录和验证跨浏览器的准确性。
你能试试2D画布，看看这是否有帮助吗


<html>
<head>
<script>
var numberOfPoints;

var canvas;
var context;

function onLoad() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  context.font = "30px Arial";
  // context.fillText("...", 10, 50);
  numberOfPoints = Math.floor(Math.random() * (99 - 9 + 1) ) + 9;
  setTimeout(hideRun, 3000);
}
function hideRun() {
  context.fillText(numberOfPoints, 10, 50);
  setTimeout(hide, 5);
}
function hide() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body onload="onLoad()">
<canvas id="myCanvas"></canvas>
</body>
</html>




var点数；
var帆布；
var语境；
函数onLoad（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
context.font=“30px Arial”；
//上下文。填充文本（“…”，10，50）；
numberOfPoints=Math.floor（Math.random（）*（99-9+1））+9；
设置超时（hideRun，3000）；
}
函数hideRun（）{
上下文。填充文本（numberOfPoints，10,50）；
设置超时（隐藏，5）；
}
函数hide（）{
clearRect（0，0，canvas.width，canvas.height）；
}



在我的测试中，与CSS属性相比，它似乎显示的数字更加一致，但绝对可以肯定的是，我建议使用60帧/秒的屏幕阅读器来记录和验证跨浏览器的准确性。
setTimeout
在12毫秒左右是不可靠的，IIRC。我不知道是否有更优雅的方法，但有一种可能性是b在呈现更改后锁定几毫秒，然后
hide（）
。上述
setTimeout
限制的参考文件…
setTimeout
在12毫秒左右的时间内是不可靠的，IIRC。我不知道是否有更优雅的方法，但有一种可能是在呈现更改后阻塞几毫秒，然后
hide（）
。前面提到的
setTimeout
限制的参考文档…Google Chrome使用了上面的代码片段，值为
1
，我仍然只看到大约75%的成功率。大约有1/4的时间，它不会闪烁任何文本。@tresf有趣，我也在Chrome上体验过它（在FF上写的），但只有二十分之一。将其设置为两帧总是有效的…但Chrome的行为中有一些可疑之处，我同意，但是，这是按规格进行的，这是我们最可靠的方式。我尝试使用画布，以防CSS绘画因某种原因延迟（例如Houdini的到来）但情况也是如此……他们会在不触发重新绘制的情况下启动rAF回调，或者太晚。您的
1:20
可能是行为性的（我的
3:4
）。如果以一致的速度单击，则单击与刷新的快门速度可能会意外同步。如果尚未同步，请尝试随机单击。此外，我的硬件是Apple，使用电池运行。不确定这些因素是否会影响浏览器的自然刷新。我会在功能开始时取消任何运行循环n（
cancelAnimationFrame（id）；
）。仅供参考，回调在rAF中堆叠，因此如果执行
requestAnimationFrame（fn）；requestAnimationFrame（fn）；