我正在使用Kendo UI小部件,如折线图、网格和日期选择器。我很喜欢这个产品,但我注意到页面加载时存在延迟问题。
例如,在使用网格时,我首先看到一个标准的HTML表加载,然后一秒左右后它被重新绘制为Kendo网格。
我的日期选择器、单选按钮等也是如此。这是我在仪表板布局页面中按顺序使用的所有CSS和脚本的示例……我不太喜欢捆绑,因此将脚本保留在页面中。我知道如果您对它们进行捆绑(如果可行...),则可以通过线程(?)获得轻微的性能提升,但我总是遇到捆绑程序的问题,所以我将它们保留在页面中。是否有一种加载这些脚本的顺序,使用户不会看到元素的重绘呢?
页首
页面底部
例如,在使用网格时,我首先看到一个标准的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>