带有XML文件加载的ASP菜单控件太慢

时间:2019-01-06 15:44:58

标签: css asp.net xml

我的问题是关于带有ASP.Net和XML的菜单 我在这里使用3件事-主文件中的ASP菜单控件,菜单从其中加载到控件的XML文件。 ASP代码:

<div  class="menuxml">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="XmlDataSource1" RenderingMode="List" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" >
        <DataBindings>
            <asp:MenuItemBinding DataMember="Menu" TextField="Text" ValueField="Value"
                NavigateUrlField="Url" />
            <asp:MenuItemBinding DataMember="SubMenu" TextField="Text" ValueField="Value"
                NavigateUrlField="Url" />
        </DataBindings>
        <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="main_menu" />
            <asp:MenuItemStyle CssClass="level_menu" />
        </LevelMenuItemStyles>
    </asp:Menu>
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Files/menus.xml" XPath="/Menus/Menu"></asp:XmlDataSource>
</div>

XML文件:

<?xml version="1.0" encoding="utf-8" ?>
<Menus>
  <Menu Url="~/" Text="Home" Value="Home Page" />
  <Menu Url="~/icp/" Text="Coding problems" Value="Coding problems" />
  <Menu Url="javascript:;" Text="DS &amp; Algo. &#9662;" Value="DS &amp; Algo.">
    <SubMenu Url ="~/data-structure-tutorial/" Text="Data Structure" Value="Data Structure"></SubMenu>
    <SubMenu Url ="~/algorithms/" Text="Algorithms" Value="Algorithms"></SubMenu>
  </Menu>
  <Menu Url="javascript:;" Text="Languages &#9662;" Value="Languages">
    <SubMenu Url ="~/c/" Text="C" Value="C language"></SubMenu>
    <SubMenu Url ="~/cpp-tutorial/" Text="C++" Value="C++ language"></SubMenu>
    <SubMenu Url ="~/stl/" Text="C++ STL" Value="C++ STL"></SubMenu>
    <SubMenu Url ="~/java/" Text="Java" Value="Java language"></SubMenu>
    <SubMenu Url ="~/python/" Text="Python" Value="Python language"></SubMenu>
    <SubMenu Url ="~/dot-net/" Text="C#.Net" Value="C#.Net"></SubMenu>
    <SubMenu Url ="~/android/" Text="Android" Value="Android"></SubMenu>
    <SubMenu Url ="~/kotlin/" Text="Kotlin" Value="Kotlin"></SubMenu>
    <SubMenu Url ="~/sql/" Text="SQL" Value="SQL"></SubMenu>
  </Menu>
...
..

CSS文件:

  <style>
    .menuxml{
    background-color: #006969;
    color: #ffffff;
    font-size: 95%;
    font-weight: 500;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    }
    .main_menu,
    .main_menu:visited,
    .main_menu:hover {
    text-align: center;
    color: #ffffff;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-right: 8px;
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    }

    .main_menu:hover {
    background-color: #004949;
    color: #ffffff;
    }

    .level_menu,
    .level_menu:visited,
    .level_menu:hover {
    min-width: 100px;
    border-bottom:1px solid #ccc!important;
    background-color: #f1f1f1;
    color: #000000;
    text-align: left;
    height: 30px;
    line-height: 30px;
    padding-left: 7px;
    padding-right: 5px;
    }

    .level_menu:hover {
    background-color: #004949;
    color: #ffffff;
    }
  </style>

问题是:
菜单需要大约0.5到0.7秒的时间才能借出,同时其布局在所有设备上的网站上都非常混乱:
布局受干扰的时间不到一秒钟:
enter image description here
载入后的完美布局是:
enter image description here

问题?
有什么方法可以使它们快速运行,因为我既没有分析站点负载问题,也没有分析CSS问题。请帮帮我!

1 个答案:

答案 0 :(得分:0)

请您遵循以下解决方案并分享您的看法:

您可以通过document.ready部分中的Jquery绑定菜单。