前端技术文章
-
CSS 容器样式查询可以用 @container style() 读取父容器上的自定义属性。本文用 card-mode 示例说明无值和值匹配、继承、计算值、@property、命名容器、尺寸组合和兼容降级。414 收藏 -
CSS Anchor Positioning 可以让 tooltip、菜单等浮层直接关联触发元素，并通过 position-try 配置靠近视口边缘时的回退位置。316 收藏 -
前端显示业务时间时，应保留后端时间点并显式传入用户IANA时区。本文给出Intl.DateTimeFormat复用写法、resolvedOptions检查和无偏移字符串处理边界。363 收藏 -
多列卡片的标题和正文长度不同会让按钮上下错位。本文用 CSS subgrid 继承父网格行轨道，对齐嵌套卡片的标题、内容和操作区域，并给出 gap、响应式和兼容降级方案。426 收藏 -
Service Worker 更新时不要直接覆盖旧缓存。本文用版本化缓存、activate 清理和接管策略，拆解新资源先落地、旧资源再删除的可靠流程。490 收藏 -
WebSocket 客户端不能只在 close 事件里 new 一个连接。本文从连接代次、指数退避、messageId/seq 去重和待发送队列出发，给出一套能控制重复副作用的浏览器端设计，并说明客户端去重与服务端幂等的边界。171 收藏 -
用 View Transitions API 把列表卡片与详情页的关键元素连接起来，掌握 view-transition-name 的唯一性、路由更新封装、能力回退和减少动效处理。305 收藏 -
CSS :has() 可以根据子元素或后续兄弟的状态设置父级样式，但要同时处理浏览器回退、特异性和 DOM 检查范围。本文用表单卡片场景给出可直接采用的写法。252 收藏 -
用 container-type: inline-size 建立卡片查询容器，再通过 @container 和 container-name 按组件自身宽度切换单列与并排布局，覆盖嵌套容器、回退样式和验收边界。367 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage TypedArray 结构化克隆 Web Worker Transferable
Web Worker通过postMessage传递大数组时，默认结构化克隆会复制数据。本文用TypedArray加Transferable转移底层ArrayBuffer，说明发送端detached边界、Worker侧重建视图、结果回传和何时不该转移。140 收藏 -
IndexedDB事务会随事件循环在 active、inactive 和 finished 状态间切换。本文从 TransactionInactiveError 和写入时序异常出发，说明如何把外部异步等待移到事务前，并用短事务、请求回调与 complete/abort 处理可靠读写。176 收藏 -
前端搜索框快速输入时，旧请求可能晚于新请求返回并覆盖结果。本文用 AbortController 取消无效请求，再用请求序号保护结果提交，给出异常处理、signal 复用和 debounce 的边界方案。242 收藏 -
通过 Fetch API 消费 Response.body 的 ReadableStream，按字节累计下载量并同步更新界面；同时处理 Content-Length 缺失、取消请求、网络异常和 Blob URL 释放，避免进度条失真或资源泄漏。359 收藏 -
围绕 localStorage 配额异常，说明同步写入的失败边界、异常捕获、内存降级和迁移 IndexedDB 的判断方法。308 收藏 -
用 CSS :focus-visible 区分键盘导航与鼠标点击的焦点表现，保留可访问的焦点提示，补齐自定义组件、脚本聚焦和高对比检查边界。143 收藏