前端技术文章
-
Vite Environment API 用命名环境承载浏览器、Node 和 Edge 的差异。本文用配置示例说明顶层继承、optimizeDeps 边界和渐进迁移方法。418 收藏 -
AbortController 的 AbortSignal 是一次性信号，调用 abort 后不能恢复。本文用请求切换场景解释为什么复用旧控制器会让新请求立即取消，并给出每次请求新建控制器、取消旧请求和防止旧响应覆盖新结果的生产写法。418 收藏 -
CSS 容器样式查询可以用 @container style() 读取父容器上的自定义属性。本文用 card-mode 示例说明无值和值匹配、继承、计算值、@property、命名容器、尺寸组合和兼容降级。414 收藏 -
讲清 Cache API 的 match 方法如何用 ignoreSearch 控制查询参数是否参与缓存匹配，给出静态资源示例、参数边界、响应差异与缓存清理策略。409 收藏 -
本文用一段最小 CSS 配方让横向卡片在滚动结束后停在卡片边界，说明 scroll-snap-type、scroll-snap-align、gap、scroll-padding 与快速滑动边界。403 收藏 -
用 IntersectionObserver 发现即将进入视口的资源，通过去重队列、unobserve 和 AbortController 实现可停止、可重试的懒加载。401 收藏 -
讲清浏览器 MessageChannel 把 port2 交给 iframe 的完整链路：等待 iframe 加载、使用精确 targetOrigin 转移端口、在 event.ports[0] 接管并用回执验证双向通信。396 收藏 -
对比 requestSubmit 与 form.submit 的原生校验、submit 事件、提交按钮语义和兼容边界，给出自定义按钮、异步确认与直接提交场景的选择清单。392 收藏 -
htmx 的 hx-sync 可以协调字段校验、表单提交和实时搜索请求。本文用表单竞争场景说明 abort、drop、replace、queue 的差异，并给出提交优先、校验优先和只保留最后一次查询的写法。390 收藏 -
用 container-type 建立容器查询上下文，再通过 @container 按卡片自身宽度切换单列与两列布局，并说明命名容器、inline-size 与回退方案的边界。387 收藏 -
服务端输出 Declarative Shadow DOM 后，自定义元素仍可能保持未知 HTMLElement 状态。本文从解析时序、CustomElementRegistry 一致性和升级观测三个指标入手，给出可复用的定位代码与修复结构，帮助 SSR 组件稳定触发 constructor 和 connectedCallback。387 收藏 -
用 Fetch Streams 分段读取大响应体，串起 Response.body、TextDecoderStream、TransformStream 和 WritableStream，并说明背压、取消与错误处理的边界。386 收藏 -
用 View Transition API 为列表到详情的跳转增加共享元素动画，同时保留不支持浏览器的原生导航回退。385 收藏 -
前端 WebSocket 需要把异常重连和页面离开分成两条路径：异常关闭采用带抖动的指数退避，pagehide 负责主动收尾，pageshow 再按 bfcache 状态恢复，避免定时器泄漏、重复连接和无休止重连。381 收藏 -
IntersectionObserver 的 scrollMargin 会扩展 root 内嵌套滚动容器的裁剪边界，适合处理轮播、虚拟列表和懒加载的提前观察。本文说明它与 rootMargin、threshold 的分工，以及重建观察器和兼容性回退方法。380 收藏