前端技术文章
-
Vite 的 import.meta.glob 可以根据文件模式批量生成模块映射。本文从默认懒加载开始，说明 eager、命名导入、多模式排除、query 资源加载和字面量参数边界。157 收藏 -
React useOptimistic 的列表回滚关键是保留真实数据作为基线，用 reducer 标记待处理项，请求失败时让乐观状态自然恢复，请求成功后再同步服务端列表。153 收藏 -
打开模态框或抽屉时，可以给背景容器设置 inert，让其后代暂时不能点击、聚焦，也不会出现在辅助技术访问树中；关闭浮层后再恢复 inert，并保留旧环境降级策略。153 收藏 -
前端可以用 PerformanceObserver 读取 layout-shift 条目，再通过 value、hadRecentInput 和 sources 判断布局偏移是否与用户输入有关，并定位发生移动的元素。本文还说明调试累计值与正式 CLS 的边界。153 收藏 -
ReadableStream 通过 pipeThrough 把数据交给 TransformStream，再从转换流的 readable 端继续消费。本文从一次分块边界误判出发，说明转换回调、文本解码、管道串联以及关闭、异常和取消选项的正确用法。151 收藏 -
通过 PerformanceResourceTiming 的原始字段定位单个资源响应区间，给出有限采集与停止观察的示例，区分跨域受限、缓存零值和未知样本，避免把浏览器区间当作纯服务端耗时。150 收藏 -
用 fetch 获取流式响应时，ReadableStream 可以让页面边接收边处理。本文说明 response.body、getReader、TextDecoderStream、异步迭代和 AbortController 的组合方式，并列出 UTF-8 分片、流锁定和取消清理的边界。150 收藏 -
文章 · 前端 | 3星期前 | 前端 · 性能优化 · javascript · scheduler.postTask TaskController Prioritized Task Scheduling API TaskSignal JavaScript任务优先级
Scheduler.postTask 用 options.priority 设置固定优先级，用 TaskController 的 TaskSignal 管理动态优先级。本文说明三档优先级、Promise 错误处理、取消、delay 和浏览器能力检测。148 收藏 -
通过container-type和命名容器查询，让同一组件在宽主栏与窄侧栏分别响应，提供HTML和CSS示例，并说明尺寸来源、自身查询限制、默认布局与排错要点。148 收藏 -
介绍 Intl.DurationFormat 如何接收结构化持续时间对象，按 locale 与 long、short、narrow 风格生成本地化文本，并用 formatToParts 和能力检测处理真实前端场景。141 收藏 -
用 IntersectionObserver 为长列表图片实现进入视口再加载：从 data-src 占位、rootMargin 预加载，到回调清理、停止观察和兼容边界，给出可直接改造的 JavaScript 写法。139 收藏 -
用 CSS scrollbar-width 的 thin 值缩窄长列表滚动条，同时区分 auto 与 none 的行为，处理根元素和嵌套滚动面板的作用范围，并保留键盘、滚轮和触摸用户的滚动入口。138 收藏 -
动态创建正则时，先用 RegExp.escape() 将搜索词、域名等外部字符串转成字面量，再拼接固定的正则语法。本文说明手写转义的误区、组合方式、兼容策略和输入边界。134 收藏 -
解释 Vite 配置求值早于 .env 文件加载的原因，并用 loadEnv 正确读取模式变量、配置端口和控制客户端暴露边界。133 收藏 -
SolidJS 的 createStore 可以用 setStore 路径语法定位嵌套对象和数组元素，本文用一个表单状态示例说明局部更新、条件批量更新以及 produce 的适用边界。130 收藏