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

我现在有，搜索图像，并返回结果作为像这样一个列表元素在我的网站的搜索框：优化了巨大的无序列表使用Javascript

然后，每个图像具有点击事件相关联它只是添加一个叠加到单击图像的父级李。

有时我的搜索结果将包含300多个结果，这些结果在桌面上并不是什么大问题，但在移动设备上会造成巨大的延迟，当有人点击图片添加叠加层时，叠加层出现前可能需要4-5秒。

现在我想到了一个办法来解决这个问题是下面的：

添加所有li元素到数组（字符串不是一个DOM元素）
破坏原有的li元素。
计算屏幕的大小和多少图像可以在同一时间
添加滑块UI元素被示出为用于滚动好像列表
基于对位置滑块和多少元素，我们可以安装到从数组中的元素，我们可以清楚地看到屏幕提取物和销毁，其余
循环虽然返回数组结果和所有结果添加到单个字符串。然后将包含我们可以看到的所有结果的字符串追加到UL中。

我的问题是这会不会让我的表现增加？正如我相信我的初始问题是在太多的元素。

也是这是一个常见的事情要做，或者是否有更好的方法来做到这一点？

感谢

来源

2012-05-16 james

从哪里来的300多个元素？如果来自数据库，则修改页面以在开始时显示子集，例如30。然后在需要的时候使用AJAX获取下一个30，例如通过按钮点击或向下滚动。无限滚动。 –

@RoryMcCrossan他们来自数据库，但我需要尝试尽可能多的工作到浏览器上。人们可能会翻动很多页面，我宁愿没有必要每隔几秒钟就做一次ajax调用，因为人们从列表的顶部跳到底部。 – james

您可以尝试仅将click事件绑定到最外层的'ul'元素。（见：http：//api.jquery.com/on/，'selector'是'img'）。这只会绑定一个事件，并可以提高性能。 – Yoshi

上移动缓慢的表现似乎是由于大量的DOM项目。我已经试过各种方法，以加快对的jsfiddle代码（例如，减少jQuery的DOM请求的数量），但它仍然低迷http://jsfiddle.net/5LfMt/15/

我提出的建议的变化在你原来的问题：http://www.strudel.org.uk/test/stack.html它是非常粗糙的，没有任何错误检查，但表明基本思想的工作原理和速度更快。它应该也可以帮助页面渲染时间，因为浏览器不需要最初渲染所有500个图像。

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

来源

2012-05-19 16:33:43 slowe

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

回答

相关问题