前端技术文章
-
文章 · 前端 | 2星期前 | 前端 · 性能监控 · javascript · 浏览器API · 静态资源 前端性能 PerformanceObserver PerformanceResourceTiming 资源等待时间
用 PerformanceObserver 收集静态资源计时条目，拆分首字节前等待、下载耗时和最终抓取时长，并处理资源缓冲区、跨源字段为零和上报脱敏等边界。215 收藏 -
ResizeObserver 回调里不要无条件改写被观察元素的尺寸。本文用缓存比较、requestAnimationFrame 和 disconnect 组合出最小配方，说明哪些状态更新会形成反馈，以及怎样为一次性测量设置停止条件。389 收藏 -
以 MutationObserver 观察动态节点，解释 childList 与 subtree 的范围、组件卸载时的 disconnect、待交付记录的 takeRecords 策略，以及重复挂载和回调写回的清理边界。479 收藏 -
通过 navigator.locks.request 为同源多标签页使用稳定锁名，把刷新或同步任务放进异步回调；本文说明排队等待、自动释放、ifAvailable 和 AbortSignal 的边界。329 收藏 -
用 BroadcastChannel 广播登录、退出和会话失效信号，让多个同源标签页及时刷新登录状态；同时说明 storage 事件降级、消息去重、首屏初始化和令牌安全边界。243 收藏 -
Request 的请求体是一次性可消费的流，读取 body 后再 fetch 同一个对象容易失败。本文说明 bodyUsed、clone 的正确时机，以及需要改请求时怎样重新构造 Request。301 收藏 -
使用 AbortSignal.any 合并用户、页面与超时取消来源，解释已取消输入、reason 传播、请求级控制器和计时器清理，并说明联合取消不能替代服务端回滚。490 收藏 -
用 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 收藏