前端技术文章
-
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
用 CSS @layer 固定组件库、基础样式和业务覆盖的优先级，说明 vendor 与 overrides 的组织方式，以及未分层规则、!important 和内联样式的迁移边界。464 收藏 -
文章 · 前端 | 4天前 | 前端 · 性能监控 · javascript · 前端性能 PerformanceObserver INP Long Animation Frames API LoAF 卡顿脚本
使用 Long Animation Frames API 采集超过 50ms 的长帧，从 scripts 中按脚本地址、入口函数与字符位置聚合耗时，并区分脚本执行、强制布局和渲染开销。463 收藏 -
Vite 依赖预构建异常通常涉及依赖指纹、node_modules/.vite 与浏览器强缓存三层。本文给出 --force、optimizeDeps 与 monorepo 链接包的顺序化排查方法。451 收藏 -
CSS color-mix 的默认混合空间会影响主题色的亮度、饱和度和色相。本文用原创示例说明如何选择 oklab、oklch 或 srgb，并处理比例、透明度与组件状态。451 收藏 -
围绕 fetch 事件实现缓存优先、网络回退和离线兜底，限定同源 GET 请求，只缓存成功响应，并解释 HTTP 错误、网络异常与 Response clone 的边界。448 收藏 -
把前端性能预算拆成图片、脚本和交互三类，给出可落地的体积、长任务、LCP、INP、CLS 阈值，以及如何用实验室测试和真实用户数据持续追踪。446 收藏 -
用 HTML Popover API 的 popover、popovertarget 与 JavaScript 方法实现非模态轻量弹层，并说明 CSS 状态样式、toggle 事件、dialog 边界和兼容降级策略。444 收藏 -
Web Worker 不能直接操作页面 DOM，正确做法是让 Worker 计算数据，再用 postMessage 回传，由主线程统一更新页面。443 收藏 -
Service Worker 更新后仍返回旧页面，通常与旧 worker、旧 Cache API 条目和页面 controller 未切换有关。本文用版本化缓存名、activate 清理、skipWaiting 与 clients.claim 拆解排查和修复策略。442 收藏 -
CSS Style Container Query 可以读取父级自定义属性，让组件后代按密度、主题或布局状态切换样式。本文说明 style() 的无值与带值查询、@property 类型化比较，以及继承和浏览器支持造成的不生效问题。440 收藏 -
讲清 ReadableStream 如何用 reader 逐块读取响应、用 TextDecoder 保持字符完整，并在消费变慢、提前结束和异常时正确处理背压与 cancel。436 收藏 -
文章 · 前端 | 4天前 | websocket · javascript · 异步编程 · JavaScript websocket AbortSignal 异步迭代器 Promise.withResolvers EventTarget
Promise.withResolvers 适合由外部事件决定完成时机的异步桥接：一次性 DOM 事件、带取消和超时的等待，以及将持续事件源改造成异步迭代器。本文给出监听器清理、解析器权限、消息队列、错误通道与兼容回退的生产写法。431 收藏 -
用 position-try-fallbacks 为 CSS 锚点浮层安排有优先级的回退候选，理解逗号与空格的区别，并处理双轴翻转和兼容降级。427 收藏 -
多列卡片的标题和正文长度不同会让按钮上下错位。本文用 CSS subgrid 继承父网格行轨道，对齐嵌套卡片的标题、内容和操作区域，并给出 gap、响应式和兼容降级方案。426 收藏