PDA

View Full Version : Optimising Javascript


zapper13
03-18-2009, 01:18 PM
Hey guys. I just ran my web page on a site which calculates the loading speed of the page and it says that i have too many external javascripts and the sizes are too large. How can i actually smaller the size of the javascripts?

zapper13
03-18-2009, 01:19 PM
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kim Hoe Corporation</title>
<style type="text/css">
<!--
body {
background-image: url(index/image/kimhoe_wallpaper_patt_2.jpg);
background-color: #22222222222222222222;
}
body,td,th {
color: #CBCCDA;
}
#pageborder {
position:relative;
width:990px;
height:590px;
z-index:1;
margin-right: auto;
margin-left: auto;
}
#textbox {
position:absolute;
width:224px;
height:300px;
z-index:1;
background-color: #393C3F;
left: 680px;
top: 80px;
border: 1pt solid #666;
overflow: auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-family: Verdana;
font-size: 11px;
color: #999;
text-align: justify;
line-height: 16px;
}
#image {
position:absolute;
width:630px;
height:330px;
z-index:2;
left: 50px;
top: 80px;
border: 1pt solid #666;
background-color: #393C3F;
}
#menu {
position:absolute;
width:890px;
height:25px;
z-index:3;
top: 411px;
border: 1pt none #666;
left: 50px;
}
#companyname {
position:absolute;
width:700px;
height:100px;
z-index:4;
top: 440px;
left: 50px;
border: 1pt solid #666;
}
a:link {
color: #999;
}
a:visited {
color: #999;
font-family: Verdana;
}
.newscolumn {
color: #999;
}
.titlefortext {
color: #FC0;
}
#termsofuse {
position:absolute;
width:110px;
height:15px;
z-index:4;
top: 575px;
font-family: Verdana;
font-size: 9px;
color: #999;
left: 515px;
}
#copyright {
position:absolute;
width:310px;
height:15px;
z-index:5;
top: 575px;
font-size: 9px;
font-family: Verdana;
color: #999;
left: 635px;
}
a {
font-size: 9px;
}
.datefortext {
color: #CCC;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
</head>

<body bgcolor="#2222222222222222222">
<div id="pageborder">
<div id="textbox">
<p><span class="titlefortext"><strong>KIM HOE CORPORATION NEWS</strong></span><br />
<br />
<span class="titlefortext"><span class="datefortext">2008</span></span><br />
Kim Hoe Corporation expanded its leasing projects portfolio with the acquisition of Kim Hoe Plaza. </p>
<p><span class="titlefortext"><span class="datefortext">2007</span></span><br />
Kim Hoe Corporation expanded its leasing projects portfolio with the acquisition of Kim Hoe Point.<br />
<br />
<span class="titlefortext"><span class="datefortext">2006</span></span><br />
Kim Hoe Corporation’s first exquisite residential development, Chuan Yuan, was successfully launched and sold.<br />
<br />
<span class="titlefortext"><span class="datefortext">1999</span></span><br />
Kim Hoe Corporation built its corporate headquarters at Kim Hoe Centre.<br />
<br />
<span class="titlefortext"><span class="datefortext">1997</span></span><br />
Kim Hoe Corporation expanded its leasing projects portfolio with the acquisition of four leasable units at Lam Soon Industrial Building.<br />
<br />
<span class="titlefortext"><span class="datefortext">1993</span></span><br />
Kim Hoe Corporation added to its leasing projects portfolio with the successful development of its first light industrial estate project in Malaysia.<br />
<br />
<span class="titlefortext"><span class="datefortext">1990</span></span><br />
Kim Hoe Corporation was established and commenced its venture into the real estate sector with the acquisition of two leasable units at Valiant Building.<br />
<br />
<span class="titlefortext"><span class="datefortext">1980</span></span><br />
Kim Hoe Electronics Enterprises was established at Sim Lim Tower.</p>
</div>
<div id="image">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="330">
<param name="movie" value="index/flash/indexflash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="index/flash/indexflash.swf" width="630" height="330">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="menu">
<script id="Sothink Widgets:index.pgt" type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu79cf",730,"","blank.gif",0,"","",0,0,0,0,0,1,0,0,"","",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,3,0,8,100,"",-2,"",-2,75,0,0,"#999999","#2D2C3F","",3,1,1,"#666"]);
stm_ai("p0i0",[0,"residential projects","","",-1,-1,0,"","_self","","","","",0,0,0,"","",8,6,0,1,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #666 #666 #666","#666 #666 #666 #666","#CCCCCC","#FFFFFF","9pt Verdana","9pt Verdana",0,0],191,25);
stm_bpx("p1","p0",[1,4,0,0,0,3,0,0,100,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,enabled=0,Duratio n=0.60)",5,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=reverse,enabled=0,Duratio n=0.60)",4,50]);
stm_aix("p1i0","p0i0",[0,"chuan yuan @ serangoon gardens","","",-1,-1,0,"/residentialprojects/chuanyuan/chuanyuan.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#2D2C3F #2D2C3F #2d2c3f #666","#2d2c3f #2D2C3F #2d2c3f #666","#CCCCCC","#FFFFFF","7pt Verdana","7pt Verdana"],190,25);
stm_ep();
stm_aix("p0i1","p0i0",[0,"leasing projects","","",-1,-1,0,"","_self","","","","",0,0,0,"","",8,6,0,1,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #2D2C3F #666 #666","#666 #2D2C3F #666 #666"],178,25);
stm_bpx("p2","p1",[1,4,0,0,0,3,0,6]);
stm_aix("p2i0","p1i0",[0,"residential","","",-1,-1,0,"","_self","","","","",0,0,0,"grey2-r.gif","grey2-r.gif",6,8,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #2D2C3F #666 #666","#666 #2D2C3F #666 #666"],177,25);
stm_bpx("p3","p1",[1,2,0,-1]);
stm_aix("p3i0","p2i0",[0,"kim hoe centre @ kelantan lane","","",-1,-1,0,"/leasingprojects/residential/kimhoecentre/r_kimhoecentre.html","_self","","","","",0,0,0,"","",0,0],177,25);
stm_aix("p3i1","p3i0",[0,"kim hoe point @ kelantan lane","","",-1,-1,0,"/leasingprojects/residential/kimhoepoint/r_kimhoepoint.html"],177,25);
stm_ep();
stm_aix("p2i1","p2i0",[0,"commercial"],177,25);
stm_bpx("p4","p1",[1,2]);
stm_aix("p4i0","p3i0",[0,"kim hoe centre @ kelantan lane","","",-1,-1,0,"/leasingprojects/commercial/kimhoecentre/c_kimhoecentre.html"],177,25);
stm_aix("p4i1","p3i0",[0,"kim hoe point @ kelantan lane","","",-1,-1,0,"/leasingprojects/commercial/kimhoepoint/c_kimhoepoint.html"],177,25);
stm_aix("p4i2","p3i0",[0,"kim hoe plaza @ aljunied","","",-1,-1,0,"/leasingprojects/commercial/kimhoeplaza/c_kimhoeplaza.html"],177,25);
stm_aix("p4i3","p3i0",[0,"lamsoon @ hillview","","",-1,-1,0,"/leasingprojects/commercial/lamsoon/c_lamsoon.html"],177,25);
stm_aix("p4i4","p3i0",[0,"valiant @ aljunied","","",-1,-1,0,"/leasingprojects/commercial/valiant/c_valiant.html"],177,25);
stm_ep();
stm_aix("p2i2","p2i0",[0,"industrial"],177,25);
stm_bpx("p5","p4",[]);
stm_aix("p5i0","p3i0",[0,"lamsoon @ hillview","","",-1,-1,0,"/leasingprojects/industrial/lamsoon/i_lamsoon.html"],177,25);
stm_aix("p5i1","p3i0",[0,"valiant @ aljunied","","",-1,-1,0,"/leasingprojects/industrial/valiant/i_valiant.html"],177,25);
stm_aix("p5i2","p3i0",[0,"euro asia @ johor","","",-1,-1,0,"/leasingprojects/industrial/euroasia/i_euroasia.html"],177,25);
stm_ep();
stm_ep();
stm_aix("p0i2","p0i1",[0,"corporate profile","","",-1,-1,0,"/corporateprofile/corporateprofile.html","_self","","","","",0,0,0,"","",0,0],178,25);
stm_aix("p0i3","p0i1",[0,"contact us"],169,25);
stm_bpx("p6","p1",[]);
stm_aix("p6i0","p1i0",[0,"for general enquiries,\r\ncall +65-6336-5566","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666","#666"],168,25);
stm_aix("p6i1","p6i0",[0,"for leasing enquiries,\r\nclick here","","",-1,-1,0,"/contactus/form/contactusform.html","_blank"],168,25);
stm_ep();
stm_aix("p0i4","p0i0",[0,"collaborations","","",-1,-1,0,"/collaboration/collaboration.html","_self","","","","",0,0,0,"","",0,0],178,25);
stm_ep();
stm_em();
//-->
</script>
</div>
<div id="termsofuse"><a href="/termsofuse/termsofuse.html" target="_blank">WEB TERMS OF USE</a></div>
<div id="copyright">COPYRIGHT © KIM HOE CORPORATION PTE. LTD. 2009</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Jon Hanlon
03-19-2009, 06:09 PM
It shouldn't really matter unless they are ridiculously huge.
Browsers cache script files and only re-load them if they have changed since the last visit.
You could get this message if, say, you were loading in a huge library and only using one function. In that case it might make sense to separate commonly used functions into common.js It won't matter if they're loaded more than once by another script. Just means you must maintain two files.