Jquery 在包含6000多个列表项的大型html列表中搜索

我有一个大的html列表，格式如下。html页面大小为6MB，有6000多个列表项。我想给它添加搜索和排序功能。我尝试过，它可以完美地处理较少的列表项，但当我加载6MB的html列表时，浏览器会崩溃，第一次脱机加载大约需要3到4分钟。如何在这个大列表中添加搜索

<li> <p class="vs" id="list1">
  &nbsp;content from list one 
</li>

<li> <p class="vs" id="list2">
  &nbsp;content from list two 
</li>

<li> <p class="vs" id="list3">
  &nbsp;content from list three
</li>

<li> <p class="vs" id="list4">
  &nbsp;content from list four
</li>

列表一中的内容


清单二的内容


清单三的内容


清单四的内容

首先将所有项目缓存到对象中：

var abbrs = {};

$("ul#abbreviations li").each(function (i) {
    abbrs[this.firstChild.nodeValue] = this;
});

然后在对象中查找键入的文本：

var li = abbrs[this.value.toUpperCase()];
// show li, hide others

更新：对于部分匹配，您必须遍历集合：

var filterBy = this.value.toUpperCase();

for (var abbr in abbrs) {
    if (abbr.indexOf(filterBy) !== -1) {
        var li = abbrs[abbr];
        // show li
    }
}

---

先生，我建议考虑

分页

。分页和服务器搜索如果我对列表进行分页，它会解决滞后问题吗？我应该用什么代码来完成它？同时进行分页和排序的代码