前端技术文章
-
长段落最后只剩几个字时，CSS text-wrap-style: pretty 可以让浏览器优先减少孤行，但它比普通换行更耗计算。本文从标题、正文和 contenteditable 三种场景拆开 pretty 与 balance 的边界，并给出兼容写法与检查方法。309 收藏 -
SPA 局部导航请求失败时，先保留旧内容，再把错误、重试和兼容回退收进同一条验收流程。文章用 Navigation API 的 navigateerror、intercept() 和能力检测说明如何避免空白页与重复重试。308 收藏 -
用 adoptedStyleSheets 把同一份构造样式表复用到多个 ShadowRoot，重点核对 CSSStyleSheet 构造时机、跨文档限制、动态更新与不支持浏览器的 style 回退。307 收藏 -
文章 · 前端 | 1星期前 | 浏览器 · javascript · css · 前端交互 · 前端交互 关闭动画 @starting-style transition-behavior Popover API
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏 -
同一张商品卡片放进主栏、侧栏和弹窗后，不该继续按浏览器窗口宽度硬切布局。用 CSS 容器查询让组件根据自己的可用宽度切换网格、字号和按钮排列，并补上不支持时的降级写法。302 收藏 -
TypeScript 项目的性能优化涉及编译速度、运行时性能和代码体积等多个方面。 本教程介绍常见的性能优化技巧，帮助构建更高效的 TypeScript 应用。 TypeScript 性能优化维度 编译速度 增量构建 | skipLibCheck 运行时性能 类型推断 | 避免 any 包体积 Tr302 收藏 -
文章 · 前端 | 1个月前 | 表格 · 前端 · 性能优化 · javascript · ResizeObserver · ResizeObserver ResizeObserver loop completed 表格自适应列宽 前端防抖 ResizeObserverEntry
表格列宽跟随容器变化时，ResizeObserver 回调里直接改尺寸，容易让观察回调再次触发，最终出现 ResizeObserver loop completed with undelivered notifications。本文比较同步改宽、requestAnimationFrame 合并和断点缓存三种方案，给出一个可复查的表格列宽实现。301 收藏 -
本文从前端调用方视角说明批量导出接口的设计取舍：为什么大文件导出不建议同步下载，如何拆成创建任务、查询状态、获取下载链接，并给出参数、错误码和兼容策略。296 收藏 -
拖拽排序松手后顺序回跳，通常不是 CSS 问题，而是指针位置、占位元素和最终数组没有在同一个时序里更新。本文用 Pointer Events、占位节点和单一提交点拆解竞态，并给出可复核的实现与验收方法。296 收藏 -
CSS @function 可以把带参数的样式逻辑收进原生 CSS。本文用 result 覆盖规则、参数与局部变量作用域、类型约束和 @supports 降级，判断它是否适合进入前端项目。296 收藏 -
本文用搜索框快速输入后结果倒退的现象入手，逐步复现旧响应覆盖新结果的问题，并用 AbortController 取消旧请求、请求序号只认最新响应，保证前端列表状态稳定。295 收藏 -
文章 · 前端 | 6天前 | 前端 · dom · javascript · css · 浏览器API · Element.checkVisibility visibilityProperty opacityProperty contentVisibilityAuto 前端可见性
Element.checkVisibility() 能判断元素是否有布局盒、是否被 display:none 或 content-visibility:hidden 跳过渲染；通过 opacityProperty、visibilityProperty 和 contentVisibilityAuto 可以收紧判断，但 true 仍不等于元素真的出现在视口中。292 收藏 -
SPA 同时处理链接点击、后退和表单跳转时，History API 很容易漏掉边界。用 Navigation API 统一接管导航事件，再配合失败恢复和兼容回退，可以把加载、滚动、焦点和错误状态收进一条可验收的流程。291 收藏 -
Fetch API 适合现代上传请求，但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程，说明何时选择 XMLHttpRequest、如何显示进度，以及取消、失败和重复提交怎么验收。290 收藏 -
文章 · 前端 | 1星期前 | javascript · 前端开发 · Web Animations API · 浏览器动画 · reverse currentTime playbackRate Web Animations API cancel
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