前端技术文章
-
用 unknown 接住 API JSON，通过自定义类型谓词完成运行时校验，让 TypeScript 安全收窄响应对象并复用到数组过滤。493 收藏 -
用 link rel=modulepreload 提前准备首屏真正需要的 ES 模块，结合依赖图、URL、crossorigin 与缓存匹配，减少依赖发现等待并避免重复请求。254 收藏 -
Vite 的环境变量不是天然私密配置：带有 VITE_ 前缀的变量会进入客户端代码，生产构建还会把 import.meta.env 静态替换。本文按资产、暴露路径、风险和防护清单拆开说明，帮助你把 API 地址等公开配置与密钥留在服务端。256 收藏 -
拆分 PerformanceObserver 原始条目、LCP/CLS/INP 计算与上报层，给出诊断和 web-vitals 接入示例，说明页面隐藏、重复快照、缺失值与 sendBeacon 入队的边界。298 收藏 -
用 :focus-visible 区分键盘导航与鼠标点击下的焦点提示，保留键盘可达性，并通过 @supports 为旧浏览器提供有限回退。433 收藏 -
用 role=dialog、aria-modal、焦点陷阱和 Escape 关闭处理原生弹窗交互，让键盘用户打开、操作和退出弹窗时保持清晰的焦点路径。411 收藏 -
CSS Flex 对齐文字和图标时，align-items: baseline 负责共享文字基线，行高与按钮默认样式决定细节；本文给出最小写法、inline-flex 替代方案和选择 center 的边界。474 收藏 -
区分 CSS Grid 轨道最小值与卡片内容溢出，比较固定列和自动换列的 minmax 写法，并用简明代码说明 min-width、长文本换行与代码块滚动的处理层级。422 收藏 -
CSS text-wrap: balance 可以让短标题在多行显示时尽量均衡每行长度，减少最后一行过短的情况。本文说明它在标题和卡片中的写法、兼容降级，以及与 pretty、nowrap 的取舍。439 收藏 -
文章 · 前端 | 16小时前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage 前端性能 结构化克隆 Web Worker transfer terminate
Web Worker 处理大数据计算时，先用 taskId、type、payload 设计可追踪消息，再根据数据形态选择结构化克隆或 transfer，并用 terminate 明确取消边界。176 收藏 -
围绕 cache key、install、activate 和回滚设计一套 Service Worker 缓存版本更新方案，说明怎样避免新旧缓存互相污染，以及 updateViaCache 和 clients.claim 应该怎样取舍。122 收藏 -
文章 · 前端 | 16小时前 | 前端 · css · 可访问性 · 浏览器兼容 · prefers-reduced-motion animation-timeline 前端兼容 CSS scroll-timeline 滚动驱动动画
CSS scroll-timeline 可以让动画进度跟随滚动位置，但不能替代兼容性和无障碍设计。本文用 @supports 与 prefers-reduced-motion 组织增强、降级和静态默认效果。308 收藏 -
HTMLInputElement.showPicker() 可以让自定义按钮打开日期、文件、颜色或 datalist 等原生选择器；关键是保留用户点击上下文，先做特性检测，并为异常和旧浏览器准备原生 input 回退。106 收藏 -
用 role=status 和 aria-live 给异步页面补上礼貌播报，理解 aria-atomic、aria-busy 的边界，并排查不播报与重复播报问题。261 收藏 -
打开模态框或抽屉时，可以给背景容器设置 inert，让其后代暂时不能点击、聚焦，也不会出现在辅助技术访问树中；关闭浮层后再恢复 inert，并保留旧环境降级策略。153 收藏