前端技术文章
-
把前端性能预算拆成图片、脚本和交互三类，给出可落地的体积、长任务、LCP、INP、CLS 阈值，以及如何用实验室测试和真实用户数据持续追踪。446 收藏 -
用 CSS :has() 根据子元素的 invalid、checked 或兄弟关系选择父元素，掌握直接子代、兼容降级、特异性与性能边界。446 收藏 -
用 HTML Popover API 的 popover、popovertarget 与 JavaScript 方法实现非模态轻量弹层，并说明 CSS 状态样式、toggle 事件、dialog 边界和兼容降级策略。444 收藏 -
TypeScript NoInfer 用于拆分泛型推断与参数约束，本文通过数组、默认值和配置对象示例说明如何保持调用方的显式类型选择，并列出版本与回归边界。443 收藏 -
SVG marker 端点图形沿路径方向旋转，关键是 orient=auto；双向连线使用 auto-start-reverse，再用 refX/refY 和 markerUnits 校准锚点与缩放。443 收藏 -
URLPattern 可以把带参数的 pathname 写成可复用模式，再用 test() 判断路由是否命中、用 exec() 读取 pathname.groups 中的参数。本文拆解模式声明、参数提取、baseURL、查询字符串和兼容边界。443 收藏 -
WebSocket 客户端不应看到 close 事件就立即重连。本文结合 CloseEvent 的 code、reason、wasClean，把关闭原因分成停止重连、退避重连和先修复协议或权限三类，并给出带抖动退避的 JavaScript 分类器。443 收藏 -
JSON.rawJSON 可以把经过校验的原始 JSON 原子值交给 JSON.stringify，适合保留超大整数的数字文本；本文同时说明合法性、字符串语义和兼容性边界。442 收藏 -
CSS Style Container Query 可以读取父级自定义属性，让组件后代按密度、主题或布局状态切换样式。本文说明 style() 的无值与带值查询、@property 类型化比较，以及继承和浏览器支持造成的不生效问题。440 收藏 -
从首屏内容、渐进增强、脚本时序和兼容降级四个约束出发，比较 Declarative Shadow DOM 与客户端 attachShadow 的职责边界，并给出可复用的 Web Component 初始化写法。440 收藏 -
WebTransport 的双向流和 Datagram 都能承载实时数据，但可靠性、顺序性和消息边界完全不同。本文用一个实时面板的取舍场景说明两者适合什么数据，并给出可靠流的 framing 写法与兼容检查清单。440 收藏 -
CSS @starting-style 用来为首次显示或从 display:none 变为可见的元素提供过渡起始值。本文以原生 dialog 为例，拆解默认态、进入态、display 离散过渡和兼容降级，让弹窗既能淡入也能完整淡出。440 收藏 -
CSS text-wrap: balance 可以让短标题在多行显示时尽量均衡每行长度，减少最后一行过短的情况。本文说明它在标题和卡片中的写法、兼容降级，以及与 pretty、nowrap 的取舍。439 收藏 -
JavaScript Promise.any 会忽略先失败的候选，返回第一个 fulfilled 值；本文用原创示例说明调用方式、AggregateError 处理、输入顺序与和 Promise.race、Promise.all 的边界。437 收藏 -
开启 TypeScript noUncheckedIndexedAccess 后，数组下标读取会带上 undefined。本文按规则、循环、索引判断和迁移边界说明怎样选择 for-of、边界检查、默认值与非空断言。435 收藏