57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>性能测试</title>
|
||
<style>
|
||
body { font-family: monospace; padding: 20px; }
|
||
.log { margin: 5px 0; }
|
||
.warn { color: orange; }
|
||
.error { color: red; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h3>动画性能监控</h3>
|
||
<div id="logs"></div>
|
||
|
||
<script>
|
||
const logs = document.getElementById('logs');
|
||
|
||
// 监控 requestAnimationFrame 性能
|
||
let lastTime = performance.now();
|
||
let frameCount = 0;
|
||
let maxFrameTime = 0;
|
||
|
||
function monitorFrame() {
|
||
const now = performance.now();
|
||
const delta = now - lastTime;
|
||
|
||
if (frameCount > 0 && delta > 20) {
|
||
const log = document.createElement('div');
|
||
log.className = delta > 50 ? 'log error' : 'log warn';
|
||
log.textContent = `帧 ${frameCount}: ${delta.toFixed(2)}ms (目标: 16.67ms)`;
|
||
logs.appendChild(log);
|
||
|
||
if (delta > maxFrameTime) {
|
||
maxFrameTime = delta;
|
||
}
|
||
}
|
||
|
||
lastTime = now;
|
||
frameCount++;
|
||
|
||
if (frameCount < 300) {
|
||
requestAnimationFrame(monitorFrame);
|
||
} else {
|
||
const summary = document.createElement('div');
|
||
summary.className = 'log';
|
||
summary.textContent = `\n总结: 最大帧时间 ${maxFrameTime.toFixed(2)}ms`;
|
||
logs.appendChild(summary);
|
||
}
|
||
}
|
||
|
||
console.log('性能监控已启动，将监控前300帧');
|
||
requestAnimationFrame(monitorFrame);
|
||
</script>
|
||
</body>
|
||
</html>
|