javascript - Kendo ui 小部件加载缓慢

Question

This是我的博客，我使用了下面的示例代码，我想加载 kendo-ui 的外部资源，如下所示。他们的加载速度很慢，主要是 /kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js 加载速度更慢，我该如何实现这一点。

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

.k-input {  
    font-weight:bold !important; 
    font-size:12pt !important; 
    color: green !important;
}


::-webkit-input-placeholder {
   color: green;
}

::-webkit-input-placeholder {
   color: green;
   font-weight: 800;
}

:-moz-placeholder { /* Firefox 18- */
   color: green;  
   font-weight: 800;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: green;  
   font-weight: 800;
}

:-ms-input-placeholder {  
   color: green;  
   font-weight: 800;
}

 .container:hover{
background-color:#F0F2F3;
}

</style>
    
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div class="container" style="overflow: hidden;
border: 1px solid gray;
    width: 465px;
    margin-left: -180px;
padding: 30px 70px 30px 170px;">


        <div id="example" role="application" style="float:left;width:49%; margin-right:2%;margin-left: -32%;">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size" placeholder="Skills, Designations...." style="width: 230px;border-width: 2px !important; border-color: #D8D3D3 !important;" >
              <option />
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
        </div>
</div>
        
<div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -5px;">
		    <div id="select" class="demo-section k-content">
           
          
            <select id="size1" placeholder="Location" style="width: 140px;border-width: 2px !important; border-color: #D8D3D3 !important;" >
              <option />
              <option />Delhi
              <option />Bangalore
              <option />Jammu and kashmir
              <option />ahmedabad
              <option />Arunachal Pradesh
            </select>
     
            
        </div>
 </div>

<div id="example2" role="application" style="
float: right;
margin-left: 95px;
    width: 49%;
    margin-right: 14px;
    margin-top: -47px;">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size2" placeholder="Exp(Years)" style="width: 114px;border-width: 2px !important; border-color: #D8D3D3 !important;
" >
              <option />
              <option />0 Year
              <option />1
              <option />2
              <option />3
              <option />4
            </select>
     
            
        </div>
 </div>


<div id="example3" role="application" style="float:right;width:49%;margin-right:-102px;margin-top: -47px;">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size3" placeholder="Salary" style="width: 100px;border-width: 2px !important; border-color: #D8D3D3 !important;
">
              <option />
              <option />&lt;1 Lac
              <option />2
              <option />3
              <option />4
            </select>
     
            
        </div>
 </div>
</div>





            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();
$("#size2").kendoComboBox();
$("#size3").kendoComboBox();
                   
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");
var select = $("#size2").data("kendoComboBox");
var select = $("#size3").data("kendoComboBox");
				
                });
            </script>

Answer 1

您正在加载完整的剑道脚本，但您仅使用组合框，那么为什么不仅加载组合框脚本呢？

> kendo.all.min.js        2.653 KB   
> kendo.combobox.min.js      14 KB

Here您可以找到有关“仅您需要的”的更多信息