What is the slowest function in kendo? Or better, which function has most negative performance impact in kendo.
Recently, we were dealing with a simple page, which was too slow, as data binding took more than second.
The page contained a dropdown list, with ~1000 options. To understand the reason we have run this page under the IE's built-in javascript profiler, and ...
there, we have found that almost half of the time is taken by a function (call it X), which receives nothing and returns always the same result!
But, let's now see a minimal example that demostrates the problem:
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="scripts/jquery/jquery.js"></script> <script src="scripts/kendo/kendo.web.min.js"></script> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <link href="styles/style.css" rel="stylesheet" /> <script> var model; function init() { var source = []; for(var i = 0; i < 1000; ++i) { source.push({ text: "value " + i, value: "" + i }); } model = kendo.observable( { value: "1", source: new kendo.data.DataSource( { data: source }) }); model.source.read(); } function test() { kendo.bind("#view", model); } init(); </script> </head> <body> <p> <button onclick="test()">Click to start test</button> </p> <p id="view"> Select: <input data-role="dropdownlist" data-bind="value: value, source: source" data-text-field="text" data-value-field="value"/> </p> </body> </html>
There are two parts: initialization, and a test itself that starts upon button click.
In the initialization part we have defined a model, containing a datasource.
The test part performs data binding.
Now, here is a run statistics:
So, X is fast by itself, but it run 1000 times, and took about 44% of all time.
And now, to the function. It's kendo.data.binders.widget.source.fn._ns.
kendo.data.binders.widget.source.fn._ns
Here is its code:
_ns: function(ns) { ns = ns || kendo.ui; var all = [ kendo.ui, kendo.dataviz.ui, kendo.mobile.ui ]; all.splice($.inArray(ns, all), 1); all.unshift(ns); return kendo.rolesFromNamespaces(all); }
We can see that on each call it receives a parameter undefined, and always returns an array with the same content. Not sure why Kendo UI team made it so complex, but one can easily device a simple patch that optimizes this code path.
undefined
function patch() { var base = kendo.data.binders.widget.source.fn._ns; var result; kendo.data.binders.widget.source.fn._ns = function(ns) { return ns ? base.call(this, ns) : (result || (result = base.call(this, ns))); } }
With this patch applied, the profiler shows:
Execution time dropped considerably, and _ns() loses its title of most time consuming function!
An example can be found at slow.html.