Browser Game Loop with requestAnimationFrame

Help me create a proper game loop for a browser-based game using requestAnimationFrame.

I want to build: [describe your game, e.g., "a simple 2D platformer" or "a physics sandbox"]

The loop should:
1. Use requestAnimationFrame for smooth rendering
2. Calculate delta time correctly (handling tab switching)
3. Cap maximum delta time to prevent physics explosions
4. Include a simple game state with update and render separation

Also show me:
- How to pause/resume the loop
- How to handle the tab becoming inactive
- Basic performance monitoring (FPS counter)

I'm new to browser game development, so explain the differences from traditional game loops and why requestAnimationFrame is preferred over setInterval.