前端体验优化：Core Web Vitals 的指标与落地
"介绍 LCP/INP/CLS 的指标与阈值，结合实测与工具链给出可落地的优化与监测方案。"
前端框架
前端动画性能：CSS、Transform与requestAnimationFrame
通过正确的动画属性与调度机制，减少重排/重绘与主线程阻塞，提升交互与视觉流畅度。
前端资源优先级与预加载（preload/prefetch、fetchpriority 与 103 Early Hints）
通过 preload/prefetch 与 fetchpriority、103 Early Hints 提前宣告关键资源，优化首屏与交互性能，并提供验证方法。
响应式图片选择：picture/srcset/sizes 与 AVIF/WebP 回退
"介绍 `` 与 `srcset/sizes` 的协作，以设备与布局选择最优格式与尺寸，优先 AVIF/WebP 并为不支持的浏览器回退到 JPEG/PNG，提供示例与验证。"
showDirectoryPicker：目录访问与批量处理
使用 showDirectoryPicker 选择目录并遍历文件，结合权限与错误治理，实现批量读取与保存的浏览器端流程。
Web Components 与 Shadow DOM：样式隔离、Slot 与性能注意
"概述 Web Components 的 Shadow DOM 与自定义元素机制，解释样式隔离、Slot 投影与事件模型，并给出性能与可维护性注意。"
Web Vitals 监控与优化 全链路落地
从采集到优化的全链路方案，围绕 LCP/INP/CLS 的阈值与观测落地，系统降低加载与交互延迟并控制布局稳定性。
Web Vitals INP 输入延迟优化 与交互响应治理实践 PerformanceObserver
以 PerformanceObserver 监测交互事件时长，定位并优化 INP 输入延迟瓶颈；结合任务切分、样式稳定与数据请求治理，提升整体交互响应质量。
WebCrypto SHA-256 完整性校验与去重持久化
`title: WebCrypto SHA-256 完整性校验与去重持久化``categories: Web 开发/前端/数据管理``keywords: WebCrypto,SHA-256,完整性,去重,IndexedDB,OPFS``description: 使用 WebCrypto 计算 SHA
Next.js 15 Accept-Encoding Brotli-Gzip 内容协商与预压缩投递实践
基于 Accept-Encoding 进行 br/gzip 协商，在 Next.js 15 Edge Route Handler 中投递预压缩资源并设置 Vary 与缓存头，降低传输与首包时间。
