javascript – 如何更快地加载Kendo UI小部件

2023年1月16日 171次阅读

我正在使用Kendo UI小部件,例如折线图,网格和日期选择器.我喜欢这个产品,但是当我加载页面时,我注意到了延迟问题.

例如与网格;我首先看到一个标准的HTML表加载,然后一秒钟左右,它用kendo网格重新绘制.

我的日期时间选择器,单选按钮等也是如此.这是我正在使用的仪表板的布局页面中按顺序使用的所有css和脚本的示例…我不是很大捆绑的粉丝,因此我将脚本保留在页面中.我知道,如果你捆绑(如果它工作……)你通过线程(？)获得了一点点性能但是我似乎总是遇到捆绑器的问题所以我将它们留在页面中.是否有一个序列来加载这些脚本,以便您不会看到重新绘制元素作为用户？

页面顶部

<link href="~/Content/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/css/style.css" rel="stylesheet" />

<link href="~/Content/css/animate.css" rel="stylesheet" />
<link href="~/Content/css/animations.css" rel="stylesheet" />
<link href="~/Content/css/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="~/Content/css/kendo/kendo.custom.css" rel="stylesheet" />
<link href="~/Content/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/fonts/fontello/css/fontello.css" rel="stylesheet" />

<link href="~/plugins/magnific-popup/magnific-popup.css" rel="stylesheet"/>
<link href="~/plugins/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="~/plugins/iCheck-1.x/skins/square/square.css" rel="stylesheet" />


@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

页面底部

@Scripts.Render("~/bundles/bootstrap")

<!-- Isotope javascript -->
<script type="text/javascript" src="~/plugins/isotope/isotope.pkgd.min.js"></script>

<!-- Owl carousel javascript -->
<script type="text/javascript" src="~/plugins/owl-carousel/owl.carousel.js"></script>

<!-- Magnific Popup javascript -->
<script type="text/javascript" src="~/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Appear javascript -->
<script type="text/javascript" src="~/plugins/jquery.appear.js"></script>

<!-- Sharrre javascript -->
<script type="text/javascript" src="~/plugins/jquery.sharrre.js"></script>

<!-- Count To javascript -->
<script type="text/javascript" src="~/plugins/jquery.countTo.js"></script>

<!-- Parallax javascript -->
<script src="~/plugins/jquery.parallax-1.1.3.js"></script>

<!-- Knob -->
<script src="~/plugins/jquery.knob.min.js"></script>

<!-- Contact form -->
<script src="~/plugins/jquery.validate.js"></script>

<!-- SmoothScroll javascript -->
<script type="text/javascript" src="~/plugins/jquery.browser.js"></script>
<script type="text/javascript" src="~/plugins/SmoothScroll.js"></script>

<!-- Initialization of Plugins -->
<script type="text/javascript" src="~/Scripts/template.js"></script>

<script src="~/plugins/iCheck-1.x/icheck.min.js"></script>
<script src="~/Scripts/kendo/jszip.min.js"></script>

<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

最佳答案 脚本优化是一回事.使用css缩小和捆绑就像使用@ Styles.Render()一样使用Javascript.它在生产环境中是强制性的(如果您不使用外部缩小).

另一件事是剑道总是以这种方式工作;首先创建元素,然后将其转换为小部件.

如果您在document.ready事件中创建窗口小部件,则必须在创建窗口小部件之前加载网站的所有内容(包括html和元素).减小页面内容的大小将改善其加载时间,但如果用户网络连接速度较慢,您仍会产生此效果.

因此,您应该做的第一件事是通过将其显示设置为none来隐藏您将转换为窗口小部件的元素.剑道应该像往常一样展示小部件.在asp版本中它可能有点困难,但你可以尝试隐藏元素容器并在一些小部件事件后显示它.

第二件事是你可以包含你在项目中使用的小部件的代码而不是整个kendo.all.min.js.您可以在此处找到更多信息：http://docs.telerik.com/kendo-ui/intro/installation/what-you-need(以及此处：http://docs.telerik.com/kendo-ui/using-kendo-with-requirejs).

最后一件事：您还可以考虑使用CDN(http://docs.telerik.com/kendo-ui/intro/installation/cdn-service),尤其是如果您在少数项目中使用相同的javascripts,则可以通过互联网或您自己的“Intranet CDN”创建站点.

点赞