Question

假设我有两个非常长的人员列表，每个约20,000个，但在给定时间只显示一个列表。每个人都有姓名，昵称和年龄。目标是在列表中显示可以有效滚动，排序和搜索的每个人。另外，我需要能够在列表之间切换。我已经能够创建所需的功能，但个别操作不是非常用户友好。滚动不顺畅，排序/搜索/交换可以将UI冻结一两秒，有时页面甚至会崩溃。因此，我正在寻找以下代码的改进，我想知道是否可以使用此大小的列表实现流畅的用户体验，而无需使用虚拟渲染（仅使用视口可见的内容填充DOM并伪造滚动条）。提前致谢！

Javascript的结构如下：

var groupOne =
[
    {name: "Michael", nickname: "Mike", age: 23},
    {name: "Matthew", nickname: "Matt", age: 25},
    {name: "Aaron", nickname: "Ron", age: 30},
    ...
]

var groupTwo =
[
    {name: "Joseph", nickname: "Joe", age: 20},
    {name: "Carter", nickname: "C", age: 30},
    {name: "William", nickname: "Will", age: 40},
    ...
]

人员显示为：

---------------------------------
|           Name         |      |
-------------------------|  Age |
|           Nickname     |      |
---------------------------------

HTML的结构如下：

<input id="search" type="text">
<button id="sort"></button>
<button id="swap"></button>

<ol id="people">
    <li class="person" data-name="Michael" data-nickname="Mike" data-age="23">
        <p class="name">Michael</p>
        <p class="nickname">Mike</p>
        <p class="age">23</p>
    </li>
    <li class="person" data-name="Matthew" data-nickname="Matt" data-age="25">
        <p class="name">Matthew</p>
        <p class="nickname">Matt</p>
        <p class="age">25</p>
    </li>
    <li class="person" data-name="Aaron" data-nickname="Ron" data-age="30">
        <p class="name">Aaron</p>
        <p class="nickname">Ron</p>
        <p class="age">30</p>
    </li>
    ...
</ol>

搜索代码为：

$("#search").change(function ()
{
    var search = $(this).val();

    var list = document.getElementById("people");

    var items = list.children;

    for (var i = 0; i < items.length; i++)
    {
        var item = items[i];
        var name = item.getAttribute("data-name");

        if(search == "")
        {
            item.style.display = "block";
        }
        else if(name.indexOf(search) != -1)
        {
            item.style.display = "block";
        }
        else
        {
            item.style.display = "none";
        }
    }
});

排序代码是：

$("#sort").click(function ()
{
    var list = document.getElementById("people");

    var items = list.children;

    var itemArray = [];
    for (var i = 0; i < items.length; i++)
    {
        itemArray.push(items[i]);
    }

    itemArray.sort(function (a, b)
    {
        var nameA = a.getAttribute("data-name");
        var nameB = b.getAttribute("data-name");
        return nameA.localeCompare(nameB);
    });

    for (var i = 0; i < itemArray.length; i++)
    {
        list.appendChild(itemArray[i]);
    }
});

交换代码是：

$("#swap").click(function ()
{  
    var $people = $("#people");
    $people.empty();

    for(var i = 0; i < groupTwo.length; i++)
    {
        var person = groupTwo[i];

        var container = document.createElement("li");
        container.className = "person";
        container.setAttribute("data-name", person.name);
        container.setAttribute("data-nickname", person.nickname);
        container.setAttribute("data-age", person.age);

        var nameParagraph = document.createElement("p");
        nameParagraph.className = "name";
        nameParagraph.textContent = person.name;

        var nicknameParagraph = document.createElement("p");
        nicknameParagraph.className = "nickname";
        nicknameParagraph.textContent = person.nickname;

        var ageParagraph = document.createElement("p");
        ageParagraph.className = "age";
        ageParagraph.textContent = person.age;

        container.appendChild(nameParagraph);
        container.appendChild(nicknameParagraph);
        container.appendChild(ageParagraph);

       $people.append(container);
    }
});

到目前为止的发现：

绝对定位确实会影响滚动的顺畅性
使用嵌套的div进行定位确实可以改善滚动，但是通过$ .empty（）进行交换，通过$ .append（）进行排序，甚至导致崩溃
内联块似乎比浮动
表格布局可能会改善滚动但无法帮助进行交换/排序

滚动/排序/搜索/交换两个非常长的列表

0 个答案: