Question

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

<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元素添加到数组中（AS A STRING不是DOM元素）
销毁原始li元素。
计算屏幕大小以及一次可以显示多少图像
添加一个滑块ui元素，用于滚动列表
根据滑块的位置以及我们可以放入的元素数量屏幕从数组中提取我们实际可以看到的元素并销毁其余元素
循环返回数组结果并将所有结果添加到单个字符串中。然后将包含我们可以看到的所有结果的字符串附加到UL中。

我的问题是，这实际上会让我的性能提升吗？因为我相信我的初始问题是dom中的元素太多了。

这也是常见的事情，或者有更好的方法吗？

由于

Answer 1

移动设备上的缓慢性能似乎是由于DOM中的大量项目。我已经尝试了各种方法来加速jsfiddle上的代码（例如减少jQuery DOM请求的数量），但它仍然缓慢http://jsfiddle.net/5LfMt/15/

我在原始问题中对该建议进行了修改：http://www.strudel.org.uk/test/stack.html它非常粗糙，没有任何错误检查，但表明基本想法有效并且更快。它应该也有助于页面渲染时间，因为浏览器最初不必渲染所有500个图像。

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

使用Javascript优化巨大的无序列表

1 个答案: