Проблемы производительности с большим количеством элементов в Mithril.js

Question

Мое приложение имеет сортируемый и фильтруемый список и несколько входов и флажков. Проблема возникает, если в списке более 500 элементов, тогда каждый элемент с пользовательским вводом (флажки, поля ввода, меню) начинает отставать примерно на полсекунды с увеличением количества элементов в списке. Сортировка и фильтрация списка выполняется достаточно быстро, но задержка на элементах ввода слишком велика.

Вопрос в следующем: как можно отделить список и элементы ввода?

Вот код списка:

var list = {}
list.controller = function(args) {
    var model = args.model;
    var vm = args.vm;
    var vmc = args.vmc;
    var appCtrl = args.appCtrl;

    this.items = vm.filteredList;
    this.onContextMenu = vmc.onContextMenu;

    this.isSelected = function(guid) {
        return utils.getState(vm.listState, guid, "isSelected");
    }
    this.setSelected = function(guid) {
        utils.setState(vm.listState, guid, "isSelected", true);
    }
    this.toggleSelected = function(guid) {
        utils.toggleState(vm.listState, guid, "isSelected");
    }
    this.selectAll = function() {
        utils.setStateBatch(vm.listState, "GUID", "isSelected", true, this.items());
    }.bind(this);
    this.deselectAll = function() {
        utils.setStateBatch(vm.listState, "GUID", "isSelected", false, this.items());
    }.bind(this);
    this.invertSelection = function() {
        utils.toggleStateBatch(vm.listState, "GUID", "isSelected", this.items());
    }.bind(this);

    this.id = "201505062224";
    this.contextMenuId = "201505062225";

    this.initRow = function(item, idx) {
        if (item.online) {
            return {
                id : item.guid,
                filePath : (item.FilePath + item.FileName).replace(/\\/g, "\\\\"),
                class : idx % 2 !== 0 ? "online odd" : "online even",
            }
        } else {
            return {
                class : idx % 2 !== 0 ? "odd" : "even"
            }
        }
    };

    // sort helper function
    this.sorts = function(list) {
        return {
            onclick : function(e) {
                var prop = e.target.getAttribute("data-sort-by")
                //console.log("100")
                if (prop) {
                    var first = list[0]
                    if(prop === "selection") {
                        list.sort(function(a, b) { 
                            return this.isSelected(b.GUID) - this.isSelected(a.GUID)
                        }.bind(this)); 
                    } else {
                        list.sort(function(a, b) {
                            return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
                        })
                    } 
                    if (first === list[0])
                        list.reverse()
                }
            }.bind(this)
        }
    }; 

    // text inside the table can be selected with the mouse and will be stored for
    // later retrieval
    this.getSelected = function() {
        //console.log(utils.getSelText());
        vmc.lastSelectedText(utils.getSelText());
    };
};

list.view = function(ctrl) {

    var contextMenuSelection = m("div", {
        id : ctrl.contextMenuId,
        class : "hide"
    }, [
    m(".menu-item.allow-hover", {
        onclick : ctrl.selectAll
    }, "Select all"),
    m(".menu-item.allow-hover", {
        onclick : ctrl.deselectAll
    }, "Deselect all"), 
    m(".menu-item.allow-hover", {
        onclick : ctrl.invertSelection
    }, "Invert selection") ]);

    var table = m("table", ctrl.sorts(ctrl.items()), [
    m("tr", [
            m("th[data-sort-by=selection]", {
                 oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
             }, "S"),
            m("th[data-sort-by=FileName]", "Name"),
            m("th[data-sort-by=FileSize]", "Size"), 
            m("th[data-sort-by=FilePath]", "Path"), 
            m("th[data-sort-by=MediumName]", "Media") ]), 
    ctrl.items().map(function(item, idx) {
        return m("tr", ctrl.initRow(item, idx), {
            key : item.GUID
        },
        [ m("td", [m("input[type=checkbox]", {
            id : item.GUID,
            checked : ctrl.isSelected(item.GUID),
            onclick : function(e) {ctrl.toggleSelected(this.id);}
        }) ]),
        m("td", {
            onmouseup: function(e) {ctrl.getSelected();}
            }, item.FileName), 
        m("td", utils.numberWithDots(item.FileSize)), 
        m("td", item.FilePath), 
        m("td", item.MediumName) ])
    }) ])

    return m("div", [contextMenuSelection, table])
}

И вот как список и все другие компоненты инициализируются из основного представления приложений:

// the main view which assembles all components
var mainCompView = function(ctrl, args) {
    // TODO do we really need him there?
    // add the main controller for this page to the arguments for all
    // added components
    var myArgs = args;
    myArgs.appCtrl = ctrl;

    // create all needed components
    var filterComp = m.component(filter, myArgs);
    var part_filter = m(".row", [ m(".col-md-2", [ filterComp ]) ]);

    var listComp = m.component(list, myArgs);
    var part_list = m(".col-md-10", [ listComp ]);

    var optionsComp = m.component(options, myArgs);
    var part_options = m(".col-md-10", [ optionsComp ]);

    var menuComp = m.component(menu, myArgs);
    var part_menu = m(".menu-0", [ menuComp ]);

    var outputComp = m.component(output, myArgs);
    var part_output = m(".col-md-10", [ outputComp ]);

    var part1 = m("[id='1']", {
        class : 'optionsContainer'
    }, "", [ part_options ]);

    var part2 = m("[id='2']", {
        class : 'menuContainer'
    }, "", [ part_menu ]);

    var part3 = m("[id='3']", {
        class : 'commandContainer'
    }, "", [ part_filter ]);

    var part4 = m("[id='4']", {
        class : 'outputContainer'
    }, "", [ part_output ]);

    var part5 = m("[id='5']", {
        class : 'listContainer'
    }, "", [ part_list ]);

    return [ part1, part2, part3, part4, part5 ];
}

// run
m.mount(document.body, m.component({
    controller : MainCompCtrl,
    view : mainCompView
}, {
    model : modelMain,
    vm : modelMain.getVM(),
    vmc : viewModelCommon
}));

Я начал обходить проблему, добавляя m.redraw.strategy("none") и m.startComputation/endComputation для щелчка по событиям, и это решает проблему, но является ли это правильным решением? Например, если я использую компонент Mithril от стороннего производителя вместе со своим компонентом списка, как мне сделать это для стороннего компонента, не меняя его код?

С другой стороны, может ли мой компонент списка использовать что-то вроде флага 'retain'? Таким образом, список не перерисовывается по умолчанию, если не указано, что делать? Но проблема со сторонним компонентом сохранится.

Я знаю, что есть другие стратегии для решения этой проблемы, такие как нумерация страниц для списка, но я хотел бы знать, каковы лучшие практики с мифриловой стороны.

Заранее спасибо, Стефан

Answer 1

Благодаря комментарию от Барни я нашел решение: отбор окклюзии. Оригинальный пример можно найти здесь http://jsfiddle.net/7JNUy/1/. Я адаптировал код под свои нужды, особенно была необходимость регулировать события прокрутки, чтобы количество перерисовок было достаточно для плавной прокрутки. Посмотрите на функцию obj.onScroll.

