setInterval 导致页面逐渐变慢问题求助（JavaScript新手）

Hey there! Let's break down why your canvas-based animation is slowing down after a few seconds—this is a super common issue when using setInterval for rendering, and we can fix it easily.

Common Culprits Behind the Slowdown #

From your code snippet and description, here are the most likely reasons:

• Uncleared Canvas Content
  If you're drawing new elements every interval without clearing the old ones, your canvas will end up with hundreds (then thousands) of overlapping shapes. The browser has to render all of them each time, which quickly becomes a performance drain.

• setInterval Task Backlog
  setInterval doesn't care if your previous rendering callback finished executing. If your draw logic takes longer than the interval you set (e.g., 16ms for 60fps, but your code takes 20ms), the browser will queue up callbacks. Over time, this backlog makes the page feel sluggish.

• Uncontrolled Array Growth
  Your r array is initialized with 20 elements, but if you're adding new items to it in your interval callback without removing old ones, the array will keep getting bigger. Processing more elements each frame adds unnecessary overhead.

The Fix: Switch to requestAnimationFrame + Clean Rendering #

Here's how to rewrite your code to fix these issues:

var r = [];
var ctx;

function init() {
    ctx = document.getElementById("canvas").getContext("2d");
    // Initialize 20 elements with position and movement data
    for(var i = 0; i < 20; i++) {
        r.push({
            x: Math.floor(Math.random() * (ctx.canvas.width - 20)) + 10,
            y: Math.floor(Math.random() * (ctx.canvas.height - 20)) + 10,
            dx: (Math.random() - 0.5) * 2, // Random horizontal speed
            dy: (Math.random() - 0.5) * 2  // Random vertical speed
        });
    }
    // Start the animation loop
    requestAnimationFrame(update);
}

function update() {
    // Clear the entire canvas before drawing new frames
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    // Update and draw each element
    r.forEach(function(item) {
        // Update position
        item.x += item.dx;
        item.y += item.dy;
        
        // Bounce off canvas edges
        if(item.x < 10 || item.x > ctx.canvas.width - 10) item.dx *= -1;
        if(item.y < 10 || item.y > ctx.canvas.height - 10) item.dy *= -1;
        
        // Draw a circle (adjust this to match your element shape)
        ctx.beginPath();
        ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
        ctx.fillStyle = "#333";
        ctx.fill();
    });
    
    // Schedule the next frame
    requestAnimationFrame(update);
}

// Initialize when the page loads
window.addEventListener('load', init);

Why This Works #

• requestAnimationFrame: This API is built specifically for animations. It syncs with the browser's refresh rate (usually 60fps) and skips frames if your code is running slow, preventing task backlogs. It also pauses when the tab is inactive to save resources.
• clearRect: By wiping the canvas clean every frame, you ensure the browser only renders the current state of your elements, not every past iteration.
• Reusable Array Elements: We're updating existing items in the r array instead of adding new ones, keeping the workload consistent every frame.

Quick Additional Checks #

• Make sure you're not creating new DOM elements or adding event listeners inside your animation loop—this causes memory leaks over time.
• If your elements have complex drawing logic, simplify it where possible (e.g., use cached images instead of drawing shapes from scratch every frame).

内容的提问来源于stack exchange，提问作者amsjntz