动态变化的DOM元素，因为它们被卷入视图（性能） [英] Dynamically changing DOM-elements as they get's scrolled into view (performance)

问题描述

我正在尝试找到一个有效的算法来动态加载一堆< li> 的背景图像，并且有一些效率问题。我现在的代码如下所示：

  function elementInView（$ elem，vps，vpe）{
 var elempos = $ elem.position（）; 
 var pagestart = elempos.top + vps; 
 var pageend = elempos.top + vps + $ elem.height（）; 
 var offset = 78  -  Math.max（0，vps-pagestart） -  Math.max（0，pageend-vpe）; 
 //我想更新
的200像素内的所有项目//当前视口
 return（vpe> 0&&& offset> -200）; 
} 
 
 $（'＃container'）。bind（'scroll'，function（）{
 var $ container = $（this）; 
 var vps = $ container.scrollTop（）; 
 var vpe = vps + $ container.height（）; 
 
 $（'li：not（.bgset）'，'#container'）。每个（function（）{
 var $ this = $（this）; 
 if（elementInView（$ this，vps，vpe））{
 $ this.addClass（'。bgset'） ; 
 //设置背景图像（不会显着影响性能）
} 
}）; 
}）; 
  

在250个项目的列表中，这需要200-600 ms，一个约为1500 ms列出与〜1500项目，这使得它几乎不可用。

任何人都可以看到任何问题，或者这是基本上最好的方法吗？我试过获得全部< li> 而不是 $（'li：not（.bgset）'，但是根本没有任何影响。

（该列表包含动态生成的背景图像（不会被缓存并且被更改为一个很多），并且加载约1500个它们真的减慢了一切，这就是为什么我尝试了这种方法）

编辑：忘记了，我想过写一个自定义的jQuery选择器，匹配 elementInView 返回true的元素，这将是一个更好的方法？

解决方案

为了获得原始速度，您需要使用innerHTML。

为避免字符串操作，您可以考虑使用JS模板引擎，有很多的。我们已经构建了模板引擎 PURE ，因为它很小而快速，非常好地为手机构建页面。 p>

另一个选择可能是考虑上游的问题。您确定要向用户提供数百种/成千上万项目的清单吗？

I'm trying to find an efficient algorithm for dynamically loading background-images for a bunch of <li>'s, and are having some efficiency problems. My current code looks like this:

function elementInView($elem, vps, vpe) {
    var elempos = $elem.position(); 
    var pagestart = elempos.top + vps;
    var pageend = elempos.top + vps + $elem.height();
    var offset = 78 - Math.max(0,vps-pagestart) - Math.max(0,pageend-vpe);    
    // I want to update all items that are within 200 pixels of 
    // the current viewport
    return (vpe > 0 && offset > -200); 
}

$('#container').bind('scroll', function() {
    var $container = $(this);
    var vps = $container.scrollTop();
    var vpe = vps + $container.height();

    $('li:not(.bgset)', '#container').each(function() {
        var $this = $(this);
        if (elementInView($this,vps,vpe)) {
            $this.addClass('.bgset');
            // Set the background-image (doesn't affect performance noticably.)
        }
    });
});

This takes between 200-600 ms on a list with ~250 items, and ~1500 ms for a list with ~1500 items, which makes it pretty much unusable.

Can anyone see any problems with this, or is this basically the best way to do this? I've tried getting ALL <li>'s instead of $('li:not(.bgset)', but that didn't really have any impact at all.

(The list contains dynamically generated background-images (which doesn't get cached AND get's changed quite a lot), and loading around ~1500 of them really slowed everything down, which is why I tried this approach)

EDIT: Forgot to mention, I've thought about writing a custom jQuery-selector which matches the elements that return true for elementInView, would this be a better approach?

解决方案

The DOM is slow. To get raw speed, you need to use innerHTML.
To avoid string manipulations, you may consider a JS templating engine, there are plenty of them.
We've built the templating engine PURE, as it is tiny and fast, it works very well to build pages for mobiles.

Another option could be to consider the problem upstream. Are you sure you want to provide your user a list of hundreds/thousands of items?

这篇关于动态变化的DOM元素，因为它们被卷入视图（性能）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！