前端技术文章
-
CSS container query 在子组件中不生效，通常是父级没有建立 container-type，或嵌套时查询到了错误的祖先容器。本文用可复用卡片示例拆解 inline-size、container-name、作用域和兼容降级的排查顺序。400 收藏 -
WebSocket 断线重连时，分别在 error 和 close 中 setTimeout 很容易形成多个重连链。本文用单一调度器、指数退避和 stop 清理解决定时器叠加问题。205 收藏 -
用 AbortController 和 AbortSignal.timeout 为 Fetch 设置超时，区分 TimeoutError、AbortError、HTTP 状态和普通网络错误，并给出兼容回退写法。108 收藏 -
用 IntersectionObserver 观察屏幕外图片，结合 data-src、rootMargin 和 unobserve，只在接近视口时加载真实资源，并处理首屏、降级和布局稳定问题。491 收藏 -
文章 · 前端 | 5天前 | javascript · Web Components Custom Elements attributeChangedCallback observedAttributes
attributeChangedCallback 不触发时，先检查 observedAttributes 是否监听了正确的 attribute，再确认代码改的是 DOM attribute 而不是只改 JavaScript property。本文用最小示例说明属性反射、初始值和回调重渲染的边界。233 收藏 -
Service Worker 更新后仍返回旧页面，通常与旧 worker、旧 Cache API 条目和页面 controller 未切换有关。本文用版本化缓存名、activate 清理、skipWaiting 与 clients.claim 拆解排查和修复策略。442 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
通过 view-transition-name 与 startViewTransition，让列表更新只动画目标元素，并为不支持的浏览器保留直接更新降级。483 收藏 -
Web Components 的 adoptedCallback 只在自定义元素进入新的 Document 时触发。本文区分同文档换位、跨文档移动和 importNode 复制，并说明如何用 oldDocument、newDocument 与 ownerDocument 重绑文档相关资源。382 收藏 -
用版本化 Cache API、install/activate 生命周期和限定 fetch 匹配范围，避免 Service Worker 更新后继续命中旧资源。215 收藏 -
WebSocket close code 1006 不是服务端发送的关闭原因，而是浏览器在没有收到 Close 帧时给出的异常关闭表示。本文用 CloseEvent、代理日志和服务端日志三层证据定位断开位置。154 收藏 -
当多个嵌套组件必须沿用同一组父网格轨道时，CSS subgrid 可以避免重复定义列宽和行高。本文通过卡片与表单场景说明 subgrid 的写法、gap 和隐式轨道边界，以及如何保留独立 grid 回退。147 收藏 -
复杂组件更新时，CSS contain 可以把布局、绘制、样式或尺寸计算限制在子树内。本文说明 layout、paint、size、content 的边界，解释定位和溢出副作用，并给出 contain-intrinsic-size 的实用写法。107 收藏 -
IndexedDB 事务不能稳定跨过 await，因为事务只在创建任务和请求事件回调中保持 active。先完成异步准备，再创建最小范围事务，并用 complete 与 abort 判断最终结果。221 收藏 -
BroadcastChannel 关闭标签页后收不到消息，通常不是浏览器漏发，而是旧实例已离开通道且 API 不保存历史。本文用生命周期封装、主动同步和状态快照给出可落地的处理方式。199 收藏