使用IE7、8时，ASP.NET Treeview存在性能问题

Question

我正在使用树形视图在我的asp.net应用程序中，其中有2000个节点。 树形视图在IE7,8上需要40秒才能加载，而在Firefox和Chrome上相同的页面只需要1/10的时间。 这个问题有解决方案吗？我尝试搜索，但只找到未回答的问题。 如果这是IE 7,8的限制，那么原因是什么？ 是因为渲染引擎吗？ 是否有解决问题的方法？ 我的意思是，我尝试使用jquery treeview，但它会使IE挂起，并弹出慢脚本的警报。

请帮忙。

- Ankit

---

你能展示一下你的树形视图控件吗？这样我们就可以看到你设置了哪些属性等。 - ChristiaanV

从可用性的角度来看，包含2000个节点的树形视图的页面几乎没有任何用处。 - IrishChieftain

我同意...但这就是要求，奇怪的要求会引领创新 :) - Ankit

@IrishChieftain - 我不同意。如果节点被折叠，从可用性的角度来看，拥有大量的项目并没有什么问题（如果有2000个顶级节点，那么我会同意你的观点）。作为参考，请在您的C：驱动器上打开Windows资源管理器窗口。左侧树包含超过2000个节点，但仍然完全可用。 - mikemanne

@Ankit - 如果您不发布在页面加载时运行的JavaScript代码，我不知道我们是否能够在这个问题上提供更多帮助。 - Peter

Answer 1

你试过这个jQuery插件吗？http://www.jstree.com/

它支持AJAX加载，非常适合2000个节点的树形结构。

- rkw

---

我不想要AJAX树。我正在寻找的是一种机制，可以一次性地渲染整个树形视图，并且具有良好的性能。 - Ankit

Answer 2

一定还有其他的问题。我对TreeView进行了性能测试，并能够在远少于40秒的时间内渲染包含5000个节点的复杂树结构。在IE8中，2000个节点的复杂树形结构渲染大约需要3秒钟。如果您可以提供有关树的更多细节，我可以提供更多的帮助。

我已经阅读过渲染HTML的数量是在处理大型树形结构时所需时间的最大因素之一。甚至简单的事情，例如通过缩短页面名称（如果您的节点直接链接到页面）来减少URL字符串的长度，或者用更高级的样式表使用技术替换CSS类，都可以使树形结构渲染速度快得多。

以下是我生成随机复杂树形结构代码的_nodeCount大小：

ASPX页面上有一个名为tv的TreeView：

<asp:TreeView ID="tv" runat="server"></asp:TreeView>

代码后台看起来像下面这样：

private Random _rand = new Random();
private int _nodeCount = 2000;

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //create a big tree
        var itemCount = 0;
        while (itemCount < _nodeCount)
        {
            //create a parent item
            var n = new TreeNode("Node " + itemCount.ToString(), itemCount.ToString());
            itemCount++;

            tv.Nodes.Add(n);

            CreateSubItem(n, ref itemCount);
        }
    }
}

protected void CreateSubItem(TreeNode parent, ref int itemCount)
{
    //chance that we won't create a sub item
    if (_rand.Next(2) == 1 || itemCount > _nodeCount)
    {
        return;
    }

    var n = new TreeNode("Child Node " + itemCount.ToString(), itemCount.ToString());
    itemCount++;

    parent.ChildNodes.Add(n);

    CreateSubItem(n, ref itemCount);
    CreateSubItem(parent, ref itemCount);
}

更新 7/20
也许你可以将设置图标的 JavaScript 逻辑移植到 .NET 代码中，这应该会大大减少页面加载时间。这个页面 http://weblogs.asp.net/dannychen/archive/2006/01/25/436454.aspx 展示了如何自定义 TreeNode 的渲染；也许它可以成为你的一个好的起点。

- Peter

---

我已经关闭了视图状态以使页面变得轻量化，但在IE8上仍需要50秒才能加载。问题是我必须更改节点的图标，这只有在页面呈现后通过JavaScript才能实现。因此，呈现需要时间，因为它迭代节点并根据逻辑更改树形视图节点的图标。没有涉及CSS，只有JS。 - Ankit

看起来真正的问题是你需要提高JavaScript的性能或找到另一种设置图标的方式，从而提高性能。你可以发布JavaScript代码，以便我可以尝试帮助吗？ - Peter

@Ankit - 我已更新我的答案，包括一个讨论自定义TreeNode渲染的链接。也许你可以将你的javascript转换为.Net代码，并以此改善你的性能。 - Peter

您提供的链接展示了如何更新文本内容。我的需求是用一些自定义图片来更新图标（加号和减号）。 - Ankit

@Ankit - 这个链接只是一个起点。鉴于提供的示例，应该很容易弄清楚如何做更多的自定义文本渲染。 - Peter

Answer 3

当您打开从树形视图生成的呈现HTML时，您会发现该控件生成了大量的HTML表格、tr和td，我认为这需要很长时间才能在IE上呈现，因此建议您创建一个新的自定义Web控件，该控件继承自TreeView控件并更新“Render Method”以编写Div而不是HTML，这将需要专业的开发人员和HTML设计师来完成。

我认为您可以在此之后与社区共享这个新控件，我们可以与您一起改进它，以摆脱这个虚拟的ASP.NET GridView。

- Samir Adel

---

根据我的帖子https://dev59.com/tFjUa4cB1Zd3GeqPR3-0#6734147，真正的问题在于他使用的自定义JavaScript来设置图标。我的答案演示了生成更大的TreeView，仍然只需要几秒钟就可以在IE中呈现。 - Peter

Answer 4

在您的应用程序中使用AJAX并通过AJAX动态加载树形视图始终是一个好习惯。这里有一个链接...

http://www.codeproject.com/KB/ajax/selfloadelement.aspx

- Naveed Butt

---

尝试过了，但脚本变得无响应。你有支持的代码吗？ - Ankit

Answer 5

设置属性HoverNodeStyle-CssClass="nh"会使得在IE9中呈现TreeView的速度变慢。我移除了这个属性，性能恢复了。

- alxcalx