Question

我有一个包含项目列表的页面。项目分配了多个操作。（见截图）。

可以选择直接点击每行旁边的图标或选中左侧的复选框。

问题在于点击一个项目或检查几个项目的复选框然后单击一个动作后会出现延迟（大约一秒钟）。想象一下，有100行或更多行。

enter image description here

如何改善javascript代码的性能？

一行的HTML示例：

<tr id="1960AGIMMGMRTB20314" class="">
                        <td class="checkbox">
                                     <input type="checkbox" value="1960" class="checkbox">     

                        </td>
                        <td class="">
                            <p><a href="/Devices/View/1960">GD009000246</a></p>
                        </td>
                        <td class="platform">PCGames</td>
                        <td class="cat">Up</td>
                        <td class="platform">
                            <div class="pbar"><span class="progresslabel"></span></div>
                        </td>
                        <td class="date">10.48.1.236</td>   
                        <td class="options clearfix">
                                    <a title="" class="iconMagnifier tip" href="/Packages/View/AGI-MM-GM-RTB-2.0.3.1.4">View</a>
<a title="" href="/Packages/PackageActionAsyncDeletePackage" data-ajax-type="DeletePackage" data-ajax-packageid="AGI-MM-GM-RTB-2.0.3.1.4" data-ajax-machineid="1960" class="iconDelete action tip">Remove</a>                            
                        </td>       
                    </tr>

的javascript：

     // action invoker
    $("a.action:not(.remove)").click(function (e) { // .remove => do not execute on download tasks page
        var obj = $(this);
        e.preventDefault();
        if (!$(this).hasClass('disablelink')) {
            var machineIds = getSelection(obj);
            if (machineIds.length > 0) {
                packageAction(obj.attr("data-ajax-packageid"), machineIds, obj.attr("data-ajax-type"));
            };
        }
        $(".checkall").attr("checked", false);
    });

function getSelection(obj) {
    var selected = new Array();
    if (obj.attr('data-ajax-machineId')) {
        selected.push(obj.attr('data-ajax-machineId'));
    } else {
        $("input.checkbox:checkbox:checked:not(.checkall)").each(function () {
            var machineId = $(this).val();
            var packageId = obj.attr("data-ajax-packageid");
            var operation = obj.attr("data-ajax-type");
            if ($("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "").size() != 0) {
                var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "");
                row.has("a[data-ajax-type=" + operation + "]:not(.hide)").length ? selected.push(machineId) : $(this).attr('checked', false);
            }
        });
    }
    return selected;
}  

    // download, install, uninstall, remove, activate, deactivate package
    function packageAction(packageId, machineIds, operationType) {
.....// to implement - not needed

Answer 1

从DOM中查询对象的速度很慢。最好的办法是将所有数据保存在javascript对象中，进行所有计算和所需的操作，然后立即更新DOM。 Ember.js和其他一些javascript库/工具绑定了很酷的数据，这意味着您更改了javascript对象中的属性，它会自动更新DOM！

如何提高我的javascript代码的性能

1 个答案: