Optimize Javascript Code

1. Minimize DOM Access. Manipulating the DOM is very resource intensive for browsers.
2. Smart Event Handlers. Use Event Delegation. You can put on event handler on a container div and then figure out which button inside that div was actually clicked in the function to be executed.
3. Reduce size of private functions (those called only within the js itself, not those called in other documents). So function foobar() would become function a() .
4. Use local variables whenever possible
5. Use the IF statement when
   1. There are no more than two discrete values for which to test
   2. There are large number of values that can be easily separated into ranges
6. Use the SWITCH statement when
   1. There are more than 2 but fewer than 10 values in which to test
   2. There are no ranges for conditions because the values are nonlinear
7. Use array lookup when:
   1. There are more than 10 values to test
   2. The results of the conditions are single values rather than number of actions to be taken.
8. Avoid the FOR-IN loop
9. Use Duff’s Device for looping through arrays when you notice a bottleneck in loops that process a large number of items
10. Alias  javascript properties like foo.style or document.getElementById

Optimize Images

1. Use smushit.com or punypng.com to remove any unwanted metadata from your images.
2. Since smushit.com doesn’t strip meta from jpeg you can do it manually with jpegtran
3. Be sure to always check between gif, png 8, png 24, and jpg when saving images for the web to ensure that you’re using the format that will yield the smallest file size.
4. Optimize CSS sprites to go horizontally instead of vertically, combine similar colors to keep color count low (in other words have a sprite with all green together and  another with brown, but only do so if it keeps file size lower and http requests down. Only do it if it will not yeild higher http requests and not yeild higher file sizes. the whole point is to reduce those factors.) Also don’t leave big gaps between image in the sprite.
5. Favicon – Get one. Browers will get a 404 error even if you don’t have one. 404s are slow to respond. So keep it under 1k and be careful about your expires header since you can’t rename the file if you want to change it.
6. png 8 is able to save full alpha transparency but only at 256 colors and only from fireworks or some other app than photoshop. I can greatly reduce size from png 24.

Part 1 2 3 4 5