Angular AG Grid Row Buffer异常：IE浏览器下性能问题求助

Hey there, let's break down exactly what's going wrong here and how to get your AG Grid running smoothly in IE—we've all been through the pain of optimizing for this finicky browser, especially with heavy data grids.

Why This Is Happening #

1. IE's JavaScript & DOM Limitations #

IE (especially IE11 and older) has a drastically slower JavaScript engine compared to modern browsers, and it chokes on large numbers of DOM nodes. When you set rowBuffer to 5000, you're telling AG Grid to render all 5000 rows at once—that's 5000 row containers plus 500,000 individual cells (100 columns × 5000 rows). IE can't handle that volume of DOM manipulation without massive delays, flickering, or freezing. Setting it to 9999 makes this exponentially worse, as the browser tries to process even more nodes than it can physically handle.

2. Misunderstanding Row Buffer's Purpose #

AG Grid's rowBuffer is designed to control how many rows are rendered outside the visible viewport for smooth scrolling. The default value is 20, which means it renders 20 rows above and below what's visible. Setting it to match your total row count completely disables AG Grid's virtual scrolling feature—this is the opposite of what you want for large datasets.

3. Angular 5's Change Detection Overhead #

Angular 5's change detection mechanism is less efficient in IE, especially when dealing with thousands of bound components. Every row/cell in AG Grid triggers change detection checks, and with 5000 rows, this creates a massive performance hit that IE can't keep up with.

4. Potential Compatibility Gaps #

If you're using an older version of AG Grid that's not optimized for IE or doesn't play well with Angular 5, you'll compound these performance issues.

Step-by-Step Fixes #

1. Reset Row Buffer to Leverage Virtual Scrolling #

First, revert rowBuffer to its default value (20) or a small, reasonable number like 50. This re-enables AG Grid's virtual scrolling, which only renders rows that are (or are about to be) visible in the viewport. This cuts the number of DOM nodes from hundreds of thousands to just a few hundred—IE can handle this easily.

// In your AG Grid configuration
gridOptions = {
  rowBuffer: 20, // Default value, use this instead of 5000/9999
  rowSelection: 'single', // Or your desired selection mode
  // Other options...
};

2. Enable Column Virtualization #

With 100 columns, you also need column virtualization to avoid rendering all columns at once. Ensure this is enabled (it's default in most AG Grid versions, but double-check):

gridOptions = {
  enableColumnVirtualization: true,
  // Other options...
};

3. Optimize Angular Change Detection #

• Enable Production Mode: Always run your Angular app in production mode for IE—this disables development-only checks and speeds up change detection. Add this to your main.ts:

  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  

• Use OnPush Change Detection: If you're using custom cell renderers, set their change detection strategy to OnPush to reduce unnecessary checks:

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'app-custom-cell',
    template: '{{ value }}',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class CustomCellComponent { /* ... */ }
  

4. Reduce Data & Component Overhead #

• Server-Side Pagination/Sorting/Filtering: Instead of loading all 5000 rows at once, implement server-side pagination (e.g., 100 rows per page). This drastically reduces the amount of data IE has to process.
• Simplify Cell Renderers: Avoid using complex Angular components in cell renderers unless absolutely necessary. Use plain JavaScript renderers or lightweight components where possible.
• Immutable Row Data: Pass immutable data to AG Grid (e.g., use Object.freeze() or libraries like Immer). This lets AG Grid efficiently detect changes without full data scans.

5. IE-Specific AG Grid Tweaks #

• Disable Browser Tooltips: IE's native tooltips are slow—disable them and use AG Grid's custom tooltips if needed:

  gridOptions = {
    enableBrowserTooltips: false,
    // Optional: Use AG Grid's tooltip component
    tooltipShowDelay: 500,
    // Other options...
  };
  

• Suppress Unnecessary Features: Disable features like row grouping, aggregation, or live updates if they're not required. Each feature adds processing overhead in IE.

6. Verify AG Grid & Angular 5 Compatibility #

Ensure you're using an AG Grid version that's compatible with Angular 5. AG Grid v20.x is the last major version to support Angular 5—if you're on an older version, upgrade to v20.x to get IE-specific performance fixes.

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