前端技术文章
-
当卡片标题、正文和按钮高度不一致时，CSS subgrid 可以让嵌套卡片共享父级网格轨道。本文用一组商品卡片拆开 grid-template-rows: subgrid 的生效条件、代码改法、@supports 回退与常见边界。474 收藏 -
CSS @layer 覆盖不了组件样式，通常不是 specificity 不够，而是层的首次创建顺序、未分层样式或 !important 改变了级联比较。本文用最小示例给出固定层顺序和排查清单。471 收藏 -
cqi 按查询容器的 inline-size 计算，cqb 按 block-size 计算；两者跟随逻辑轴而不是固定的 width、height。本文说明 container-type、writing-mode 和无合格容器时的回退边界。470 收藏 -
WebSocket 断线重连最容易踩中旧连接复活：旧 socket 的 close 回调晚到，可能覆盖新连接状态。本文从 readyState、连接代次、指数退避和手动关闭四个边界出发，给出可验证的浏览器实现。467 收藏 -
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
AbortController 取消 fetch 并不等于已经停止 Promise 链。本文用一个组件卸载场景拆解 signal、catch 和状态门禁的关系，给出可复用的前端请求收口写法。465 收藏 -
CSS color-mix() 可以从基础主题色派生 hover、浅底和边框状态，但混合空间与透明度会改变最终观感。本文用 token、对比度和 fallback 验收一套可落地的主题色方案。465 收藏 -
Vite 环境变量未出现在客户端时，先检查 VITE_ 前缀，再核对 mode、.env 文件和 envPrefix 配置；数据库密码、私钥等服务端秘密不应通过改前缀暴露。464 收藏 -
文章 · 前端 | 2天前 | 前端 · 性能监控 · javascript · 前端性能 PerformanceObserver INP Long Animation Frames API LoAF 卡顿脚本
使用 Long Animation Frames API 采集超过 50ms 的长帧，从 scripts 中按脚本地址、入口函数与字符位置聚合耗时，并区分脚本执行、强制布局和渲染开销。463 收藏 -
跨域 iframe、弹窗通信最容易漏掉的不是消息格式，而是发送方身份校验。本文用 origin、source 和消息结构三道边界，写出可验证的 postMessage 接收与回复代码。462 收藏 -
从触底加载重复请求的现场出发，拆开 rootMargin、哨兵节点和请求状态之间的关系，给出可验收的去重实现与异常处理边界。462 收藏 -
用 Fetch Response.body 和 ReadableStream 将搜索结果按块解析并增量渲染，说明 reader.read、TextDecoderStream、controller.desiredSize 与背压边界。460 收藏 -
前端列表从几百行涨到上万行后，滚动掉帧通常不是单个 CSS 属性造成的。本文用长列表筛选和滚动场景拆解 DOM 数量、批量渲染、可视窗口与主线程任务，给出可复现的 60 FPS 验收方法和回退边界。458 收藏 -
ResizeObserver 回调里直接改尺寸，可能让布局反馈进入下一帧并反复触发 loop completed with undelivered notifications。本文用真实的 ResizeObserver、requestAnimationFrame 和 entry.target.style.width 示例拆解原因，并给出可验收的收敛写法。456 收藏 -
文章 · 前端 | 1个月前 | css · 前端开发 · anchor-name position-try-fallbacks CSS anchor positioning position-anchor 前端浮层
用一个可移动的菜单按钮和提示浮层，验证 CSS anchor positioning 如何通过 anchor-name 建立锚点、position-anchor 连接目标，并用 position-try-fallbacks 在空间不足时切换位置。454 收藏