Javascript links slowed down pageload speed by several seconds

[scooterdude]

Hi All

I was replacing some links, about 10 of them on a page with JavaScript to load the target page via a JavaScript function

The JavaScript function had maybe 18/20 lines

Page load time increased by up to 8 seconds, from say 5secs to 14secs

I am not au faire with javascript , So I am guessing I did something wrong

[Fotiman]

Want to post some code? Maybe someone can spot a problem.

[scooterdude]

Here it is, I got this code to work even tho it was slow,

<script type = "text/javascript">
<!--hide
function otherlinks(myurl)
{
window.open(myurl,'jav','width=1000,height=750,resizable=yes');
}
function myfunction(n)
{
switch(n)
{
case 0:
window.open('http://www.site0.com/','jav','width=1000,height=750,resizable=yes');
break;
case 1:
window.open('http://www.site1.com/','jav','width=1000,height=750,resizable=yes');
break;
case 2:
window.open('http://www.site2.com/','jav','width=1000,height=750,resizable=yes');
break;
case 3:
window.open('http://www.site3.com/','jav','width=1000,height=750,resizable=yes');
break;
case 4:
window.open('http://www.site4.com/','jav','width=1000,height=750,resizable=yes');
break;
default:

}
}
//-->
</script>

Link code is like

<A HREF="javascript:myfunction()" >Click Here!</A>


And yes I found the code online and adapted it, now it slows down the site I lurve js :)

[Fotiman]

Ok, a few things.
1. Don't use text like "Click Here" in links. [w3.org...]
2. The href attribute of a link takes a URI. A URI can consist of a scheme followed by : followed by the scheme specific parts. "javascript" is not a valid scheme. Instead, use a click event handler or listener.
3. Your code is not currently accessible for those with JavaScript disabled (including some search engines).

Change your links to be more like this:
<a href="http://www.site0.com" onclick="return myfunction(this);">Site 0</a>

This way, users with JavaScript disabled will still be able to follow the link.

Next, change myfunction as follows:

function myfunction(el) {
  window.open(el.href, 'jav', 'width=1000,height=750,resizable=yes');
  return false;
}

This is a much better way of opening new windows.

As a side note, the code you had should not have caused any noticeable slow down. You might try using some developer tools (Chrome has built in tools, as does IE8+, and tools are available for download in Firefox like Firebug, though I think the newest version of Firefox has some tools built in). There are profiling tools to see where your code is spending the most amount of time, and you can also see network requests.

[scooterdude]

Thanks, I'll check those out