页面动态载入列表数据问题

在高性能web开发板块也有帖子，好的答案可以继续加分哈:)
如，电子商务网站的商品列表页。
类似于cn.bing.com初次访问读取L个商品信息，载入N个商品(N<=L)，并初始化M个空商品占位。
当滚动条拉到显示超过K个商品时，继续载入J个商品。
当滚动条拉到显示超过I个商品时，向服务器请求(L+1)到(L+H)的商品信息，并再次判断是否需要载入商品。以此类推，已完成在用户拖动滚动条时能够流畅的动态载入商品数据，而不需要翻页。我的理解大概是这样的，其中可能还有其他优化细节，还要请教各位。有感兴趣的，有过经验的请不吝赐教~

解决方案 »

  1.   

    楼主说的类似于t.qq.com的腾讯微博那样吧，随着向下拉而自动显示数据那种
      

  2.   

    我靠，楼上的鄙视你问题是个优化问题，不是实现问题。实现只是小kiss比如：jQuery 中 li:eq(index) 的性能如何，在IE下的渲染性能如何，是否能如意，有没有更好的方式，其性能能改进到什么程度，为什么。
      

  3.   

    2楼的，有点类似吧，像这样的http://cn.bing.com/images?FORM=Z9LH
    属于自动的动态载入。
      

  4.   

    上面我的描述文字只是我的一种理解，或者说我准备实现的逻辑。1 不一定非要这种逻辑。
    2 这个逻辑中还有很多未知数。有兴趣的可以去看看http://cn.bing.com/images?FORM=Z9LH上面每次载入多少张图片。
    60张，为什么？因为它可以适应屏幕宽度，每行显示可变数个图片，而60是3,4,5,6的最小公倍数。我猜的，呵呵。还有，仔细看它最多显示1000条，大家都不陌生。如果1000/60那么除去第一次加载的部分，那么还要16次加载数据。而如果你把页面最快的速度拉到最底部，那么你用httpwatch等工具看，它获取数据的次数不足16次。也就是说其中部分由于你的快速拖动，被它忽略了。等等吧，应该有很多优化细节。在这里是想与大家讨论下，或者请有过经验的人给予一些帮助。
      

  5.   

    类似下面原理<body onscroll="test()">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    <span style="color:red">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </span><br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span><br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span><br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span><br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    </body><script type="text/javascript">
    var v;
    var arr = new Array("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", 
    "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB", 
    "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", 
    "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD", 
    "EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE", 
    "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF", 
    "GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG", 
    "HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH", 
    "IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII", 
    "JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ", 
    "KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK");
    function test(){
    var t;
    if (document.documentElement && document.documentElement.scrollTop)t = document.documentElement.scrollTop;
    else if (document.body)t = document.body.scrollTop;
    var rand = Math.random(0, 11);
    rand = parseInt(rand * 10);
    if(t > v && t > 700 && ((t % 800 > 800) || (t % 700 < 10))){
    for(var i = 0; i < 20; i++){
    var div = document.createElement("div");
    div.innerHTML = arr[rand];
    document.body.appendChild(div);
    }
    }
    v = t;
    }
    </script>
      

  6.   

    再次声明我要的不是代码实现！~看好问题再回复还有楼上的， 写的程序我不知道你想要干什么 t%800>800，谁能告诉我这个什么时候能成立？！！
    搞那么大一串，想表达的意思难道就是它高800px？？
    还出来个rand？无语，php版啥时候变这样了
      

  7.   

    哎...
    你还到其他地方找高手吧，高人太多了，比你比我厉害的太多了，你也是刚到php版的吧，php版的就是这么热心，你如果认为这里不适合你你可以去你认为好的版去找更好的答案去，不要把一个人代表所有人，我回答的不好不代表这里所有的人都这样，真让人无语了，很多人都是认为别人赚他的分，但是有些人是不稀罕的，只是单纯的想帮你，也许没看仔细
      

  8.   


    再说了你是搞web的难道你看不出来代码中的结构更能清晰的反应功能么(rand)？看不出来就算了
      

  9.   

    ......不解释，你的代码你回去珍藏吧。
    你的partner会很头痛与你沟通的
      

  10.   

    删吧，删吧，我从02年来，就在php版。我都不知道这算是什么意思。
    开个帖子，热心我感谢，但希望别帮倒忙。一大堆没有任何意义的代码，以我的经验，很快这个帖子就会跑题，郁闷了，发发牢骚。
    我不是不探讨实现的技术问题，我是不探讨实现的代码细节。
    难道唠叨老大认为这个问题关键的是代码细节么？还是实现的逻辑上的细节与关于类似问题的一些经验。当然，我可能奢望了。
    但，没什么好的方案的前提下，我要它的实现代码有何用？
    php版，唠叨老大就仅仅想做成给新人的一个问问题的地方是么？那算我来错了
      

  11.   

    那个时候好像没有细分php版吧，反正我的分后来改版都给算成web大版的了
    那时候可用分很多的。
    那时候有孟子E章等一些老大在。也许是像我这样，只是偶尔才会热心给人解答下问题的人太多。这里慢慢变得冷清了。呵呵，惭愧惭愧。感慨感慨。版主，删了吧。这个帖子已经没有哪怕一点意义了。