前端技术文章
-
用 BroadcastChannel 广播登录、退出和会话失效信号，让多个同源标签页及时刷新登录状态；同时说明 storage 事件降级、消息去重、首屏初始化和令牌安全边界。243 收藏 -
calc-size() 可以把 max-content 当作固有尺寸基准，再用 size + 固定长度表达最终宽高；本文说明 fallback、@supports、百分比边界，以及它与 interpolate-size 的分工。243 收藏 -
讲清 JavaScript Element.getAnimations 的默认范围、subtree 参数、伪元素筛选和 finished Promise 用法，帮助组件在动画结束后安全清理。243 收藏 -
前端搜索框快速输入时，旧请求可能晚于新请求返回并覆盖结果。本文用 AbortController 取消无效请求，再用请求序号保护结果提交，给出异常处理、signal 复用和 debounce 的边界方案。242 收藏 -
CSS position sticky 不生效时，优先检查最近的滚动机制祖先、滚动轴、top 阈值和父级可用空间，按清单快速定位参照容器问题。241 收藏 -
htmx 局部替换会让目标区域重新合并 HTML。本文说明怎样用稳定 ID 和 hx-preserve 保留指定元素，分析输入框、文件、iframe 与视频的边界，并给出替代布局和复查清单。241 收藏 -
围绕 Astro ClientRouter 的页面交换生命周期，说明如何在 astro:after-swap 后把焦点移到新页面主标题或稳定入口，并区分持久元素焦点保留与普通路由焦点重置。240 收藏 -
Web Locks API 可以用 AbortSignal 取消尚未获锁的排队请求，但不能用同一个 signal 强制终止已经开始的锁回调。本文用 JavaScript 示例拆分等待取消、业务任务取消和资源清理边界。239 收藏 -
文章 · 前端 | 5天前 | 前端 · 性能 · javascript · ReadableStream Web Streams highWaterMark desiredSize backpressure 前端流式读取
前端流式读取失控，通常不是把 chunk 存进数组就能解决。本文用 ReadableStream 的 desiredSize、highWaterMark 与串行 read 建立有界消费，并说明取消、异常和 TransformStream 的清理边界。239 收藏 -
用 Angular afterNextRender 的 read 阶段读取首次渲染后的 DOM 尺寸，说明 viewChild、SSR、hydration、读写分离，以及何时需要 ResizeObserver。239 收藏 -
CSS subgrid 能让嵌套卡片在指定方向沿用父网格轨道，解决标题、正文和操作区逐卡片漂移的问题。本文说明列与行的选择、gap 继承、命名线和隐式轨道边界。238 收藏 -
用 SVGTextContentElement 的 getSubStringLength 测量指定字符区间，用 getComputedTextLength 测量整段文本，并说明字距、x 属性和索引边界对结果的影响。237 收藏 -
React createPortal 只改变 DOM 挂载位置，点击事件仍按 React 树向逻辑父组件冒泡。本文用最小示例说明定位方法、阻断位置和组件边界取舍。237 收藏 -
文章 · 前端 | 2个月前 | javascript · 前端工程 · AbortSignal 事件订阅 JavaScript Observable 响应式清理 addEventListener signal
不依赖尚未普遍可用的 Observable API，使用 AbortController 和 AbortSignal 统一管理事件监听、异步请求与订阅清理，讲清生命周期、重复取消和兼容回退。236 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · 异步编程 · JavaScript Promise.all Array.fromAsync 异步可迭代对象 AsyncIterable for await of
Array.fromAsync 可顺序读取异步可迭代对象并返回数组 Promise；本文用分页生成器讲清映射、错误、内存边界及与 Promise.all 的选择。236 收藏