前端技术文章
-
CSS color-mix 的默认混合空间会影响主题色的亮度、饱和度和色相。本文用原创示例说明如何选择 oklab、oklch 或 srgb，并处理比例、透明度与组件状态。451 收藏 -
CSS :has() 的难点在匹配范围而不是语法。本文用复杂列表说明锚点元素、直接子代、任意后代、相邻兄弟与 :not() 的组合，并给出 @supports 降级和性能边界。367 收藏 -
TypeScript satisfies 不需要独立配置项。本文从版本与构建解析器开始，说明如何约束配置对象并保留具体推断，再用最小 tsc 检查定位常见报错。254 收藏 -
围绕 Vite import.meta.glob 的路径基准、字面量模式、默认懒加载、eager、import 与 query 选项，整理匹配为空和取值异常的排查方法。367 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏 -
WebSocket close code 排查不要只盯着数字：浏览器主动关闭只能使用 1000 或 3000–4999，1006 等保留码只表示观测到的异常；结合 reason、wasClean、readyState 和重连退避，才能定位协议、消息大小、服务端和网络问题。341 收藏 -
文章 · 前端 | 6天前 | 前端 · javascript · 性能排查 · 背压 TransformStream highWaterMark desiredSize Web Streams API
TransformStream 的背压不是只调一个 highWaterMark：输入侧看 writableStrategy，输出侧看 readableStrategy，并让 size(chunk) 与数据单位一致。本文用 pipeThrough、writer.ready 和 desiredSize 整理配置与排查方法。387 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
讲清 IntersectionObserver 的 root、null、祖先关系、rootMargin 与 threshold，并用 rootBounds 和检查表定位滚动容器中不触发的问题。144 收藏 -
用 AbortSignal.any 合并用户取消与请求超时，掌握特性检测、fetch 接入、reason 判断和监听器清理，快速排查请求一创建就中止或超时原因丢失的问题。408 收藏 -
Array.toSorted 适合在不改动原数组的前提下完成排序，但数字、对象和旧运行环境都需要额外配置。本文从 sort 与 toSorted 的差异开始，给出比较函数、兼容写法和回归检查清单。169 收藏 -
TypeScript 项目遇到 structuredClone 类型缺失时，按浏览器与 Node.js 宿主分别检查 target、lib、types 和 noLib，再区分编译期声明、运行时支持与 DataCloneError 数据边界。310 收藏 -
CSS subgrid 的关键是让嵌套网格继承父级列或行轨道。本文从最小配置、轴向继承、网格线映射和隐式轨道四个方面，排查卡片与表单对不齐的常见原因。371 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
讲清 Web Worker 使用 Transferable 传回 ArrayBuffer 结果的写法，区分结构化克隆、所有权转移与共享内存，并说明 detach、TypedArray 和生命周期边界。162 收藏