前端技术文章
-
搜索框连续输入时，较早发出的慢请求可能晚于新请求返回并覆盖结果。用 AbortController 取消上一轮 fetch，再用请求序号做最后一道验收，就能同时降低无效请求和旧数据回写风险。497 收藏 -
用一个可运行的 CSS 示例解释 backdrop-filter 的透明背景、滤镜叠加和 backdrop root 边界，并给出兼容回退检查。496 收藏 -
AbortController 取消 fetch 后，fetch Promise、Response 和 response.body 处于不同阶段。本文说明如何区分主动取消与网络错误，并在只拿到响应头、不再需要正文时安全清理未消费的 response body。492 收藏 -
前端表单重复提交不能只靠按钮 disabled 解决：浏览器事件、网络重试和用户回退会分别制造重复请求。本文用原生 JavaScript 拆开提交锁、请求幂等键、失败恢复和服务端去重的配合边界。491 收藏 -
用 IntersectionObserver 观察屏幕外图片，结合 data-src、rootMargin 和 unobserve，只在接近视口时加载真实资源，并处理首屏、降级和布局稳定问题。491 收藏 -
Service Worker 更新时不要直接覆盖旧缓存。本文用版本化缓存、activate 清理和接管策略，拆解新资源先落地、旧资源再删除的可靠流程。490 收藏 -
用一个可复用的卡片组件说明 CSS container query 与 ResizeObserver 的分工：样式交给 CSS，数据计算交给观察器，并通过 requestAnimationFrame 合并重复通知。488 收藏 -
用 ResizeObserver 监听响应式卡片宽度时，先读取 borderBoxSize，再用 requestAnimationFrame 合并同一帧更新，避免回调里反复改布局造成循环告警。487 收藏 -
Vite 8 用 Rolldown 统一开发依赖优化与生产打包链，同时把 JavaScript 转换、压缩和 CSS 压缩边界交给 Oxc 与 Lightning CSS。本文按配置和插件边界说明升级时如何核对。486 收藏 -
用一个带校验状态、禁用状态和兄弟提示的表单例子，拆清 CSS :has() 的相对选择器边界、特异性影响与可维护写法。485 收藏 -
ReadableStream.tee() 的两个消费者速度不一致时，慢分支的未读数据会在内部队列中积累，快分支不会自动等待。本文用最小示例解释背压、内存风险、取消语义与分流方案选择。485 收藏 -
connectedCallback 适合处理依赖 DOM 的初始化，但不能把所有逻辑都塞进去。本文用 Web Component 示例区分 constructor、connectedCallback、attributeChangedCallback 和 disconnectedCallback 的职责，并处理重连、子节点时机与事件清理。484 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · Fetch AbortController ReadableStream TextDecoderStream 大文件分块
前端用 fetch 读取大文件时，不必等 response.text() 或 response.blob() 一次性完成。本文用 ReadableStream 逐块消费响应，讲清 TextDecoderStream、背压、取消请求和兼容处理。483 收藏 -
使用 URLSearchParams.append 逐个生成同名查询参数，用 getAll 读取完整数组，并了解 set 覆盖值、数组初始化和后端解析约定的常见坑。483 收藏 -
通过 view-transition-name 与 startViewTransition，让列表更新只动画目标元素，并为不支持的浏览器保留直接更新降级。483 收藏