From 982acb7730fed6fc15f74b7ed0a7e5534538a968 Mon Sep 17 00:00:00 2001 From: lingniu Date: Thu, 16 Jul 2026 03:49:28 +0800 Subject: [PATCH] docs(web): record mileage DOM reduction --- .../docs/frontend-production-readiness.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/vehicle-data-platform/docs/frontend-production-readiness.md b/vehicle-data-platform/docs/frontend-production-readiness.md index f4999973..fdf4ffa2 100644 --- a/vehicle-data-platform/docs/frontend-production-readiness.md +++ b/vehicle-data-platform/docs/frontend-production-readiness.md @@ -8,6 +8,14 @@ The 15-second monitor refresh previously treated every new response object as a FleetMap now fingerprints only fields that affect map rendering. An unchanged refresh performs no AMap data/style/label mutation. A moving vehicle still updates MassMarks once, but the LabelsLayer removes and replaces only that vehicle's changed marker; full label-layer replacement is reserved for crossing the normal/dense zoom boundary. The selected ripple marker also skips redundant position writes. This uses the official AMap JS API 2.0 [`LabelsLayer.remove`](https://lbs.amap.com/api/javascript-api-v2/guide/amap-massmarker/label-marker) and `LabelMarker` update model instead of reconstructing all overlays. Unit tests assert zero map mutations for an `asOf`-only refresh and exactly one label replacement for one moved vehicle. +## 2026-07-16: single responsive mileage matrix + +The mileage query rendered its desktop table and mobile card matrix at the same time, then hid one tree with CSS. A 90-day, 20-vehicle production page therefore retained 1,860 desktop cells and another 1,800 hidden mobile day cells. Chrome identifies excessive DOM size as a source of longer style calculation, layout and interaction work, and recommends creating nodes only when they are needed: , . + +The page now listens to the responsive breakpoint and mounts exactly one representation. The desktop production DOM fell from 7,752 elements to 2,191 elements (71.7% fewer); the hidden mobile day-cell count fell from 1,800 to zero. The 90-day table remained complete with all 1,860 desktop data cells, the page had no blocking overlay, and the browser console emitted no warning or error. Component tests independently prove the mobile breakpoint mounts the card matrix, removes the desktop table and unregisters its media-query listener on cleanup. + +Daily mileage lookup now builds one VIN-indexed map and one ranking map before rendering. Rows no longer filter the complete daily result and scan the ranking list for every vehicle, reducing matrix preparation from O(vehicles × result rows) to O(vehicles + result rows). If a future supported date range makes even the single active matrix too large, row or column windowing is the next control; web.dev and TanStack document this virtualization pattern for large tables and lists: , . + ## 2026-07-16: bounded predictive route warming The route shell split every primary page into a lazy chunk, but its idle queue then imported every inactive page during the first session. Successful ES-module imports cannot be unloaded, so this gradually made all route code resident even when an operator stayed on the monitor. It also let speculative parsing overlap live map work and defeated much of the memory benefit of route splitting.