javascript - 如何做到自动移除与添加视窗外的dom？

Question

项目中使用了下拉刷新，但是出现了一个性能问题，就是一旦加载的内容多了，页面就变得很卡。
好像有一种方式是可以让视窗外的dom自动缓存下来，从dom树中移除，这样可以提高性能，但是不知道具体要怎么做
。

大概步骤和下面是否有出入？

1. 滚动出发检查元素是否在视窗外

2. 如果是，将对应dom中的节点全部移除，留下一个标记位。同时，该dom设置一个最小高度，避免页面发生高度的变化。

3. 当对应dom重新回到视窗内时，响应一个添加事件，根据标志位将缓存的内容添加到dom中。

之前参加了d-day，好像奇趣百科就是这样做的，但是具体实现方式自己没想明白，希望有大神能指点一下。

Answer 1

理论上，这种虚拟列表的方式确实能超大幅度的提升性能。

但是实际操作中一般不这样做，因为有太多坑要踩。

而且实际上，webview已经做了不显示 不渲染的优化。你再去做个应用层的优化显得多余。

主要是坑多，优化的收益比不过各种设备的使用情况下出现bug影响的用户体验。

Answer 2

参考 $.lazyload 中的方式判断是否可见。

    $.belowthefold = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }

        return fold <= $(element).offset().top - settings.threshold;
    };

    $.rightoffold = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $window.width() + $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left + $(settings.container).width();
        }

        return fold <= $(element).offset().left - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top;
        }

        return fold >= $(element).offset().top + settings.threshold + $(element).height();
    };

    $.leftofbegin = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left;
        }

        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };

    $.inviewport = function(element, settings) {
        return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };