缓慢的 jquery 树视图加载

Question

我有一个从 http://jquery.bassistance.de/treeview/demo/ 获取的 jquery 树视图

当节点和子节点的数量很少时，我可以毫无问题地加载树，但随着内容的增长，加载需要很长时间，几乎到了使用树视图似乎是个坏主意的地步。

这是我构建树视图的视图的一部分

<script type="text/javascript">

    $(function () {
        $("#Ul1").treeview({

            collapsed: true,
            prerendered: true

        });


    });

</script>

<ul id="Ul1" class="treeview-black">
<%
    foreach (var t in (IEnumerable<itemSpecifications>)ViewData["items"])
{%>

    <li class="expandable"><span><%=Html.RouteLink(t.itemName, null, new { controller = "RQA", action = "itemaction", policyname = t.itemName})%></span>
     <%if (t.itemCount > 0)
       {%>

                <%for(int i=0;i<t.itemCount ;i++){%>
                                                     <ul>
                                                                <li class="expandable"><span><%=Html.RouteLink(t.subitems[i].Name, null, new { controller = "controller1", action = "itemUpdate", rule = t.subitems[i] })%></span></li>


                                                  </ul> 
                                                <%}%>


      <%}%>

<% }%>
</li>

</ul>

控制器包含以下代码：

public ActionResult Index()
    {     

            items1 = (from itemsInfo itemInfo in _itemInfoCollection
                         where itemInfo.Name == "val1"  
                         select new itemSpecifications
                         {
                             itemName = itemInfo.Name,
                          itemCount = GetItemscount(),                                 subitems = GetSubItems()                             });

              ViewData["items"] = items1 ;
               return View();
    }

有时加载整个页面需要很长时间，以至于页面基本上崩溃（无法加载），有时当页面成功加载并且我单击节点旁边的任何加号时，需要很长时间才能打开子项目。值得一提的是，平均子节点是 400 项，任何建议将不胜感激，我使用的是 MVC3，它在 IE 中

谢谢

Answer 1

听起来/看起来有问题的页面在初始加载时正在加载整个结构。这就是“预渲染”标志的作用。由于您的列表非常大（x 节点 + 每个节点 400 项），您正在关注重要的客户端性能问题，尤其是在较旧的 IE 浏览器中，它对 JS 操作的性能非常糟糕。

如果您动态加载每个子菜单而不是预渲染它，可能会更好。唯一的问题是随着 DOM 的增长，它最终会变慢。

您能否提供一个您尝试渲染的对象深度的样本，以及每个对象的参数数量？不需要真实的数据，只需要计数。 IE。节点级别 1 有 5 个参数，级别 1 上可以有多达 500 个节点；节点级别 2 有 12 个参数，级别 2 上可以有 400 个节点，等等。