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

Question

我正在使用 Kendo UI 小部件，例如折线图、网格和日期选择器。我喜欢该产品，但是我注意到页面加载时存在延迟问题。

以网格为例；我首先看到一个标准的 HTML 表格加载，然后一秒钟后它被剑道网格重绘。

我的日期时间选择器、单选按钮等也是如此。这是我在我正在处理的仪表板的布局页面中按顺序使用的所有 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>

Answer 1

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

另一件事是剑道总是这样工作的。首先创建元素，然后将其转换为小部件。

如果您在document.ready 事件中创建小部件，则必须先加载网站的所有内容（包括 html 和元素），然后才能创建小部件。减小页面内容的大小将缩短其加载时间，但如果用户的网络连接速度较慢，您仍然会有此效果。

所以你应该做的第一件事就是隐藏你将转换为小部件的元素，方法是将其显示设置为无。剑道应该像往常一样显示小部件。在 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)，特别是如果您通过 Internet 或您自己的“内部网 CDN”创建站点，如果您在少数项目中使用相同的 javascript。