|
| 1 | +# Ignite UI performance project |
| 2 | + |
| 3 | +This project contains sample applications for the grid, tree grid, and pivot grid, with predefined data source sizes of 1,000, 100,000, and 1,000,000 records. These samples are used to measure the performance of different grid features using an internal `PerformanceService`, which is a wrapper around the browser's Performance API. |
| 4 | + |
| 5 | +To run the application: |
| 6 | + |
| 7 | +```sh |
| 8 | +npm run start:performance |
| 9 | +``` |
| 10 | + |
| 11 | +## Using the performance service |
| 12 | + |
| 13 | +The performance service is intended to be used as an injectable service inside a component that would be measured. In order to inject it add a private property in the component: |
| 14 | + |
| 15 | +```ts |
| 16 | +private performanceService = inject(PerformanceService); |
| 17 | +``` |
| 18 | + |
| 19 | +This will initialize the service and also create a global `$$igcPerformance` variable that can be used for convenience. |
| 20 | + |
| 21 | +### API |
| 22 | + |
| 23 | +```ts |
| 24 | +performanceService.setLogEnabled(true); |
| 25 | +``` |
| 26 | + |
| 27 | +- Set whether the service should use `console.debug` to print the performance entries. Defaults to `false`. |
| 28 | + |
| 29 | +```ts |
| 30 | +const end = performanceService.start(name); |
| 31 | +data.sort(); |
| 32 | +end(); |
| 33 | +``` |
| 34 | + |
| 35 | +- Starts a performance measuring. The method returns a function that should be invoked after the code you want to measure has finished executing. This creates a `PerformanceMeasure` entry in the browser's performance timeline. |
| 36 | + |
| 37 | +```ts |
| 38 | +const performanceMeasures: PerformanceEntryList = performanceService.getMeasures(name?); |
| 39 | +``` |
| 40 | +
|
| 41 | +- Gets list of `PerformanceMeasure` entries. If a name is provided, it returns only the measures with that name. |
| 42 | +
|
| 43 | +```ts |
| 44 | +performanceService.clearMeasures(name?); |
| 45 | +``` |
| 46 | +
|
| 47 | +- Clears all performed measures. If a `name` is provided, it clears only the measures with that name. |
| 48 | +
|
| 49 | +> **Note:** The `$$igcPerformance` global object could be used as an alternative to the injected `performanceService` instance. |
| 50 | +
|
| 51 | +### Reading results |
| 52 | +
|
| 53 | +Let's say that we want to measure the time that the grid's sorting pipeline takes to sort the data. We first go to the `IgxGridSortingPipe` and modify the code to look like this: |
| 54 | +
|
| 55 | +```ts |
| 56 | +@Pipe({ |
| 57 | + name: 'gridSort', |
| 58 | + standalone: true, |
| 59 | +}) |
| 60 | +export class IgxGridSortingPipe implements PipeTransform { |
| 61 | + private performance = inject(PerformanceService); |
| 62 | + |
| 63 | + constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {} |
| 64 | + |
| 65 | + public transform( |
| 66 | + collection: any[], |
| 67 | + sortExpressions: ISortingExpression[], |
| 68 | + groupExpressions: IGroupingExpression[], |
| 69 | + sorting: IGridSortingStrategy, |
| 70 | + id: string, |
| 71 | + pipeTrigger: number, |
| 72 | + pinned? |
| 73 | + ): any[] { |
| 74 | + // This is important! |
| 75 | + this.performance.setLogEnabled(true); |
| 76 | + const endSorting = this.performance.start('Sorting pipe'); |
| 77 | + |
| 78 | + let result: any[]; |
| 79 | + const expressions = groupExpressions.concat(sortExpressions); |
| 80 | + if (!expressions.length) { |
| 81 | + result = collection; |
| 82 | + } else { |
| 83 | + result = DataUtil.sort( |
| 84 | + cloneArray(collection), |
| 85 | + expressions, |
| 86 | + sorting, |
| 87 | + this.grid |
| 88 | + ); |
| 89 | + } |
| 90 | + this.grid.setFilteredSortedData(result, pinned); |
| 91 | + |
| 92 | + // This is important! |
| 93 | + endSorting(); |
| 94 | + |
| 95 | + return result; |
| 96 | + } |
| 97 | +} |
| 98 | +``` |
| 99 | +
|
| 100 | +If you run a sample and sort a column, the performance service will measure the execution time of the sorting pipe. There are two ways to see the results: |
| 101 | +
|
| 102 | +1. If `setLogEnabled` is called with `true` then the service will print the measurement result in the console using `console.debug`. |
| 103 | +<img width="1720" height="863" alt="performance-console" src="https://github.com/user-attachments/assets/000d0bfd-a180-447d-ac27-2f82904e1150" /> |
| 104 | +
|
| 105 | +2. The browser's DevTools Performance tab can be used for a more detailed analysis. Before triggering the action (e.g., sorting), start a new performance recording in DevTools. |
| 106 | +
|
| 107 | +
|
| 108 | +https://github.com/user-attachments/assets/8aa80ead-82d0-48a4-a6d2-1c17b3d099b1 |
| 109 | +
|
| 110 | +
|
| 111 | +You should look at the timings tab in the performance window in dev-tools. |
0 commit comments