Question

我开发了一个关于产品及其产品的应用程序。在该应用程序中，在一个页面上，它仅在单页上加载了近10,000个产品详细信息我在这里附上了原始截图：

http://img51.imageshack.us/img51/4430/uploadm.jpg

作为第一步，页面加载一个空结构，其中没有产品detials。然后使用javascript BigPipe，它会在结构中添加产品的详细信息。

产品明细结构：

<div class="product_disp" 
onclick="return clickEffect(this,event);"   
onmousemove="return show_img_trail('product_details');"     
onmouseout="return hide_img_trail(this);" align="left" >    
<img src="pic.jpg" class="prodcuts_img"/>   
<span style="overflow:hidden;" align="left"> <b> Product_3 </b> <br/> 
id : 8146 <br /></span> 
<span style="padding:0px;width: 100%;" align="right">Available </span> 
</div>

但是当我尝试向下滚动product_details <div>的滚动条时，它会慢慢滚动。

我能做些什么来使滚动像正常一样？我不知道究竟是什么让它慢了。

Answer 1

有很多选项，它们可能并非都适用，但这里有一些：

不要在一个页面上加载10,000个项目，而是选择加载可能100个，然后允许用户翻页（使用传统页面选择器，或者当他们到达底部时使用“加载更多”链接，或者甚至自动加载，因为它们滚动到底部）。
为从单个元素冒泡到父级的任何事件移动JavaScript事件绑定，然后在那里处理它们。要轻松完成此操作，请使用jQuery.live('event', function(){ ... });。
使用样式表而不是将样式内联。并确保您的选择器具有高性能（不要过度限定它们，更喜欢ID和类来添加长链元素名称等）。
一般来说（你似乎没有这样做）避免像阴影这样的CSS3效果，直到它们变得更加性能友好。
确保您没有执行过多的JavaScript查询（咳嗽，使用onscroll或对页面上的每个元素使用onmouseover，咳嗽）。

虽然没有看到你在JavaScript中做了什么以及你的CSS是什么样的，但是很难给出更多关于你情况的具体细节。

Answer 2

如果您需要针对您的案例的特定答案，最好的想法是提供完整的测试页面或网址。

您可以将10 000个产品保留在内存中（作为Javascript对象），而不会将所有产品显示为页面的一部分。它使布局计算更快。在滚动事件中尝试列出 10-20-30项或添加/删除。

使用事件委派来提高效果（根元素处理所有事件）

function normalize(e) {
    e = e || window.event;
    e.target || (e.target = e.srcElement);
    return e;
}

var root = document.getElementById("root");

root.onclick = function(e) {
    e = normalize(e);
    return clickEffect(e.target, e);
}

root.onmouseout = function(e) {
    e = normalize(e);
    return hide_img_trail(e.target);
}

使用mouseover代替mousemove（也授权）

root.onmouseover = function(e) {
    return show_img_trail('product_details');
}

从标记（HTML）中分离演示文稿（CSS）。它不会影响性能，但会使您的代码具有可读性和可维护性。

Answer 3

我几天就遇到了类似的问题！我们可以在那里提供什么样的其他创意界面？目前我在我的页面上使用事件委托，但我很好奇这种情况下的其他可能的接口。在我的情况下，分页或加载更多不是一个选项，那么我还能做什么呢？

HTML：如何在这里使滚动工作更快

3 个答案: