jqGrid - 我如何跟踪本地操作的速度答案

【问题标题】：jqGrid - How can i track the speed of local operationsjqGrid - 我如何跟踪本地操作的速度
【发布时间】：2016-05-15 13:00:53
【问题描述】：

我收到了创建 2 个应用程序的任务，一个已优化，一个未优化，我正在使用免费的 jqGrid 来显示来自 DB 的数据。

我已经成功创建了两个，但我想跟踪本地操作完成的速度（分页、搜索、排序）。

我已尝试为触发操作的每个按钮设置事件，但它们似乎没有触发...我想知道 jqGrid 中是否有更好的东西我可以使用或有帮助的建议我解决这个问题。

我的 jqGrid 代码是这样的：

$(function () {
    var colModelSettings = [
        {name:'id', label:'id',key: true, hidden: true, width:10,sorttype:'number',editable: true},     
        {name:'judet',label:'Judet',width:70,   align: 'center',editable:true},
        {name:'localitate',label:'Localitate',width:80,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
        {name:'tipStrada',label:'tipStrada',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},width:100,align: 'center'  },
        {name:'denumire',label:'denumire',editable:true,width:100,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
        {name:'cod',label:'cod',width:90,editable:true,align: 'center'}
        ];
    var beforeEvent = 0;    
    $("#gridAdrese").jqGrid({
        pager: $("#pagerGrid"), 
        url: "/UnoptimizedProject/rest/fetchData",
        datatype: "json",
        mtype: "POST",
        loadonce: true,
        forceClientSorting:true,
        height: window.innerHeight-250,
        sortname: 'id',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (postData) {
            if (postData.searchField === undefined) postData.searchField = null;
            if (postData.searchString === undefined) postData.searchString = null;
            if (postData.searchOper === undefined) postData.searchOper = null;
            return JSON.stringify(postData);
        },
        rowNum: 5000,
        viewrecords: true,
        loadComplete: function(){
            if(beforeEvent !== undefined){
                var afterEvent = new Date().getTime();
                console.log(afterEvent- beforeEvent);
                beforeEvent = 0;
            }
        },
        sortorder: 'asc', 
        caption:'Coduri Postale Neoptimizat' ,
        autowidth: true,
        colModel: colModelSettings,
    });
    $("#gridAdrese").jqGrid('navGrid', "#pagerGrid", {edit:false, add:false, del:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh: false});

    $("#jqgh_gridAdrese_judet, #jqgh_gridAdrese_localitate, #jqgh_gridAdrese_tipStrada, #jqgh_gridAdrese_denumire, #jqgh_gridAdrese_cod ").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("Sorting");
    })
    $("#fbox_gridAdrese_search").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("searching");
    });

    $("#next_pagerGrid , #last_pagerGrid, #prev_pagerGrid, #first_pagerGrid").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("paging");
    })
});

【问题讨论】：

您写了“2 个应用程序，一个优化的，一个未优化的”。什么是“优化”？只有来自url 的响应时间？你使用loadonce: true, forceClientSorting:true。这意味着排序、分页和搜索将由jqGrid本地完成。因此，排序、分页和搜索的时间将与优化和未优化的后端相同。
优化和未优化的区别主要在于后端和那里使用的技术。优化后的应用程序在后端完成搜索、排序、分页等所有操作，而未优化的应用程序在本地完成。
您可以删除id coulumn，它根本不需要。如果label的值与name的值相同（例如name:'tipStrada',label:'tipStrada'、name:'denumire',label:'denumire'、...），您可以删除所有label
您发布的代码使用loadonce: true 和url: "/UnoptimizedProject/rest/fetchData"。这意味着搜索、排序和分页将在本地完成。您的实际应用程序中可能还有其他代码。
查看the code，它可能显示了您需要的内容。

标签： jqgrid free-jqgrid

【解决方案1】：

您可以执行以下操作：

var startTime, measureTime = false, timeInterval,
    startMesure = function () {
        startTime = new Date();
        measureTime = true;
    };

startMesure();
$("#gridAdrese").jqGrid({
    url: "/UnoptimizedProject/rest/fetchData",
    ...
    onSortCol: function () {
        startMesure();
    },
    onPaging: function (pgButton, options) {
        //if (pgButton === "records") {
            startMesure();
        //}
    },
    searching: {
        closeAfterSearch: true,
        closeAfterReset: true,
        closeOnEscape: true,
        searchOnEnter: true,
        beforeSearch: function () {
            startMesure();
            return false; // allow filtering
        },
        onSearch: function () {
            startMesure();
        },
        onReset: function () {
            startMesure();
        },
    },
    loadComplete: function () {
        if (measureTime) {
            timeInterval = new Date() - startTime;
            setTimeout(function () {
                alert("Total loading time: " + timeInterval + "ms\nFull time: " +
                    (new Date() - startTime));
            }, 50);
            measureTime = false;
        }
    }
}).jqGrid("filterToolbar").jqGrid("navGrid");

我们将startTime 相对于startTime = new Date(); 重置为排序、分页或过滤开始时的当前时间。

【讨论】：