javascript - ListModel.move() 非常慢

Question

我有一个TableView动态填充 ListModel我需要在“QML 端”进行排序，最好不要替换列表中的任何元素，因为几个表信号(包括一些自定义信号)附加了相当多的逻辑。

我遇到的问题是，当表增长超过 ~1k 个元素时，元素的移动会花费不合理的长时间(请参见下面的代码)。将排序放在 WorkerScript 中对改善用户体验几乎没有什么帮助，因为如果在大约 0.5 秒内没有任何反应，用户往往只是一次又一次地单击。所以我想知道是否有人知道一种方法来提高 ListModel.move() 的性能，暂时抑制信号，或者有其他解决方案？

最诚挚的问候

拉格纳

示例代码:

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4

ColumnLayout {
    width: 400

    TableView {
        id: table
        Layout.fillHeight: true
        Layout.fillWidth: true
        model: ListModel { dynamicRoles: false }
        onSortIndicatorColumnChanged: sort();
        onSortIndicatorOrderChanged: sort();

        TableViewColumn {
            role: "num"
            title: "Numeric column"
            width: table.contentItem.width / 3
        }
        TableViewColumn {
            role: "str"
            title: "Text column"
            width: table.contentItem.width * 2/3
        }

        // functionality
        function sort() {
            if(model.count < 2) {
                console.log("No need to sort.");
                return true;
            }
            var r = getColumn(sortIndicatorColumn).role;
            var type = typeof(model.get(0)[r]);
            if(type != "string" && type != "number") {
                console.log("Unable to sort on selected column.");
                return false;
            }
            switch(sortMethod.currentIndex) {
                case 0: var sortFunc = _sortMoveWhileNoCache; break;
                case 1: sortFunc = _sortMoveWhile; break;
                case 2: sortFunc = _sortMoveAfter; break;
                case 3: sortFunc = _sortSetAfter; break;
                case 4: sortFunc = _sortAppendRemoveAfter; break;
                default:
                    console.log("Unknown sort method.");
                    return false;
            }
            console.time(sortFunc.name);
            sortFunc(r);
            console.timeEnd(sortFunc.name);
            return true;
        }

        // invokers
        function _sortMoveWhileNoCache(r) {
            console.time("sortMove");
            _qsortMoveNoCache(r, 0, model.count-1);
            console.timeEnd("sortMove");
        }
        function _sortMoveWhile(r) {
            console.time("setUp");
            var arr = [];
            for(var i = model.count-1; i > -1; i--) arr[i] = model.get(i)[r];
            console.timeEnd("setUp");
            console.time("sortMove");
            _qsortMove(arr, 0, arr.length-1);
            console.timeEnd("sortMove");
        }
        function _sortMoveAfter(r) {
            console.time("setUp");
            var arr = [];
            arr[0] = { "val": model.get(0)[r], "oldIdx": 0, "oldPrev": null };
            for(var i = 1; i < model.count; i++) {
                arr[i] = { "val": model.get(i)[r],
                           "oldIdx": i,
                           "oldPrev": arr[i-1] };
            }
            console.timeEnd("setUp");
            console.time("sort");
            _qsortVal(arr, 0, arr.length-1);
            console.timeEnd("sort");
            console.time("move");
            for(i = 0; i < arr.length; i++) {
                if(arr[i].oldIdx !== i) {
                    model.move(arr[i].oldIdx, i, 1);
                    for(var prev = arr[i].oldPrev;
                        prev !== null && prev.oldIdx >= i;
                        prev = prev.oldPrev)
                        prev.oldIdx++;
                }
            }
            console.timeEnd("move");
        }
        function _sortSetAfter(r) {
            console.time("setUp");
            var arr = [], tmp = [];
            for(var i = model.count-1; i > -1; i--) {
                var lmnt = model.get(i);
                // shallow clone
                tmp[i] = Object.create(lmnt);
                for(var p in lmnt) tmp[i][p] = lmnt[p];
                arr[i] = { "val": tmp[i][r], "oldIdx": i };
            }
            console.timeEnd("setUp");
            console.time("sort");
            _qsortVal(arr, 0, arr.length-1);
            console.timeEnd("sort");
            console.time("set");
            // set()ing invalidates get()ed objects, hence the cloning above
            for(i = 0; i < arr.length; i++) model.set(i, tmp[arr[i].oldIdx]);
            console.timeEnd("set");
            delete(tmp);
        }
        function _sortAppendRemoveAfter(r) {
            console.time("setUp");
            var arr = [], tmp = [];
            for(var i = model.count-1; i > -1; i--) {
                tmp[i] = model.get(i);
                arr[i] = { "val": tmp[i][r], "oldIdx": i };
            }
            console.timeEnd("setUp");
            console.time("sort");
            _qsortVal(arr, 0, arr.length-1);
            console.timeEnd("sort");
            console.time("appendRemove");
            // append()ing does not, on win10 x64 mingw, invalidate
            for(i = 0; i < arr.length; i++) model.append(tmp[arr[i].oldIdx]);
            model.remove(0, arr.length);
            console.timeEnd("appendRemove");
        }

        // sorting functions
        function _qsortMoveNoCache(r, s, e) {
            var i = s, j = e, piv = model.get(Math.floor((s+e)/2))[r];
            while(i < j) {
                if(sortIndicatorOrder == Qt.AscendingOrder) {
                    for(; model.get(i)[r] < piv; i++){}
                    for(; model.get(j)[r] > piv; j--){}
                } else {
                    for(; model.get(i)[r] > piv; i++){}
                    for(; model.get(j)[r] < piv; j--){}
                }
                if(i <= j) {
                    if(i !== j) {
                        model.move(i, j, 1);
                        model.move(j-1, i, 1);
                    }
                    i++;
                    j--;
                }
            }
            if(s < j) _qsortMoveNoCache(r, s, j);
            if(i < e) _qsortMoveNoCache(r, i, e);
        }
        function _qsortMove(arr, s, e) {
            var i = s, j = e, piv = arr[Math.floor((s+e)/2)];
            while(i < j) {
                if(sortIndicatorOrder == Qt.AscendingOrder) {
                    for(; arr[i] < piv; i++){}
                    for(; arr[j] > piv; j--){}
                } else {
                    for(; arr[i] > piv; i++){}
                    for(; arr[j] < piv; j--){}
                }
                if(i <= j) {
                    if(i !== j) {
                        model.move(i, j, 1);
                        model.move(j-1, i, 1);
                        var tmp = arr[i];
                        arr[i] = arr[j];
                        arr[j] = tmp;
                    }
                    i++;
                    j--;
                }
            }
            if(s < j) _qsortMove(arr, s, j);
            if(i < e) _qsortMove(arr, i, e);
        }
        function _qsortVal(arr, s, e) {
            var i = s, j = e, piv = arr[Math.floor((s+e)/2)].val;
            while(i < j) {
                if(sortIndicatorOrder == Qt.AscendingOrder) {
                    for(; arr[i].val < piv; i++){}
                    for(; arr[j].val > piv; j--){}
                } else {
                    for(; arr[i].val > piv; i++){}
                    for(; arr[j].val < piv; j--){}
                }
                if(i <= j) {
                    if(i !== j) {
                        var tmp = arr[i];
                        arr[i] = arr[j];
                        arr[j] = tmp;
                    }
                    i++;
                    j--;
                }
            }
            if(s < j) _qsortVal(arr, s, j);
            if(i < e) _qsortVal(arr, i, e);
        }
    }

    RowLayout {
        Button {
            Layout.fillWidth: true
            text: "Add 1000 elements (" + table.model.count + ")"
            onClicked: {
                var chars = " abcdefghijklmnopqrstuvxyzABCDEFGHIJKLMNOPQRSTUVXYZ";
                for(var i = 0; i < 1000; i++) {
                    var str = "";
                    for(var j = 0; j < Math.floor(Math.random()*20)+1; j++)
                        str += chars[Math.floor(Math.random()*chars.length)];
                    table.model.append({ "num": Math.round(Math.random()*65536),
                                         "str": str });
                }
            }
        }
        Button {
            text: "Clear list model"
            onClicked: table.model.clear();
        }
        ComboBox {
            id: sortMethod
            Layout.fillWidth: true
            editable: false
            model: ListModel {
                ListElement { text: "Move while sorting, no cache" }
                ListElement { text: "Move while sorting" }
                ListElement { text: "Move after sorting" }
                ListElement { text: "Set after sorting" }
                ListElement { text: "Append and remove after sorting" }
            }
        }
    }
}

