javascript - 大约 5500 个链接可以最大程度地减少页面速度下降的有效方法是什么

Question

我有一个带有 Jw 音频播放器的 php 页面，并且有大约 5500 个链接，在每个链接的 onclick 事件上都附加了一个 javascript 函数。 php 正在生成文件的确切相对路径和名称，然后传递给 javascript。

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

最初我把它包裹在 <li> 里面，里面有一个图像，上面的 <a> 。我的页面(显然)很慢，播放器需要时间来加载文件，我已经删除了 <li>现在标签，很简单 5500 <a>现在有了标签，页面的响应速度更快了。我想知道导致页面变慢的原因是什么，是不是<li>里面有太多链接？或附加的 javascript 函数。

处理这种情况最有效的方法是什么？我可以使用的最轻的标签是什么，以便我可以尽可能减少开销？

谢谢。

Answer 1

我认为主要问题是页面上有很多链接，然后是除此之外的任何开销 - javascript、从服务器到浏览器的 header 等。快速完成类似操作的唯一方法就是简单地用 <a> 生成页面和<br/> s。

也就是说，JavaScript 会增加一点开销，减慢 <li> 的渲染速度。元素、播放器加载、向用户发送音乐(我假设是视频或音乐)、将其内容加载到浏览器中等等。通常，这些事情 - 减去播放器加载和流式传输内容 - 可以快速完成，但是当你考虑这么多元素时，它肯定会加起来。该页面获得良好响应时间的唯一方法是纯粹使用 <a>和<br /> ，并让一个单独的页面处理实际的媒体播放。我建议使用分页，就像评论中提到的那样，或者类似的东西，如果你能逃脱的话。