Question

我想测量加载文本所需的ms数（取决于我将在以后设置样式）并进行10次测量。我把它放在一起但是使用RequestAnimationCode似乎不再加载。

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var stuff = [];
stuff[0] = new Array( "Text1", "Bla1Bla1Bla1" );
stuff[1] = new Array( "Text2", "Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2" );
stuff[2] = new Array( "Text3", "Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3" );

var lastTime = 0;
var count = 10; 
var nprint = 50;
var t0 = 0;
var t1 = 0;

//----------------------Start Window loading event---------------------------

$(window).load(function () {

//print links once
$.each(stuff, function(index, out) {
$( "#text" ).append( "<p id='" + out[0] + "'>" + out[0] + " - " + out[1] + "</p>" );
});

//-----------------AnimationFrameMeasure


//loading text 0 50 times
for ( var i = 0; i < nprint; i++ ) {
$( "#testbox" ).append( "<p id='" + stuff[0][0] + "'>" + stuff[0][0] + " - " + stuff[0][1] + "</p>" );
}

function loop(t) { 
var diff = lastTime - t; 
lastTime = t;
t0 = window.performance.now();

//loading text 50 times
for ( var i = 0; i < nprint; i++ ) {
$( "#testbox" ).append( "<p id='" + stuff[0][0] + "'>" + stuff[0][0] + " - " + stuff[0][1] + "</p>" );
}

// push time
t1 = window.performance.now();
    stuff[0].push(t1-t0);

if (count >= 0) {
requestAnimationFrame(loop); 
}

count = count - 1;

} 

requestAnimationFrame(loop); 


//-------------------------print results-----------------------
alert(stuff);

$.each(stuff, function(index, link) {
$.each(link, function(data, value) {

$( "#resultbox" ).append(" | " + value);

});
$( "#resultbox" ).append("<br />"); 
});


//--------------------------End Window loading even ------------

});
</script>


<body>
<h2>Text Overview</h2>
<div id="text"></div>

<h2>Result Box</h2>
<div id="resultbox"></div>

<h2>TestBox</h2>
<div id="testbox"></div>

</body>

Answer 1

您错过了</body>代码
第37行：loop(t) - 你可能打算写function loop(t)

作为旁注，一旦做出这些改变，它似乎无限循环，打印，打印和打开。

更熟悉浏览器的调试器。它很可能已经给你足够的信息来发现＃2，因为它抱怨第38行意外{。

RequestAnimationFrame API - 测量单个元素的加载时间 - 页面不再加载

1 个答案: