javascript - 处理 HTML/Javascript 中的数千个列表元素

Question

我有一个 UI 场景，其中包含一个列表 ( <ul> )，其中可能包含大量列表项 ( <li> )。该场景包括使用 jQuery 搜索、过滤(针对类和属性)、删除和创建这些项目。处理这种情况的最佳实践和优化是什么？对于大量元素，UI 会变得多慢/多重？

Answer 1

为了获得最佳性能，请在 DOM 外部使用对象，并通过最后附加所有内容并委托(delegate)事件来避免过度回流。

$('<li/>', { ... }).appendTo('#el'); // Dynamic object, appended at last
$('ul').on('click', 'li', function(){ ... }); // Delegate events

如果您必须使用 DOM 中的元素，那么最好使用 detach() 元素或 clone() 它，使用它，然后 append() 再次将其添加到 DOM。