当使用 Qt-win10-x64-mingw、5k 元素运行上述代码时，清除每种排序方法之间的列表，我得到以下结果(_sortSetAfter 比 _sortMoveWhile[NoCache] 快 20 倍)

// num
sortMove: 3224ms
_sortMoveWhileNoCache: 3224ms
// str
sortMove: 3392ms
_sortMoveWhileNoCache: 3392ms

// num
setUp: 20ms
sortMove: 4684ms
_sortMoveWhile: 4704ms
// str
setUp: 16ms
sortMove: 3421ms
_sortMoveWhile: 3437ms

// num
setUp: 18ms
sort: 15ms
move: 4985ms
_sortMoveAfter: 5018ms
// str
setUp: 8ms
sort: 20ms
move: 5200ms
_sortMoveAfter: 5228ms

// num
setUp: 116ms
sort: 21ms
set: 27ms
_sortSetAfter: 164ms
// str
setUp: 63ms
sort: 26ms
set: 25ms
_sortSetAfter: 114ms

// num
setUp: 20ms
sort: 19ms
appendRemove: 288ms
_sortAppendRemoveAfter: 328ms
// str
setUp: 22ms
sort: 26ms
appendRemove: 320ms
_sortAppendRemoveAfter: 368ms

Answer 1

尽管我同意 Kevin Krammer 和 xander 的观点，但您有多种方法可以抑制绑定(bind)。

您可以使用 signal.connect(slotToConnect) 绑定(bind)它们，并直接使用 signal.disconnect(slotToDisconnect) 断开它们，或者使用 Connections带有 enabled 值，您可以在排序开始和完成时更改该值。

此外，您应该考虑显示一些 BusyIndicator当您执行某些操作的时间超过几毫秒时。

但我需要承认，我看不出在 JS 中这样做的任何理由