前端技术文章
-
交叉类型（Intersection Types）的作用，说白了就是把多个类型“叠加”到一起，组合成一个全新的类型，而这个新类型会同时具备所有成员类型中的内容。 这类似于面向对象中的多重继承，让一个类型可以拥有多个类型的特性。 交叉类型工作原理 类型 A (Person) name: string a400 收藏 -
CSS container query 在子组件中不生效，通常是父级没有建立 container-type，或嵌套时查询到了错误的祖先容器。本文用可复用卡片示例拆解 inline-size、container-name、作用域和兼容降级的排查顺序。400 收藏 -
前端允许上传 SVG 时，不能只看文件名或 input 的 accept。本文从浏览器提示、服务端类型判断、内容净化、隔离存储和回归验证五个层面，给出一套可落地的安全边界。398 收藏 -
用 HTML inert 配合 dialog 和 HTMLElement.inert 锁住模态框背后的页面，解释焦点、点击与无障碍树的真实变化，并给出可验收的回退写法。398 收藏 -
IndexedDB 事务会随事件循环在没有新请求时自动提交。本文用读后写、网络等待、版本升级和同源边界说明为什么不能跨 await 继续使用原事务，以及如何改成稳定的请求回调结构。398 收藏 -
做学术研究、技术调研时，你还在 arxiv、crossref、pubmed 之间来回切吗？同一个关键词复制粘贴 3 遍。本文教你用 SeekAll SDK + 100 行代码搭一个属于自己的搜索聚合工具，规则自己写，数据本机跑，服务端零接触。痛点：信息散落在多个孤岛做学术研究或技术调研时，我经常遇到397 收藏 -
Fetch keepalive 适合在页面关闭、刷新或跳转前尽力发送小型数据。本文从 64 KiB 体积边界、页面生命周期、幂等键和关键写入风险出发，说明哪些请求适合使用，以及什么时候应该换方案。397 收藏 -
SVG symbol 用于保存可复用图形模板，use 负责创建实例。本文用圆点和徽章示例说明 href、viewBox、x/y、width/height 与 preserveAspectRatio 的分工。397 收藏 -
讲清浏览器 MessageChannel 把 port2 交给 iframe 的完整链路：等待 iframe 加载、使用精确 targetOrigin 转移端口、在 event.ports[0] 接管并用回执验证双向通信。396 收藏 -
View Transition API 能让页面切换从硬切变成连续过渡，但快照时机、伪元素样式和不支持浏览器的降级处理，都会造成白闪、旧页面残留或动画不生效。本文从可复现的闪烁现场出发，逐项定位并给出可回退的实现方式。394 收藏 -
文章 · 前端 | 1个月前 | 前端 · 浏览器API · Service Worker waiting registration.update updatefound installing active
用 updatefound、installing 的 statechange 以及 waiting 和 active 状态，判断 Service Worker 新脚本是未变化、已安装等待激活，还是已经接管页面，避免把 update() 的 Promise 返回误当成更新完成。394 收藏 -
对比 requestSubmit 与 form.submit 的原生校验、submit 事件、提交按钮语义和兼容边界，给出自定义按钮、异步确认与直接提交场景的选择清单。392 收藏 -
长列表页面首屏慢时，可以先用 content-visibility: auto 跳过屏外渲染，再用 contain-intrinsic-size 给布局一个合理占位。本文用一组可复现的列表场景说明如何测量收益、避免滚动条跳动，并给出不适合使用的边界。390 收藏 -
htmx 的 hx-sync 可以协调字段校验、表单提交和实时搜索请求。本文用表单竞争场景说明 abort、drop、replace、queue 的差异，并给出提交优先、校验优先和只保留最后一次查询的写法。390 收藏 -
CSS Anchor Positioning 可以让悬浮提示跟随锚点定位，并在空间不足时尝试备用位置。本文用一个按钮与提示框的静态关系，拆清 anchor-name、position-anchor、position-try 的职责和兼容回退。389 收藏