CODEWITHSUNDEEP
javascripthtml
Nikhar
Nikhar

Reputation: 1074

what is the efficient way to minimize page slowdown with around 5500 link

i have a php page with an Jw audio player, and have around 5500 links, on each link's onclick event a javascript function is attached. php is producing the exact relative path and name of files and is then passed to javascript.

<a class="items" href="#" 
onclick="play1('<?php echo $fname."'".","."'".$f; ?>');return false">
<?php echo($fname);?>
</a>

initially i wrapped it inside <li>, had a image inside this, and the above <a>. My page(Obviously) is slow, the player takes time to load the files, i have removed the <li> tags now, its plain simple 5500 <a> tags now, page is much more responsive now. I want to what is that thing that causes the page to became slower, is it simply so many links inside <li> or the javascript function attached to it.

What would be the most efficient way to handle this situation, what could be the lightest tag that i can use, so that i can minimize the overhead as much as possible?

Thanks.

Upvotes: 0

Views: 50

Answers (2)

phtrivier
phtrivier

Reputation: 13415

Is your page still slow whith only <a> ? What was the structure of the page with <li> ?

You might get some performance improvement by using a single javascript handler on an element that is the parent of the <a>s, and let the event bubble to know which link was clicked. (See http://davidwalsh.name/event-delegate ..)

Upvotes: 1

Gyhth
Gyhth

Reputation: 1165

I think the main issue is having that many links on a page to begin with, and then whatever overhead you have on top of that - javascript, headers from server to browser, etc. The only way to make something like that quick is to generate the page simply with <a> and <br/>s.

Saying that, the JavaScript would have added to the overhead a bit to, slowing it down, the rendering of the <li> elements, the player loading, sending the music (I assume it's video or music) to the user, loading it's content into the browser, etc. Usually, these things - minus the player loading and streaming the content - can be done fast, but when you account for that many elements, it definitely will add up. The only way that page will get decent response times is purely using <a> and <br />, and having a separate page handle the actual media playing. I would suggest pagination though as mentioned in the comments, or something similar if you can get away with it.

Upvotes: 2

Related Questions