Lessons I draw from this:
- In designing a website that outsiders visit, you should probably follow this rule: If your page must have a majorly resource-intensive object on it, it should either be visible and obvious at the top of the page, or have a "Start" or "Play" button and not run until the user presses it.
- Firefox should get some (easily accessible) way to see resource usage broken down by tab. Chrome does this; it's probably made easy by the fact that Chrome makes a separate OS process for each tab (or group of tabs). I wouldn't recommend switching to that model, because it would be work and because I wouldn't like it (I don't like how it clutters up the global process list in Activity Monitor), but it would be nice if you could see CPU and memory usage broken down by tab.
- (Optional) Browsers shouldn't run purely graphical animations if they're not visible (like if they're several pages down). This might not be perfectly achievable--e.g. if animations started when you scrolled down to them, then one animation slightly higher than another might start earlier when the designer wanted them to be synchronized. Maybe you would instead have background things keep time without actually rendering anything. This might not work for cases where the nth frame depends on the conditions of the n-1th frame, and so you'd have to run the whole simulation in the background anyway--though maybe leaving out the "draw" part would make a big difference, I don't know. But if it's a series of static frames, like a GIF, then I think this would work--when the GIF is offscreen, the browser would just keep incrementing a frame number (mod the number of frames in the GIF).