OpenGL Optimization

Hey folks!

I'm currently working on a HTML5 game engine as a hobby project. And I've just started doing some work on the OpenGL (WebGL) renderer and have some questions on how to go about optimizing the rendering pipeline.

What I understand is that state changes in the flow is expensive, so switching shader programs and binding textures is something to keep away from, but of course, you can't really keep it all streamlined, somewhere you really need to switch to another texture, and perhaps change the shader (I have seperate shader for my particle systems for example).

So, the one of the general questions is, how do you go about optimizing your render pipeline? I try to batch things as much as possible, using textures as delimiters betwixt batches. Is this a good way to go?

Second question is, how many state changes should I keep a loop down to? I think I at least need to use 3 different textures for a loop, is this really to much, or am I to much of a optimization junkie and can ease up a bit and use more than this?

These are some of the questions that I've pondered on a lot lately, so it would be superb to hear other peoples take on this to get a bit more comfy in my development process!

And I can add that I'm not doing fancy 3d stuff, no sir, my engine is pure 2d sweetness all the way!

Hope to gather a lot of experience on this! Cheerz!

Could I for example bind my textures to different texture units (got 16 as default if I'm not mistaken) and have them bound throughout the application lifespan? I wouldn't need more than that for the whole thing really as it's a pretty lowres 2d game (800x600).

I guess there's still a bottleneck when setting active texture unit before pushing things to the shader, but will I win some by doing this? Or would it just be daft?