org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Using graphics and scripting effectively"/><meta name="abstract" content="If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers."/><meta name="description" content="If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers."/><meta name="DC.Relation" scheme="URI" content="GUID-A60E9080-A08C-4701-A45E-0D0BAE33C88F"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-1C067AC7-2B92-4EEB-896B-814B4064590F"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D"/><meta name="DC.Language" content="en"/><title>Using graphics and scripting effectively </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-A33B7539-EE4A-4E0D-B72B-28565AEF369D">Using graphics and scripting effectively</h1><div><p>If an application uses a lot of resources, keep the graphics as light as possible and maintain a balance between good graphics and resource consumption. You can replace some graphical special effects with code to ensure better performance. For example, you can write code instead of inserting graphics or animation to create highlighted menu options or sparkling stars. You can use JavaScript optimization techniques that improve the user experience of Web applications on mobile devices. Generally, these are the same techniques that are used on desktop browsers.</p>
<div><h3>Optimizing image size</h3><p>Smaller images in terms of both pixel size and color depth conserve memory and load faster. A color depth of 16 bits is a good compromise between looks and size. The screen resolution defines the actual size of graphics on the display. For example, a graphic that looks very small on a large display may become too small on a device with the same number of pixels but a smaller display.</p><p>When possible, create images in the intended maximum size, because their quality degrades when you scale them up. Also, high-contrast edges in a image might result in poor quality when scaling down.</p><p>You can allow the Web Runtime (WRT) rendering engine to automatically scale images to fit different screen sizes, based on the <code>HTLM IMG</code> tag width and height parameters. However, this can result in poor image quality. For better quality, use a desktop imaging tool to scale images. First convert the image to 24-bit color mode, for example to PNG-24. The increased color depth allows a good scaling tool to add color gradations to perform anti-aliasing on the final image.</p></div>
<div><h3>Optimizing JavaScript</h3> <p>You can optimize JavaScript in the following ways:</p> <ul>
<li><p>Use external and not internal JavaScript. </p><pre class="codeblock"><script src="url_to_js" type="text/javascript"/></pre><p>External JavaScript files can be cached independently of HTML files, which is good because JavaScript is usually more static than HTML. External JavaScript can be shared between pages. Remember to set the <code>Expires</code> header. </p></li>
<li><p>Minimize the size of the final output JavaScript code, for example with automation tools. Strip comments from your code. Strip excess white space. Minimize and pack the code, using GZIP compression. Remember to consider the good balance of the XHTML structure and unobtrusive JavaScript.</p></li>
<li><p>Do not run long-running JavaScript functions on page load. Web applications do not multi-task and the browser is thus blocked from the user input for the duration. If you have a long running script, try to speed it up, for example by profiling the functions and improving the XHTML structure.</p></li>
<li><p>Do not use JavaScript where CSS can be used instead. For example, implement menus and rollover images with CSS instead of JavaScript.</p></li>
</ul></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>