Question

我正在优化使用Kendo TreeView显示大量分层数据的应用程序。目前，随着元素数量的增加，它变得非常缓慢。当前实现基于使用kendo.observableHierarchy的KendoUI的MVVM方法。我想知道我是否切换到kendo.data.HierarchicalDataSource。我有任何性能优势吗？一般来说，推荐的方法是什么？

我已将以下类型的代码用于当前实现。

 var viewModel = kendo.observable({
    isVisible: true,
    onSelect: function(e) {
        var treeView = e.sender;
        var text = treeView.text(e.node);
        kendoConsole.log("event :: select (" + text + ")");
    },
    files: kendo.observableHierarchy([
        { name: "My Web Site", type: "folder", expanded: true, items: [
            { name: "images", type: "folder", expanded: true, items: [
                { name: "logo.png", type: "image" },
                { name: "my-photo.jpg", type: "image" }
            ] },
            { name: "resources", type: "folder", expanded: true, items: [
                { name: "resources", type: "folder" },
                { name: "zip", type: "folder" }
            ] },
            { name: "about.html", type: "html" },
            { name: "index.html", type: "html" }
        ] }
    ]),
    printFiles: function() {
        // helper function that prints the relevant data from the hierarchical model
        var items = this.get("files").toJSON();

        function removeFields(item) {
            delete item.index;

            if (item.items.length == 0) {
                delete item.items;
            } else {
                item.items = $.map(item.items, removeFields);
            }

            return item;
        }

        $.map(items, removeFields);

        var jsonString = JSON.stringify(items, null, 2);

        return jsonString.replace(/\n/gi, "\n    ")
                    .replace(/\n\s*("name)/gi, " $1")
                    .replace(/\n\s*("type)/gi, " $1")
                    .replace(/\n\s*("expanded)/gi, " $1")
                    .replace(/\n\s*("selected)/gi, " $1")
                    .replace(/\n\s*("items)/gi, " $1")
                    .replace(/\s*\n\s*(})/gi, " $1")
                    .replace(/(\s*)]\n\s*}/gi, "] }");
    }
});
kendo.bind($("#example"), viewModel);

Answer 1

ObservableHierarchy正在使用HierarchicalDataSource来实现，因此从一个切换到另一个可能不会有太大变化。关于性能问题，有三个问题：要呈现的DOM元素的数量，对服务器的请求量以及传输的数据的大小。

如果问题是渲染元素花费的时间太长，可以通过将loadOnDemand选项设置为true来解决这个问题，这会导致在展开元素时渲染元素（如果你'使用本地数据，默认为false）。

如果您正在使用远程绑定并担心加载后的响应速度，则可以通过在一个请求中获取所有数据而不是为每个级别发出单独的请求来改善此问题（但如果您已经在使用本地数据，这不适用）。另一方面，如果你关心最初设置它需要多长时间，你应该使用loadOnDemand: true，这样小部件只会请求它需要从服务器显示的数据。

哪一个更适合绑定KendoUI TreeView - kendo.observableHierarchy或kendo.data.HierarchicalDataSource？

1 个答案: