feat: implement batched feed updates with performance monitoring

- Add nextTick() batching to HomeView feed processing to reduce Vue reactivity triggers
- Integrate comprehensive performance tracking in 60-new-activity test
- Add performance collector utilities for measuring user actions and navigation metrics
- Document performance analysis with measured vs predicted data distinction

Performance improvements:
- Test completion: 45+ seconds → 23.7s (Chromium), 18.0s (Firefox)
- Eliminated timeout issues across browsers
- Added performance monitoring infrastructure for future optimization

Note: Vue reactivity impact is hypothesized but not directly measured - enhanced metrics needed for validation.
This commit is contained in:
Matthew Raymer
2025-08-01 12:26:16 +00:00
parent 54bfaafbd0
commit 1dd3d9f8d1
5 changed files with 1625 additions and 68 deletions

View File

@@ -265,6 +265,7 @@ import { UAParser } from "ua-parser-js";
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import { Capacitor } from "@capacitor/core";
import { nextTick } from "vue";
//import App from "../App.vue";
import EntityIcon from "../components/EntityIcon.vue";
@@ -1014,12 +1015,20 @@ export default class HomeView extends Vue {
* @param records Array of feed records to process
*/
private async processFeedResults(records: GiveSummaryRecord[]) {
const processedRecords: GiveRecordWithContactInfo[] = [];
for (const record of records) {
const processedRecord = await this.processRecord(record);
if (processedRecord) {
this.feedData.push(processedRecord);
processedRecords.push(processedRecord);
}
}
// Batch update the feed data to reduce reactivity triggers
await nextTick(() => {
this.feedData.push(...processedRecords);
});
this.feedPreviousOldestId = records[records.length - 1].jwtId;
}