前端技术文章
-
动态 import 失败时，用统一的 catch 和 finally 切换到可重试的降级界面，并区分网络、路径和模块执行问题。282 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
用 CSS Grid 的 subgrid 让多张卡片共享父网格的行轨道，解决标题、说明和按钮因内容长度不同而错位的问题，并补充浏览器支持与 fallback 写法。410 收藏 -
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 收藏 -
文章 · 前端 | 1星期前 | 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 收藏