var list = {}
list.controller = function(args) {
    var obj = {};

    var model = args.model;
    var vm = args.vm;
    var vmc = args.vmc;
    var appCtrl = args.appCtrl;

    obj.vm = vm;
    obj.items = vm.filteredList;
    obj.onContextMenu = vmc.onContextMenu;

    obj.isSelected = function(guid) {
        return utils.getState(vm.listState, guid, "isSelected");
    }
    obj.setSelected = function(guid) {
        utils.setState(vm.listState, guid, "isSelected", true);
    }
    obj.toggleSelected = function(guid) {
        utils.toggleState(vm.listState, guid, "isSelected");
        m.redraw.strategy("none");
    }
    obj.selectAll = function() {
        utils.setStateBatch(vm.listState, "GUID", "isSelected", true, obj.items());
    };
    obj.deselectAll = function() {
        utils.setStateBatch(vm.listState, "GUID", "isSelected", false, obj.items());
    };
    obj.invertSelection = function() {
        utils.toggleStateBatch(vm.listState, "GUID", "isSelected", obj.items());
    };

    obj.id = "201505062224";
    obj.contextMenuId = "201505062225";

    obj.initRow = function(item, idx) {
        if (item.online) {
            return {
                id : item.GUID,
                filePath : (item.FilePath + item.FileName).replace(/\\/g, "\\\\"),
                class : idx % 2 !== 0 ? "online odd" : "online even",
                onclick: console.log(item.GUID)
            }
        } else {
            return {
                id : item.GUID,
                // class : idx % 2 !== 0 ? "odd" : "even",
                onclick: function(e) { obj.selectRow(e, this, item.GUID); 
                    m.redraw.strategy("none");
                    e.stopPropagation();
                }
            }
        }
    };

    // sort helper function
    obj.sorts = function(list) {
        return {
            onclick : function(e) {
                var prop = e.target.getAttribute("data-sort-by")
                // console.log("100")
                if (prop) {
                    var first = list[0]
                    if(prop === "selection") {
                        list.sort(function(a, b) { 
                            return obj.isSelected(b.GUID) - obj.isSelected(a.GUID)
                        }); 
                    } else {
                        list.sort(function(a, b) {
                            return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
                        })
                    } 
                    if (first === list[0])
                        list.reverse()
                } else {
                    e.stopPropagation();
                    m.redraw.strategy("none");
                }
            }
        }
    }; 

    // text inside the table can be selected with the mouse and will be stored
    // for
    // later retrieval
    obj.getSelected = function(e) {
        // console.log("getSelected");
        var sel = utils.getSelText();
        if(sel.length != 0) {
            vmc.lastSelectedText(utils.getSelText());
            e.stopPropagation();
            // console.log("1000");
        }
        m.redraw.strategy("none");
        // console.log("1001");
    };

    var selectedRow, selectedId;
    var eventHandlerAdded = false;

    // Row callback; reset the previously selected row and select the new one
    obj.selectRow = function (e, row, id) {
        console.log("selectRow " + id);
        unSelectRow();
        selectedRow = row;
        selectedId = id;
        selectedRow.style.background = "#FDFF47";
        if(!eventHandlerAdded) {
            console.log("eventListener added");
            document.addEventListener("click", keyHandler, false);
            document.addEventListener("keypress", keyHandler, false);
            eventHandlerAdded = true;
        }
    };

    var unSelectRow = function () {
        if (selectedRow !== undefined) {
            selectedRow.removeAttribute("style");
            selectedRow = undefined;
            selectedId = undefined;
        }
    };

    var keyHandler = function(e) {
        var num = parseInt(utils.getKeyChar(e), 10);
        if(constants.RATING_NUMS.indexOf(num) != -1) {
            console.log("number typed: " + num);

            // TODO replace with the real table name and the real column name
            // $___{<request>res:/tables/catalogItem</request>}
            model.newValue("item_update_values", selectedId, {"Rating": num}); 
            m.redraw.strategy("diff");
            m.redraw();
        } else if((e.keyCode && (e.keyCode === constants.ESCAPE_KEY))
                || e.type === "click") {
            console.log("eventListener removed");
            document.removeEventListener("click", keyHandler, false);
            document.removeEventListener("keypress", keyHandler, false);
            eventHandlerAdded = false;
            unSelectRow();
        }
    };

    // window seizes for adjusting lists, tables etc
    vm.state = {
        pageY : 0,
        pageHeight : 400
    };
    vm.scrollWatchUpdateStateId = null;

    obj.onScroll = function() {
        return function(e) {
            console.log("scroll event found");
            vm.state.pageY = e.target.scrollTop;
            m.redraw.strategy("none");
            if (!vm.scrollWatchUpdateStateId) {
                vm.scrollWatchUpdateStateId = setTimeout(function() {
                // update pages
                m.redraw();
                vm.scrollWatchUpdateStateId = null;
                }, 50);
            }
        }
    };

    // clean up on unload
    obj.onunload = function() {
        delete vm.state;
        delete vm.scrollWatchUpdateStateId;
    };

    return obj;
};

