前端技术文章
-
CSS 容器查询容易因为容器类型和祖先层级选错而出现样式误匹配。本文用可复用卡片说明 container-type: inline-size、size、container-name 与最近合格祖先的关系，帮助你把查询范围稳定地隔离在组件宿主内。295 收藏 -
用 PerformanceObserver 订阅 longtask 条目，分清 buffered 回放、duration 与 attribution 的读取方式，并补上支持检测、批量上报和断开观察器的处理边界。182 收藏 -
通过 PerformanceResourceTiming 的原始字段定位单个资源响应区间，给出有限采集与停止观察的示例，区分跨域受限、缓存零值和未知样本，避免把浏览器区间当作纯服务端耗时。150 收藏 -
addEventListener 的 once 选项适合只处理一次的点击、提交和初始化事件。本文对比普通监听、自动移除、removeEventListener 与 AbortSignal 的生命周期和使用边界。204 收藏 -
本文用一个可伸缩组件场景说明 ResizeObserver 的 contentBoxSize、borderBoxSize 和 contentRect 如何选择，并给出数组形态、旧实现回退与组件销毁处理方式。114 收藏 -
BroadcastChannel 可用于跨标签页短消息同步。本文以主题偏好为例，说明通信范围、消息协议、有限去重、关闭清理与降级路径，并指出历史补发和并发一致性需由业务另行处理。306 收藏 -
URLPattern 可以用 pathname 命名组匹配前端路径，并从 exec 结果中读取 userId 等参数。本文说明 test 与 exec 的分工、斜杠和查询串边界，以及不支持 URLPattern 时的 URL 降级思路。184 收藏 -
通过 noUncheckedIndexedAccess 让 TypeScript 显式处理数组越界、动态字典键和配置缺失，并用收窄、默认值与边界函数建立可靠的索引读取方式。404 收藏 -
用Intl.Segmenter选择字素、词与句子粒度，设置语言优先列表，保留原文片段和UTF-16偏移，并说明词标记、结果差异及能力缺失时的处理。410 收藏 -
用 structuredClone 深拷贝含嵌套对象、数组和循环引用的数据，并排查 DataCloneError、原型元数据与 transfer 转移语义等边界。312 收藏 -
本文用 color-mix() 从主题色生成浅色背景、强调色和透明层，说明 oklab、oklch、srgb 的选择差异、百分比归一化，以及用 @supports 保留纯色回退的写法。236 收藏 -
通过双容器卡片示例，说明怎样从视口断点迁移到CSS容器查询，配置container-type与container-name，并处理祖先选择、尺寸包含和单列降级。174 收藏 -
前端可以用 PerformanceObserver 读取 layout-shift 条目，再通过 value、hadRecentInput 和 sources 判断布局偏移是否与用户输入有关，并定位发生移动的元素。本文还说明调试累计值与正式 CLS 的边界。153 收藏 -
用 PerformanceNavigationTiming 计算导航级 TTFB，区分 responseStart、requestStart 与最终响应时间，并处理 PerformanceObserver 的 buffered 场景。465 收藏 -
说明IntersectionObserver按列表卡片可见面积比例加载内容的实现，区分threshold与rootMargin，并处理去重、降级和卸载后的异步清理。251 收藏