How To: Improve View Rendering Speed
- 3 minutes to read
This topic complements the How to: Improve page rendering speed topic and contains information specific to DevExpress ASP.NET MVC Extensions.
Optimize Resources
DevExpress ASP.NET MVC project templates register styles and scripts for all available suites. This reduce the View render speed.
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
...
new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
...
new Script { ExtensionSuite = ExtensionSuite.TreeList }
)
Do any of the following to resolve the issue:
Exclude the links to resources for unused suites.
Register resources only for suites (or individual extensions) that you use in the application.
All DevExpress ASP.NET MVC extension suites.
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.All } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.All } )The Editors and Site Navigation and Layout suites.
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new StyleSheet { ExtensionSuite = ExtensionSuite.Editors } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new Script { ExtensionSuite = ExtensionSuite.Editors } )The PopupControl extension.
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.PopupControl } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.PopupControl } )Refer to the Extension Sheet topic to get the list of available suites and included extensions.
Include styles and scripts in specific Views only.
- Remove directives for styles and scripts from the main Layout View.
- Specify the “head” section in the main Layout View.
- Specify the “head” section in a View.
- Render a Partial View with a set of script/styles based on DevExpress ASP.NET MVC Extensions used in this View.
Before
Layout
<!DOCTYPE html> <html> <head> ... @Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout } ) </head> <body> @RenderBody() </body> </html>View
@Html.DevExpress().Menu(...).GetHtml()After
Layout
<!DOCTYPE html> <html> <head> ... @RenderSection("HeadResources", false) </head> <body> @RenderBody() </body> </html>View
@section HeadResources{ @Html.Partial("NavigationAndLayoutHeadResources") } @Html.DevExpress().Menu(...).GetHtml()Partial View (NavigationAndLayoutHeadResources)
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout } )
Optimize Callback Management
When the total request/response cycle duration is too long, use the following technique to diagnose the issue:
- Use the System.Diagnostics.Stopwatch object to measure a Controller/Model’s elapsed time:
public ActionResult MeasuredActionMethod() {
System.Diagnostics.Stopwatch sw = System.Diagnostics.Stopwatch.StartNew();
// Execute your operations here
sw.Stop();
ViewData["Duration"] = sw.ElapsedMilliseconds.ToString();
return View();
}
@ViewData["Duration"]
- Use a browser’s DevTools -> Network profiler to measure the total request duration.