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

2023年10月4日 198次阅读

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

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

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

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

谢谢

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

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

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

点赞