docs(webui): describe the single-page layout and updated numbers

The Web UI is now 8 files at 25,302 bytes gzip (23.0 % of the raw
109,814); section switching measured on a real device.

doc/webui-compression.md

@@ -11,18 +11,24 @@ html/  --(minify.py)-->  output/html_min/  --(fileadder -z)-->  flash image
 ```
 
 - `tools/minify.py` removes comments (`<!-- -->`, `//`, `/* */`) and
-  line-leading whitespace without touching string literals, so the output
+  line-leading whitespace without touching string or regex literals, so
-  is functionally identical to the input.  Binary files (`.ico`) are
+  the output is functionally identical to the input.  Binary files
-  copied through unchanged.  The raw sources in `html/` stay untouched
+  (`.ico`) are copied through unchanged.  The raw sources in `html/` stay
-  for development; the minified copy in `output/` is a pure build
+  untouched for development; the minified copy in `output/` is a pure
-  artifact.  Comments and indentation are pure overhead for the served
+  build artifact.  Comments and indentation are pure overhead for the
-  bytes, so minification alone already reduces the transfer size from
+  served bytes, so minification alone already reduces the transfer size
-  111,280 to 99,715 bytes, independent of gzip.
+  from 109,814 to 97,730 bytes, independent of gzip.
-- The per-page scripts are consolidated into a single `html/main.js`
+- The Web UI is a single-page application: `index.html` holds all pages
-  bundle (i18n, shared helpers, navigation and the page scripts).  Every
+  as sections (`#/ports`, `#/vlan`, ...) that the sidebar switches
-  page loads only this one script, so the browser fetches it once and
+  between via the URL hash.  `login.html` stays separate because it is
-  gzip can compress across all of it.  The page-specific initialisation
+  the authentication gate.  Only these two pages plus `main.js`,
-  runs only when the matching page elements are present.
+  `style.css`, the three SVG port images and the favicon are embedded.
+- All JavaScript (i18n, shared helpers, navigation and the per-section
+  scripts) lives in one `html/main.js` bundle that the pages load as
+  their only script, so the browser fetches it once and gzip can
+  compress across all of it.  A section's initialisation runs when the
+  section is shown, its polling intervals run only while it is visible,
+  and re-entering a section refetches the data.
 - `fileadder -z` gzip-compresses every file (zlib, gzip format,
   `Z_BEST_COMPRESSION`) when it generates the file table
   (`html_data.c`/`html_data.h`) and when it embeds the files into the
@@ -41,27 +47,31 @@ Build on any machine (the Web UI is machine-independent):
 
 | | bytes |
 |---|---:|
-| raw sources | 111,280 |
+| raw sources | 109,814 |
-| minified (comments and indentation removed) | 99,715 |
+| minified (comments and indentation removed) | 97,730 |
-| gzip (flash + wire) | 28,200 (25.3 %) |
+| gzip (flash + wire) | 25,302 (23.0 %) |
 
 The minified assets are also what the browser receives when gzip support
 is missing or disabled, so the transfer size drops in both stages:
-111,280 → 99,715 bytes from minification, then → 28,200 bytes from gzip.
+109,814 → 97,730 bytes from minification, then → 25,302 bytes from gzip.
 
 The embedded data block ends at `0x5b977` without compression and at
-`0x46e28` with it, freeing ~83 KB of the 512 KB image.
+`0x462d6` with it, freeing ~86 KB of the 512 KB image.
 
-Merging the JS files into one bundle is worth more than the minifier and
+The consolidation helps at every step.  The 17 scripts gzip to 23,302
-gzip combined: served per file, the 17 scripts gzip to 23,302 bytes; as
+bytes as separate files but to 17,231 bytes as one `main.js` bundle,
-one `main.js` bundle they gzip to 16,948 bytes, because the gzip
+because the gzip dictionary spans all of them.  The single-page layout
-dictionary spans all scripts and every page fetches the bundle only
+then removes the per-page HTML and, more importantly, the repeated
-once.
+downloads: with the multi-page UI the browser fetched `main.js` on every
+navigation; the SPA fetches everything once and section switches are
+pure in-page JavaScript (measured on a real device: cold load ~450 ms,
+section switch ~60-160 ms, the only network traffic afterwards is the
+JSON polling of the visible section).
 
 ## Notes
 
 - The files stay well below the `uint16_t` size limit of the file table
-  (largest gzip output: 16.9 KB for the merged `main.js`).
+  (largest gzip output: 17.2 KB for the merged `main.js`).
 - `fileadder` terminates the embedded files with a NUL directly after the
   content (previously at `data_read + 1`), so the `strlen()`-based size
   computation no longer depends on uninitialised buffer content.