前端技术文章
-
Promise.all 失败只代表聚合结果不可用，不会自动取消其他请求。本文用 AbortController、共享 AbortSignal 和请求代次，处理并发请求失败、切页、重试与迟到响应。347 收藏 -
CSS position sticky 不生效时，优先检查最近的滚动机制祖先、滚动轴、top 阈值和父级可用空间，按清单快速定位参照容器问题。241 收藏 -
用组件场景区分 CSS @container 的 style query 与 size query，说明 container-type、自定义属性、组合条件和常见误用。158 收藏 -
connectedCallback 适合处理依赖 DOM 的初始化，但不能把所有逻辑都塞进去。本文用 Web Component 示例区分 constructor、connectedCallback、attributeChangedCallback 和 disconnectedCallback 的职责，并处理重连、子节点时机与事件清理。484 收藏 -
IndexedDB 按 status、updatedAt 等字段查询时，如果 object store 没有二级索引，不要先把全部记录读出再过滤。本文说明如何升级数据库版本，在 onupgradeneeded 中创建 IDBIndex，并用 IDBKeyRange 与游标缩小读取范围。476 收藏 -
Web Worker 不能直接操作页面 DOM，正确做法是让 Worker 计算数据，再用 postMessage 回传，由主线程统一更新页面。443 收藏 -
AbortController 取消 fetch 后，Response 可能已经拿到但响应体还没读完，继续调用 text 或 json 就会抛出 AbortError。本文给出取消判断、单次消费响应体、区分网络失败与请求竞态的实用写法。248 收藏 -
Fetch API 的 Response.json() 失败后不能直接再读同一个响应体。本文用 text() 与 clone() 解释 bodyUsed 边界，并给出保留原始文本、记录状态码和控制日志内容的实用写法。339 收藏 -
用 useActionState 让 Server Action 在校验失败时同时返回字段值和错误信息，避免表单回显为空，并区分预期错误与异常。308 收藏 -
IntersectionObserver 回调频繁触发不等于请求必须重复。本文从首次 observe、threshold 穿越和 entries 批量回调说起，用元素级 loading/done 状态、rootMargin 与 unobserve 设计稳定的懒加载去重方案。154 收藏 -
Service Worker 更新后旧缓存不消失，通常是新旧 worker 共存和缓存未版本化造成的。本文用 install、activate、event.waitUntil 和受限删除名单设计可回退的版本清理方案。127 收藏 -
Vue computed getter 不应修改自己读取的响应式依赖，否则会把派生值和源状态连成循环。本文用最小示例解释回写原因，并给出事件处理器、纯 computed、watch 和 writable computed 的分工边界。352 收藏 -
React Strict Mode 在开发环境会额外执行一次 useEffect 的 setup 和 cleanup，用来检查副作用是否可重复同步。本文区分开发与生产边界，并给出订阅、定时器和请求的清理写法。381 收藏 -
排查 Vite 生产构建仍读取旧环境变量的问题，解释 --mode、NODE_ENV、.env 文件和进程环境变量的优先级，并给出配置阶段与构建阶段的核对方法。204 收藏 -
图片加载完成前先用 aspect-ratio 建立稳定占位，再配合 width、height、object-fit 和兼容降级，减少卡片内容被推移造成的布局跳动。282 收藏