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

Question

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

例如网格；我首先看到一个标准的 HTML 表格加载，然后大约一秒钟后它用剑道网格重新绘制。

我的日期时间选择器、单选按钮等也是如此。这是我在我正在处理的仪表板的布局页面中按顺序使用的所有 css 和脚本的示例...我正在不太喜欢捆绑，因此我将脚本保留在页面中。我知道如果你捆绑(如果它有效......)你会通过线程(？)获得轻微的性能但我似乎总是对 bundler 有问题所以我将它们留在页面中。是否有加载这些脚本的顺序，这样您就不会以用户身份看到元素的重绘？

页面顶部

<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

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

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

如果您在 document.ready 事件中创建小部件，则必须在创建小部件之前加载站点的所有内容(包括 html 和元素)。减小页面内容的大小将缩短加载时间，但如果用户的网络连接速度较慢，您仍然会产生这种效果。

因此，您应该做的第一件事是通过将其显示设置为无来隐藏您将转换为小部件的元素。 Kendo 应该像往常一样显示小部件。在 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 )，尤其是当您创建可通过互联网或您自己的“内部网 CDN”访问的站点时，如果您在少数项目中使用相同的 javascript。