kendo-ui - Kendo Web UI 性能

Question

我在 Web 应用程序中使用 Kendo Web UI 日期选择器和 NumericTextBox，加载上下文非常慢，大约需要 3 秒。经过进一步调查，发现对服务器的 ajax 调用在 174 毫秒内获取数据，其余时间花在客户端上，这让我感到震惊。使用 console.time 查看详细信息发现 kendo web UI 花费了 80% 的时间。

html dom 使用 jquery $.get Ajax 方法加载。 OnSuccess 文档的 div 加载了 html 数据并运行 kendo NumericTextBox 和 DatePicker。

$(".currency").kendoNumericTextBox({ format: "c", decimals: 3, spinners: false });
$(".datepicker").kendoDatePicker();

以上两行代码耗时约 2194 毫秒。

有没有办法提高上述线路的速度？

我们将不胜感激。

Answer 1

问题不在于初始化 KendoDatePicker 和 KendoNumericTextBox，而是在表单中进行。

如果删除 <form>从你的 JSFiddle(比如 here 你会发现它非常快。

了解这一点并假设您确实需要该表格，您可能要做的是替换 form通过 div元素和一个 Kendo 初始化完成，包装新的 div通过你的form定义。

例子:

替换这个:

<div class="eCheckList-section">
    <div class="dividends eCheckList-Body">
        <form action="" method="post">
            <input id="FileId" name="FileId" type="hidden" value="68f323b2-128e-4f9d-91bc-c0fcfe0f7615" />
            <input data-val="true" data-val-number="The field ClientId must be a number." data-val-required="The ClientId field is required." id="ClientId" name="ClientId" type="hidden" value="28608" />
            ...
        </form>
    </div>
</div>

通过这个:

<div class="eCheckList-section">
    <div class="dividends eCheckList-Body">
        <div id="form">
            <input id="FileId" name="FileId" type="hidden" value="68f323b2-128e-4f9d-91bc-c0fcfe0f7615" />
            <input data-val="true" data-val-number="The field ClientId must be a number." data-val-required="The ClientId field is required." id="ClientId" name="ClientId" type="hidden" value="28608" />
            ...
        </div>
    </div>
</div>

然后，用于初始化 Kendo 小部件和创建 form 的代码:

console.time("#kendoNumericTextBox");
$(".currency").kendoNumericTextBox({ 
    format: "c", 
    decimals: 3, 
    spinners: false
});
console.timeEnd("#kendoNumericTextBox");

console.time("#kendoDatePicker")
$(".datepicker").kendoDatePicker();
console.timeEnd("#kendoDatePicker");

console.time("#buildForm");
$("#form").wrap("<form action='' method='post'></form>");
console.timeEnd("#buildForm")

您的 JSFiddle 在此处修改:http://jsfiddle.net/OnaBai/jf2s9/3/