list.view = function(ctrl) {

    var pageY = ctrl.vm.state.pageY;
    var pageHeight = ctrl.vm.state.pageHeight;
    var begin = pageY / 41 | 0
    // Add 2 so that the top and bottom of the page are filled with
    // next/prev item, not just whitespace if item not in full view
    var end = begin + (pageHeight / 41 | 0 + 2)
    var offset = pageY % 41
    var heightCalc = ctrl.items().length * 41;

    var contextMenuSelection = m("div", {
        id : ctrl.contextMenuId,
        class : "hide"
    }, [
    m(".menu-item.allow-hover", {
        onclick : ctrl.selectAll
    }, "Select all"),
    m(".menu-item.allow-hover", {
        onclick : ctrl.deselectAll
    }, "Deselect all"), 
    m(".menu-item.allow-hover", {
        onclick : ctrl.invertSelection
    }, "Invert selection") ]);

    var header = m("table.listHeader", ctrl.sorts(ctrl.items()), m("tr", [
    m("th.select_col[data-sort-by=selection]", {
         oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
     }, "S"),
    m("th.name_col[data-sort-by=FileName]", "Name"),
    ${  <request>
            # add other column headers as configured
            <identifier>active:jsPreprocess</identifier>
            <argument name="id">list:table01:header</argument>
        </request>
    } ]), contextMenuSelection);

    var table = m("table", ctrl.items().slice(begin, end).map(function(item, idx) {
        return m("tr", ctrl.initRow(item, idx), {
            key : item.GUID
        },
        [ m("td.select_col", [m("input[type=checkbox]", {
            id : item.GUID,
            checked : ctrl.isSelected(item.GUID),
            onclick : function(e) {ctrl.toggleSelected(this.id);}
        }) ]),
        m("td.nameT_col", {
            onmouseup: function(e) {ctrl.getSelected(e);}
            }, item.FileName), 
        ${  <request>
                # add other columns as configured
                <identifier>active:jsPreprocess</identifier>
                <argument name="id">list:table01:row</argument>
            </request>
         } ])
    }) );

    var table_container = m("div[id=l04]", 
            {style: {position: "relative", top: pageY + "px"}}, table);

    var scrollable = m("div[id=l03]", 
            {style: {height: heightCalc + "px", position: "relative", 
                top: -offset + "px"}}, table_container);

    var scrollable_container = m("div.scrollableContainer[id=l02]", 
            {onscroll: ctrl.onScroll()}, scrollable );

    var list = m("div[id=l01]", [header, scrollable_container]);

    return list;
}

Спасибо за комментарии!

Answer 2

В документах есть несколько хороших примеров изменения стратегии перерисовки: http://mithril.js.org/mithril.redraw.html

Но в целом изменение стратегии перерисовки редко используется, если где-то хранится состояние приложения, чтобы Mithril мог получить доступ и вычислить разницу, не касаясь DOM. Кажется, что ваши данные в другом месте, так что может быть, что ваш sorts метод становится дорогим для запуска после определенного размера?

Вы можете отсортировать список только после событий, которые его изменяют. В противном случае он будет отсортирован при каждом перерисовывании мифрила, что может быть довольно часто.

m.start/endComputation полезно для стороннего кода, особенно если он работает на DOM. Если в библиотеке хранится какое-то состояние, вы должны также использовать его для состояния приложения, чтобы не было лишних и, возможно, несоответствующих данных.