3

アイテムのリストがあるページがあります。アイテムには、いくつかのアクションが割り当てられています。（スクリーンショットを参照）。

各行の横にあるアイコンを直接クリックするか、左側のチェックボックスをオンにするかを選択できます。

問題は、アイテムをクリックするか、いくつかのアイテムのチェックボックスをオンにしてからアクションをクリックした後、ラグ（1秒程度）があることです。100行以上あると想像してください。

ここに画像の説明を入力してください

JavaScriptコードのパフォーマンスを向上させるにはどうすればよいですか？

1行のサンプル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 に答える