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

Optimizing a huge Unordered List with Javascript

本文关键字：巨大 一个 无序 列表 Javascript 优化 使用      更新时间：2023-09-26

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

<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 秒才能出现叠加层。

现在我想到了解决这个问题的方法如下：

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

  2. 摧毁原来的li元素。

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

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

  5. 根据滑块的位置以及我们可以容纳多少元素 屏幕从数组中提取我们实际可以看到的元素并销毁其余元素

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

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

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

谢谢

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

我已经对你最初的问题中的建议做了一个变体：http://www.strudel.org.uk/test/stack.html 它非常粗糙，没有任何错误检查，但表明基本思想有效并且更快。它可能还应该有助于页面渲染时间，因为浏览器最初不必渲染所有 500 张图像。

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

相关文章：