TaskBoard - Performance
Plan TaskBoard data, rendering, filtering, virtual scroll, and external mode for larger boards.
#Large Board Strategy
Keep item ids stable, use concise card markup, avoid expensive computed work inside every card, and move server persistence outside render paths. Use app-owned query state to narrow the item array before passing very large data sets to TaskBoard.
#Virtual Scroll
Use virtual-scroll with realistic virtual-scroll-item-height and virtual-scroll-buffer values. Larger buffers reduce visible range changes during fast scrolling; smaller buffers reduce DOM work. Cards with highly variable heights make estimates less useful.
TaskBoard measures rendered card heights after mount and falls back to the item-height estimate until measurements are available. It keeps a nearby visible card or swimlane row anchored after data updates and clamps to a valid range when app-side filtering, sorting, or deletion makes the old position impossible. Keep custom card heights stable within a board when possible.
#Indexed Lookups
TaskBoard groups the accepted item array by column and swimlane cell before rendering card lists and counts. Create, update, delete, move, and drag-hidden state all refresh against those grouped lists, so normal rendering does not repeatedly scan the full item array for every visible column or cell.
The grouping does not change event payloads or data ownership. Apps still provide stable ids and accepted item arrays, and persistence handlers should continue to use the emitted move, reorder, and selection payloads.
#Filtering and Sorting
Search, filters, and sort should run in app code before data reaches TaskBoard. Keep predicates and comparators small pure functions, memoize expensive derived values, and normalize per-column order after sorting so the rendered board matches the query result.
#Card Rendering
Custom cards are normal Vue components. Memoize heavy formatting outside repeated card renders when possible, keep images sized, and avoid mounting hidden dialogs inside every card. Put shared dialogs and toolbars near the board root.
#External Mode
External mode keeps item mutation in a store. It is useful for server sync, optimistic updates, undo stacks, and large boards because the app can batch or debounce persistence after TaskBoard emits events.
For large external stores, preserve object ids, normalize column order in the store, and debounce remote writes from move/reorder events. TaskBoard should receive the latest accepted item array, not an in-render promise or partial server response.
#Browser Constraints
Horizontal boards still render columns and active card wrappers. Test large boards on the target device class, especially when cards contain complex charts, avatars, menus, or dynamic media.