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

Question

我有一个包含项目列表的页面。项目被分配了多个操作。 (参见屏幕截图)。

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

问题是，单击一个项目或选中多个项目的复选框，然后单击一个操作后，会出现延迟(一秒左右)。想象一下有 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

Answer 1

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