)
Images
Large image sizes are a traditional bottleneck to always target for your applications.
Be meticulous in optimizing the file size of your images. Shaving off 5kb or so from several
images in your application can make a notable performance increase.
??‘
??‘
??‘
??‘
??‘
??‘
??‘
??‘
??‘
??‘
Chapter 9: Bandwidth and Performance Optimizations
211
Make sure your images are sized appropriately for display on the iPhone and iPod touch
viewport. Never ever rely on browser scaling. Instead, match image size to image presentation.
Image data is more expensive than text data. Therefore, consider using canvas drawing in
certain cases.
Instead of using image borders, consider using CSS borders instead, particularly with the
enhanced -webkit-border-radius property.
Instead of using one large background image, consider using a small image and tiling it.
CSS and JavaScript
Combine rules to create more efficient style declarations. For example, the second declaration is
much more space efficient than the first one is:
// Less efficient
div #content {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px; /* Randy: do we want this as px or pt? */
line-height: 1.2em; /* Let??™s try this for now...*/
font-weight: bold;
}
// More efficient
div #content {font: bold 12px/1.
Pages:
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243