用Javascript优化庞大无序列表

我目前在我的网站上有一个搜索框，用于搜索图像并以列表元素的形式返回结果，如下所示：

<ul>
    <li rel="1"><img src="imgurl" /></li>
    <li rel="2"><img src="imgurl" /></li>
    <li rel="3"><img src="imgurl" /></li>
    <li rel="4"><img src="imgurl" /></li>
</ul>

然后，每个图像都有一个与之关联的单击事件，该事件只是将覆盖添加到所单击图像的父li中

有时，我的搜索结果将包含300多个结果，这在桌面上不是什么大问题，但在移动设备上会造成巨大的延迟，例如，当有人单击图像添加覆盖时，覆盖显示可能需要4-5秒

现在我想到了一种解决方法，如下所示：

将所有li元素添加到数组中（作为字符串而不是DOM元素）

摧毁原始的李元素

计算屏幕的大小以及一次可以显示多少图像

添加用于在列表中滚动的滑块ui元素

基于滑块的位置以及我们可以安装的元素数量 屏幕从数组中提取我们可以看到的元素，并销毁其余元素

循环返回的数组结果，并将所有结果添加到单个字符串中。 然后将包含我们可以看到的所有结果的字符串附加到UL中

我的问题是，这真的会给我带来性能提升吗？正如我所相信的，我最初的问题是dom中的元素太多了

这是一件普通的事情，还是有更好的方法

---

感谢

移动设备上的缓慢性能似乎确实是由于DOM中的大量项目造成的。我尝试了各种方法来加速JSFIDLE上的代码（例如减少jQueryDOM请求的数量），但它仍然很缓慢

我对你原来的问题中的建议做了一个修改：它非常粗糙，没有任何错误检查，但表明基本想法有效，速度更快。它还可能有助于缩短页面渲染时间，因为浏览器最初不必渲染所有500幅图像

---

我假设你所有的照片都有相同的已知高度。我创建了一个文件名数组，然后确定哪些文件名是可见的。列表顶部的填充将被更新，以确保我们停留在文档中的正确位置。我附加了一个滚动侦听器，它更新列表-删除列表项，然后添加可见项。从DOM中删除它们的一个结果是覆盖也被删除了，所以我创建了一个数组来记录覆盖的状态

300+元素来自哪里？如果它来自数据库，请修改页面，使其在开头显示子集，例如30。然后在需要的时候使用AJAX获取下一个30，可以通过单击按钮或向下滚动，例如无限滚动。@Rorymcrossan它们来自数据库，但我需要尝试在浏览器上尽可能多地工作。人们可能会在页面上来回翻动，我不希望它每隔几秒钟就进行一次ajax调用，因为人们会从列表的顶部跳到底部。您可以尝试只将单击事件绑定到最外层的

ul

-元素。（请参阅：

selector

为

img

）。这只会绑定一个事件，并且可以提高性能。我实际上在使用$（'img'）。live（'click'，function（）等。使用on方法会提高性能吗？也许。另一件事，你能提供一个包含300多个元素列表的测试用例吗？用4个元素调试这个性能是不可能的；）（可以使用jsfiddle.net或codepad.org）