The degradation of performance depends on the client's machine - how much memory is available to render DOM elements in the browser, and how fast the CPU can work to redraw these elements when the map changes.
In my experience 144 tiles (each of which will be a new DIV element) should be fine. IE handles several hundred DIVs and FireFox a few 1000 (although if you have FireBug installed that may not be the case).
It could be useful for you to determine the minimum machine spec you are going to support, and then see how the browser performs with your tiles. This could be done on a virtual machine or using IEThrottle and FireFox Throttle
This shows total DIV elements in the page:
This shows number of DIVs in your OpenLayers map, assuming it has an ID of mymap (just change this if it is not the case):
The use of cached tiles is likely to far outweigh any negative impacts of using 20 tiles as opposed to one large dynamically generated WMS image.
As you pointed out in your post, performance is likely to be negatively impact due to the maximum number of requests to a single domain, before number of DOM elements causes issues.
To speed up tile performance you have a number of options, the key ones you have already listed:
- Using multiple DNSs
- grouping layers together
- merging cached tiles together on the server (if you have the PIL installed with TileCache then this should happen automatically
- increase tile sizes to reduce requests (though you will need to recalculate resolutions etc.)
- cache tiles on the client by setting the right request headers
Great examples and FireBug performance logging can be found at http://ol-performance.appspot.com/
Two things to implement:
- use radio buttons to switch continuous layers on and off - as these would cover up the other layers anyway there is no point having the DOM elements if they are invisible
- remove the "Select All" checkboxes - this will force a user to only turn on layers they really want to see
I'd be interested to hear your results on how many tiles you managed to load in different browsers.