Javascript 仅加载DOM的可见部分，并删除视口中不可见的DOM元素

我正在创建一个应用程序，其中新内容在向下滚动时加载到div中（使用AJAX），这允许用户以连续模式（无需导航）读取整个内容。但是，问题是，由于整个内容是非常巨大的，不断滚动将整个内容增量加载到DOM中，使得浏览器速度非常慢

---

是否可以使用javascript/jQuery删除视口中不可见的DOM元素，并在用户向上滚动时重新加载？

我建议，如果页面加载变得非常缓慢，您可以使用不同的方法加载和显示内容

要么这样做，要么返工正在显示的内容

---

这在Facebook和Twitter上起作用的原因是加载的内容非常“轻”（即只有几段文字和一些小图片）。

这是非常可能的

Ex:（将其粘贴到此页面上的浏览器控制台以显示效果）

$（窗口）。滚动（函数（）{
var threshold=0；//必须删除一个元素经过视口的像素数。
$（'.answer'）。每个（函数（）{
如果（$（此）.offset（）.top+$（此）.height（）+阈值<$（窗口）.scrollTop（））{
$（this.remove（））
} 
});
//处理向上滚动加载的方式与向下滚动添加新内容的方式相同。
});

$(window).scroll(function () { 
    var threshold = 0; // how many pixels past the viewport an element has to be to be removed.
    $('.answer').each(function () { 
        if($(this).offset().top + $(this).height() + threshold < $(window).scrollTop()) {       
            $(this).remove() 
        } 
    });
    // handle loading scroll up the same way you're adding new content as you scroll down. 
});