如何统计free-jqgrid中展开全部与收起全部操作的耗时

嘿，我来帮你搞定这个统计需求～free-jqGrid 4.6.0本身没有内置的耗时统计配置，但我们可以通过自定义代码或者浏览器工具来实现，下面分两种情况说明：

一、通过jqGrid自定义代码统计耗时 #

因为4.6.0版本没有直接提供统计接口，我们可以通过重写expandAll和collapseAll方法，在操作前后记录时间戳来计算耗时，这样能精准统计整个批量操作的总耗时：

// 假设你的表格ID是gridTable
var $grid = $("#gridTable");

// 先保存原生的展开/收起方法
var originalExpandAll = $grid.jqGrid("getGridParam", "expandAll");
var originalCollapseAll = $grid.jqGrid("getGridParam", "collapseAll");

// 重写展开全部方法，添加耗时统计
$grid.jqGrid("setGridParam", {
    expandAll: function() {
        // 记录开始时间（用performance.now精度更高）
        var startTime = performance.now();
        // 执行原生展开逻辑
        originalExpandAll.call(this);
        // 记录结束时间并计算耗时
        var endTime = performance.now();
        var duration = endTime - startTime;
        console.log(`展开全部操作总耗时：${duration.toFixed(2)}毫秒`);
        // 这里可以把耗时存入变量、展示到页面或者发送到后端统计
    }
});

// 重写收起全部方法同理
$grid.jqGrid("setGridParam", {
    collapseAll: function() {
        var startTime = performance.now();
        originalCollapseAll.call(this);
        var endTime = performance.now();
        var duration = endTime - startTime;
        console.log(`收起全部操作总耗时：${duration.toFixed(2)}毫秒`);
    }
});

注意：这段代码要在表格初始化完成后执行，如果你的表格是动态生成的，要确保在表格渲染完毕后再调用这段重写逻辑。

另外，如果你想监控每行展开/收起的耗时，可以绑定jqGridAfterExpandRow和jqGridAfterCollapseRow事件，但批量操作时这些事件会触发多次（每行一次），适合统计单一行的操作耗时，而非整个批量操作的总耗时。

二、用浏览器开发者工具统计耗时 #

如果不想修改代码，也可以直接用浏览器的开发者工具快速统计：

• Performance面板（推荐）：

  1. 打开Chrome/Firefox的开发者工具（按F12），切换到Performance标签；
  2. 点击左上角的录制按钮（圆形红点），然后执行「展开全部」或「收起全部」操作；
  3. 操作完成后点击停止录制，就能看到整个操作的详细耗时 breakdown，包括脚本执行、DOM重绘、样式计算等各个阶段的时间，能帮你定位耗时瓶颈。

• 控制台手动计时：
  在控制台依次输入以下代码（执行完第一行后立刻点击展开/收起按钮，等操作完成后输入第二行）：

  var start = performance.now();
  // 点击展开/收起按钮后输入下一行
  var end = performance.now();
  console.log(`操作耗时：${end - start}毫秒`);
  

内容的提问来源于stack exchange，提问作者Velu narasimman