3

我有一个包含项目列表的页面。项目有几个分配给它们的操作。（见截图）。

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

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

在此处输入图像描述

如何提高我的 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
4

1 回答 1

0

从 DOM 中查询对象很慢。最好的办法是将所有数据保存在 javascript 对象中，做所有你想要的计算和东西，然后一次更新 DOM。Ember.js 和其他一些 javascript 库/工具具有很酷的绑定数据，这意味着您更改 javascript 对象中的属性，它会自动更新 DOM！

于 2013-05-28T15:05:08.643 回答