测试

Benchmark created on

Setup

// 此区域的代码不计入性能测试
let testLastTime;
let testFrame;
let testLastFameTime;

// 模拟一个简单的动画工作负载，使其更接近真实场景
let mockElementX = 0;
const mockAnimationWork = () => {
    // 模拟一些简单的计算和DOM操作（如样式更新）
    mockElementX = (mockElementX + 1) % 100;
    document.body.style.setProperty('--test-pos', `${mockElementX}px`);
};

Test runner

Ready to run.

Testing in
TestOps/sec
用例 A: 基准测试 (无FPS计算)
benchmark('Baseline: Animation Loop WITHOUT FPS monitoring', function() {
    // 这是纯净的动画循环，模拟页面正常的raf工作
    const now = performance.now();
    // 执行模拟的动画工作
    mockAnimationWork();
    // 注意：这里没有FPS计算逻辑
});
ready
用例 B: 对比测试 (包含FPS计算)
benchmark('Test: Animation Loop WITH FPS monitoring', function() {
    // 以下是您需要评估的FPS计算逻辑
    const now = performance.now();
    // 执行模拟的动画工作
    mockAnimationWork();

    // ========== 您的FPS计算代码开始 ==========
    const fs = (now - testLastFameTime);
    testLastFameTime = now;
    let fps = Math.round(1000 / fs);
    testFrame++;
    if (now > 1000 + testLastTime) {
        fps = Math.round(( testFrame * 1000 ) / ( now - testLastTime ));
        testFrame = 0;
        testLastTime = now;
        // 在实际应用中，这里可能会调用一个回调函数，例如：`callback(fps)`
        // 为了测试公平，此处仅计算，不执行任何实际回调。
    }
    // ========== 您的FPS计算代码结束 ==========
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.