The menu loads very slow

Hi
I have made a c# web Api (

[{"Id":1,"ParentId":0,"Title":"Hem","Url":null,"Publish":"Ja","LineUp":10,"Kind":"start"} ...)

thats work fine (about 40 rows)

I have also made a client solution that works fine but it takes a long time until the page loads. I changed from ej.web.all.min.js to ej.menu.min.js, thats helped a little but its still a "flicker" (3-4 seconds) before the page shows correctly. Is there anything i can do? (It seems to be a litle bit faster with edge then chrome....) Br Mattias Sweden

<!DOCTYPE html> <html> <head> <title>Menu Test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel='nofollow' href="Content/bootstrap.min.css" rel="stylesheet" /> <link rel='nofollow' href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> <link rel='nofollow' href="Content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" /> </head> <body> <ul id="MainMenu"></ul> <div id="Content"></div> <!-- JavaScript Area --> <script src="Scripts/jquery-1.9.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <script src="Scripts/ej/ej.core.min.js"></script> <script src="Scripts/ej/ej.data.min.js"></script> <script src="Scripts/ej/ej.menu.min.js"></script> <script type="text/javascript"> $(document).ready(function () { function getPageContent(Id) { var PathApiPage = "api/Page/" + Id; $.ajax({ dataType: "json", url: PathApiPage, success: function (data) { $("#Content").html(data.TextBody); } }); } function getMenu(data) { jQuery(function ($) { $("#MainMenu").ejMenu({ isResponsive: true, showArrow: true, fields: { dataSource: data, id: "Id", parentId: "ParentId", text: "Title", }, click: function (args) { getPageContent(args.ID); } }); }); } $.ajax({ isResponsive: true, type: "GET", dataType: "json", url: "/api/menu", success: function (data) { getMenu(data); }, error: function () { alert("Error"); } }); }); </script> </body> </html>



1 Reply

KV Karthikeyan Viswanathan Syncfusion Team March 3, 2017 11:48 AM UTC

Hi Mattias, 
 
Thanks for contacting Syncfusion support. 
 
Yes. The best way to improve a speed by using RequireJS. Essential JavaScript includes RequireJS support for all of its components, which implements the AMD (Asynchronous Module Definition) specification. Its main goal is to load the user-specified multiple custom scripts/modules in a particular order – as one relies on the other. Also, it improves the speed and quality of the code.    
    
JS help documentation link: https://help.syncfusion.com/js/requirejs     
 
Regards, 
Karthikeyan V. 


Loader.
Up arrow icon