Ag-grid设置cell renderer的autoHeight=true引发页面渲染卡顿问题咨询

问题背景 #

升级AG Grid从v25到v28后，配置了autoHeight=true的单元格渲染器会先以40-50px的固定高度渲染行，随后才计算并更新为正确高度，导致页面出现跳转或卡顿，希望实现先计算完高度再渲染行的效果。

可行解决方案 #

1. 预计算行高并提前传入

在数据加载完成后，先根据单元格内容的实际长度、字体样式、列宽等参数，预计算出每一行所需的高度，然后通过rowData中的rowHeight字段，或者getRowHeight回调函数把高度传给AG Grid，让表格初始化时直接使用正确高度。

示例代码（Angular环境）：

// 预计算文本高度的工具函数
calculateRowHeight(text: string, columnWidth: number, fontSize = '14px', lineHeight = 1.4): number {
  // 创建临时元素计算高度
  const tempDiv = document.createElement('div');
  tempDiv.style.position = 'absolute';
  tempDiv.style.visibility = 'hidden';
  tempDiv.style.width = `${columnWidth}px`;
  tempDiv.style.fontSize = fontSize;
  tempDiv.style.lineHeight = `${lineHeight}`;
  tempDiv.textContent = text;
  document.body.appendChild(tempDiv);
  const height = tempDiv.offsetHeight;
  document.body.removeChild(tempDiv);
  // 加上额外的内边距等预留高度
  return height + 16;
}

// 处理数据时添加行高
loadData() {
  this.rowData = rawData.map(item => ({
    ...item,
    rowHeight: this.calculateRowHeight(item.longText, this.columnWidth)
  }));
}

// 表格配置
gridOptions = {
  columnDefs: [
    { field: 'longText', cellRenderer: 'myCellRenderer', autoHeight: true }
  ],
  // 或者用回调函数动态获取
  getRowHeight: params => params.data.rowHeight
};

2. 关闭动画与调整初始化时机

• 开启suppressRowAnimation禁用行动画，减少高度变化时的视觉卡顿：

gridOptions = {
  suppressRowAnimation: true,
  // 其他配置...
};

• 延迟表格初始化，确保所有渲染依赖（比如单元格组件、数据）都准备完成后再渲染AG Grid，比如在Angular中使用*ngIf控制grid的显示时机：

<ag-grid-angular *ngIf="rowDataLoaded" [gridOptions]="gridOptions"></ag-grid-angular>

3. 自定义单元格渲染器的高度计算逻辑

在自定义cell renderer的init方法中提前计算高度，并主动设置行高，避免AG Grid的默认异步计算：

// 自定义cell renderer组件
export class MyCellRendererComponent implements ICellRendererAngularComp {
  params: ICellRendererParams;

  agInit(params: ICellRendererParams): void {
    this.params = params;
    // 计算当前单元格内容的高度
    const cellHeight = this.calculateCellHeight(params.value);
    // 设置行高
    params.api.setRowHeight(params.node, cellHeight);
    // 刷新行布局
    params.api.onRowHeightChanged();
  }

  private calculateCellHeight(text: string): number {
    // 同之前的计算逻辑
    const tempDiv = document.createElement('div');
    tempDiv.style.width = `${this.params.column.getActualWidth()}px`;
    tempDiv.style.fontSize = '14px';
    tempDiv.style.lineHeight = '1.4';
    tempDiv.textContent = text;
    document.body.appendChild(tempDiv);
    const height = tempDiv.offsetHeight;
    document.body.removeChild(tempDiv);
    return height + 16;
  }
}

注意事项 #

• 预计算高度时要确保和实际单元格的样式（字体、内边距、列宽）完全一致，否则会出现高度偏差。
• 如果单元格内容包含动态元素（比如图片），需要等待元素加载完成后再计算高度，可配合setTimeout或监听load事件处理。

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