前端技术文章
-
CSS scroll-snap 的关键是让滚动容器声明吸附轴和严格程度，再让每张卡片声明对齐边缘。本文从最小横向列表开始，说明 scroll-snap-type、scroll-snap-align、scroll-padding 和 scroll-margin 的分工，以及 mandatory、proximity 和降级处理的选择。471 收藏 -
cqi 按查询容器的 inline-size 计算，cqb 按 block-size 计算；两者跟随逻辑轴而不是固定的 width、height。本文说明 container-type、writing-mode 和无合格容器时的回退边界。470 收藏 -
Range.intersectsNode() 判断的是节点与 Range 是否有交集，不等于整个节点内容都被包含。本文从 DOM 边界点解释两者差异，并给出完整包含、文本命中和跨文档节点的选择方式。470 收藏 -
围绕锚定面板靠近边缘后溢出的场景，讲解 CSS position-try-fallbacks、@position-try、翻转组合及候选顺序，并提供尺寸约束与普通文档流降级配置。469 收藏 -
用 navigator.locks.query() 读取 Web Locks 的 held 与 pending 快照，理解 name、mode、clientId，并处理安全上下文和异常边界。467 收藏 -
Fetch 被取消后，不要只看统一的失败结果。AbortSignal.timeout 会给出 TimeoutError，AbortController 默认产生 AbortError，AbortSignal.any 会保留最先触发的 reason。本文给出可复用封装，并说明网络错误、兼容性、竞态和清理边界。466 收藏 -
用 PerformanceNavigationTiming 计算导航级 TTFB，区分 responseStart、requestStart 与最终响应时间，并处理 PerformanceObserver 的 buffered 场景。465 收藏 -
CSS font-size-adjust 可以按 x-height、cap-height 或 CJK 字符度量调整字体使用字号，让首选字体不可用时的后备字体保持相近字高。本文说明固定比例、from-font、继承、size-adjust 与旧浏览器降级边界。465 收藏 -
用 CSS @layer 固定组件库、基础样式和业务覆盖的优先级，说明 vendor 与 overrides 的组织方式，以及未分层规则、!important 和内联样式的迁移边界。464 收藏 -
以嵌套对象和两个共用缓冲区的视图为例，说明 structuredClone 普通克隆与 transfer 的区别、转移列表去重及旧引用失效，并给出 DataCloneError 的排查方向。464 收藏 -
文章 · 前端 | 4星期前 | 前端 · 性能监控 · javascript · 前端性能 PerformanceObserver INP Long Animation Frames API LoAF 卡顿脚本
使用 Long Animation Frames API 采集超过 50ms 的长帧，从 scripts 中按脚本地址、入口函数与字符位置聚合耗时，并区分脚本执行、强制布局和渲染开销。463 收藏 -
Background Sync 适合把离线表单的发送时机交给 Service Worker，但它不是本地存储。本文用 IndexedDB outbox、唯一同步标签和失败保留策略，整理一套可回退的延迟提交方案。463 收藏 -
用 append 构建同名文本和多文件字段，区分 set、getAll 与单值读取，说明 multipart 请求头、表单重复收集和接收端集合解析的处理方式。459 收藏 -
用 requestIdleCallback 把可拆分的非关键任务放进空闲窗口，结合 deadline、timeout 和降级策略控制主线程压力，并把 DOM 提交交给 requestAnimationFrame。458 收藏 -
CSS zoom 会让缩放后的组件参与布局，适合整体比例调整；transform: scale() 只做视觉变换，适合不希望推动兄弟元素的预览或悬浮效果。450 收藏