javascript - 在没有固定高度/虚拟化的情况下提高长列表的性能

Question

我有一个 Web 应用程序，可以显示展览会的参展商(以及其他)列表。当用户点击导航栏上的“参展商”时，它会加载一个列出所有参展商的页面。他们可以有各种可配置的细节，可能有也可能没有这些细节的数据(展位、视频等)。因此，UX 取消了为行设置固定高度的选项。

问题是，当我们加载此页面时，如果有 500 多家参展商，dom 会卡住，直到将它们全部呈现出来。这可能会花费大量时间，尤其是在移动设备上。没有固定的行高，虚拟化似乎几乎是不可能的。现在，我正在寻找一些想法来提高性能，同时又不会在很大程度上牺牲用户体验。

我尝试过的:

1. 批处理数据绑定(bind)。我已将列表分成 block 并通过一个匿名包装它们的队列运行它们并延迟它们以打破执行链。
2. 按需加载。仅绑定(bind)和渲染前 50 个左右，然后在滚动时加载并附加下一个 block 。

非常感谢任何想法/建议。

Answer 1

对于包含 500 个元素的列表，延迟加载可能是最好的选择。如果来自该请求的数据量不是很多，您可以在一个请求中下载所有必要的数据(假设这是来自 Web 服务)，然后按需添加到列表中，或者您可以执行一个请求对于每批元素。

此外，当您将元素添加到列表中时，请确保仅在一次迭代中将它们添加到 DOM，而不是为每个单独的元素添加 HTML，这将帮助您减少 DOM 的次数被迫回流，这对性能有很大帮助。

所以代替:

for ( i = 0; i < length; i++ ) {
    $(container).append($('<p>new element</p>'));
}

你会这样做:

html = '';
for ( i = 0; i < length; i++ ) {
    html += '<p>new element</p>';
}
$(container).append($(html));

-----更新-----这是我过去使用过的一些代码(假设您使用的是 jquery)

function contentNearBottom(container, child, threshold) {
    var total_height, current_scroll, visible_height;

    current_scroll = container.scrollTop();
    visible_height = container.height();
    total_height = child.height();

    if (threshold < 0) threshold = 0;

    //console.log('total: ' + total_height + ' threshold: ' + threshold + ' current: ' + current_scroll + ' visible: ' + visible_height);
    return ((total_height - threshold) <= (current_scroll - visible_height));
}

function lazyLoadMessages() {
    if (contentNearBottom($("div.content"), $("div.content > ul"), 2500)) {
        // load more data
    }
}

文档中某处准备就绪

$(document).on('scrollstart scrollstop', 'div.content', function(event) {
    lazyLoadMessages();
});

html

<div class="content">
    <ul>
    </ul>
</div>