前端技术文章
-
SPA 接入 View Transition API 时，动画应该是渐进增强而不是状态更新的前置条件。本文用同一更新回调处理能力检测、减少动态效果、焦点恢复和 updateCallbackDone 边界。142 收藏 -
介绍 Intl.DurationFormat 如何接收结构化持续时间对象，按 locale 与 long、short、narrow 风格生成本地化文本，并用 formatToParts 和能力检测处理真实前端场景。141 收藏 -
文章 · 前端 | 1个月前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage TypedArray 结构化克隆 Web Worker Transferable
Web Worker通过postMessage传递大数组时，默认结构化克隆会复制数据。本文用TypedArray加Transferable转移底层ArrayBuffer，说明发送端detached边界、Worker侧重建视图、结果回传和何时不该转移。140 收藏 -
CSS :has() 可以根据子元素或后续兄弟是否匹配来控制父级样式。本文用卡片状态和表单校验两个场景说明后代与直接子元素的区别、@supports 降级、特异性和适用边界。140 收藏 -
介绍浏览器import maps的imports与scopes配置，提供精确名称和目录前缀示例，解释导入者URL、模块部署与加载权限边界，以及版本发布和失败排查方法。140 收藏 -
用 IntersectionObserver 为长列表图片实现进入视口再加载：从 data-src 占位、rootMargin 预加载，到回调清理、停止观察和兼容边界，给出可直接改造的 JavaScript 写法。139 收藏 -
对比 TypeScript 包内 #imports 别名与当前包名自引用的解析规则，给出 package.json、tsconfig.json 和发布目录的配置边界。139 收藏 -
文章 · 前端 | 2个月前 | javascript · 浏览器API · AbortSignal 前端性能 scheduler.postTask Prioritized Task Scheduling
用一个小型任务调度器示例说明 scheduler.postTask 的优先级、AbortSignal 取消和 scheduler.yield 让出主线程边界，并给出浏览器能力检测与降级写法。138 收藏 -
通过字符串键、对象身份键、读取方式和序列化需求，对比 Object.groupBy 与 Map.groupBy 的选择方法，并解释空原型对象、键转换和元素引用等容易忽略的边界。138 收藏 -
用 CSS scrollbar-width 的 thin 值缩窄长列表滚动条，同时区分 auto 与 none 的行为，处理根元素和嵌套滚动面板的作用范围，并保留键盘、滚轮和触摸用户的滚动入口。138 收藏 -
用 CSS @container style() 读取组件祖先的自定义属性，让同一组件在浅色、深色和高对比主题下保持局部样式一致，并补上浏览器降级与可访问性检查。136 收藏 -
讲清 CSS contain-intrinsic-size 与 content-visibility 的配合方式，用合理的占位尺寸减少长列表内容进入视口时的布局跳动，并给出 CLS 与兼容降级的检查方法。136 收藏 -
文章 · 前端 | 2个月前 | html · 前端 · javascript · css · 表单校验 Web Components ElementInternals form-associated custom elements setValidity
把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏 -
动态创建正则时，先用 RegExp.escape() 将搜索词、域名等外部字符串转成字面量，再拼接固定的正则语法。本文说明手写转义的误区、组合方式、兼容策略和输入边界。134 收藏 -
用一个可运行的曝光实验说明 IntersectionObserver 的 threshold 数组如何触发可见比例回调，并用 Set 做首屏曝光去重，避开重复上报和阈值误判。133 收藏