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

Question

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

4

我正在使用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>

- JReam

1

考虑使用gulp来打包和压缩你的JavaScript文件，这样可以大幅提高性能。你还可以将kendo的JavaScript文件放在文档头部，这将使它在呈现页面之前尝试下载文件。当前的情况是你的页面在JavaScript被下载并执行之前就已经呈现了，你可以通过确保首先加载js文件来解决这个问题。然后，将kendo设置代码放在正文中。 - JD Davis

@Jdsfighter - 谢谢！这是一个asp.net mvc5应用程序，使用bundler是否类似于使用gulp？ - JReam

打包工具如果我没记错的话并不是很高效，而且随着较新版本的 .Net 和 VS 的推出，他们实际上已经放弃了打包工具，改用 gulp 代替。在 VS2015 中，你可以原生支持 gulp、grunt 和 bower。这意味着你可以创建构建，自动下载、编译、打包和最小化项目构建所依赖的文件，并将它们复制到相应的文件夹中。 - JD Davis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jarosław Kończak · Accepted Answer

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

另一件事是Kendo总是以这种方式工作；首先创建元素，然后将其转换为小部件。

如果你在document.ready事件中创建小部件，所有站点内容（包括html和元素）都必须被加载，才能创建小部件。减少页面内容的大小可以改善其加载时间，但如果用户网络连接速度慢，仍会有此影响。

所以，你应该做的第一件事是隐藏要转换为小部件的元素，通过将其显示设置为none。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），特别是如果您正在创建通过Internet或您自己的“内部CDN”可用的站点，如果您在几个项目中使用相同的JavaScripts。