前端技术文章
-
本文围绕后台通知、订单状态、协作消息等场景，对比短轮询、SSE 和 WebSocket 的连接成本、实时性、方向能力和降级方式，给出可落地的选择规则。498 收藏 -
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。491 收藏 -
文章 · 前端 | 3星期前 | 前端 · 缓存 · Service Worker · 白屏 · 发布故障 · 缓存策略 前端白屏 Service Worker CacheStorage 资源404 发布回滚
复盘一次前端发布后部分用户白屏的问题：旧 Service Worker 返回旧 index.html，页面继续请求已删除的哈希 JS，最终触发资源 404。文章给出排查证据、修复动作和防复发清单。469 收藏 -
文章 · 前端 | 3星期前 | 前端 · javascript · AbortController · 表单提交 · AbortController 旧响应覆盖 前端重复提交 loading锁 fetch取消 按钮防抖
用一个可复制的前端配方解决按钮重复提交：解释连续点击为什么会造成旧响应覆盖新状态，并用 loading 锁、AbortController、最新序号和 finally 恢复按钮状态。442 收藏 -
按业务流量、部署约束、方案对比、推荐架构、风险点和落地清单，梳理前端静态资源上云时对象存储、CDN 和容器服务的选择方法。433 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · css · Core Web Vitals · 渲染性能 · 前端 渲染性能 CSS性能 CLS content-visibility contain-intrinsic-size Layout
从长页面首屏慢、滚动卡和 Layout 时间高的现象入手，讲清 content-visibility:auto 如何跳过离屏区块，为什么要配 contain-intrinsic-size，并给出 DevTools 复查和上线检查清单。430 收藏 -
文章 · 前端 | 3天前 | 前端 · 性能优化 · javascript · 浏览器性能 · PerformanceObserver · JSON解析 PerformanceObserver 浏览器性能 Long Task 主线程卡顿
页面偶发点击无响应，先别急着把锅甩给网络。本文用 PerformanceObserver 记录 50ms 以上长任务，结合 Chrome Performance 面板定位 JSON.parse 和同步渲染造成的主线程阻塞，再用分片处理和 requestIdleCallback 做可验证的修复。421 收藏 -
本文用读者问答方式说明后台表格列设置刷新后丢失的处理方案：把可见列、列宽、列顺序保存成带版本的用户偏好，读取时过滤已删除字段，合并默认列，并提供重置和清理策略。351 收藏 -
文章 · 前端 | 2星期前 | 前端 · vite · 运维手册 · 白屏排查 · CDN缓存 · 发布回滚 · React 前端 白屏 vite CDN缓存 index.html 发布回滚 JS 404
Vite 或 React 前端发布后突然白屏，常见原因是 index.html 与带 hash 的 JS/CSS 产物不一致，CDN 或浏览器还命中了旧缓存。处理时先确认控制台和 Network 里的 JS 404，再回滚 HTML、清理 CDN、保留最近构建产物，并补上发布前后的检测与告警。342 收藏 -
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。339 收藏 -
本文从前端调用方视角说明批量导出接口的设计取舍：为什么大文件导出不建议同步下载，如何拆成创建任务、查询状态、获取下载链接，并给出参数、错误码和兼容策略。296 收藏 -
面向前端接口超时告警的运行手册，覆盖触发信号、Network 瀑布图快速判断、前端超时策略、接口分层定位、临时降级、版本回滚、告警确认和复盘清单。287 收藏 -
文章 · 前端 | 4天前 | 前端 · Cookie · cors · 自动化测试 · playwright · 前端 cookie cors Playwright SameSite 登录态 跨域测试
登录接口返回成功不等于登录态可用。本文用 Playwright 把 Cookie 保存、跨域请求凭证、CORS 响应头和 SameSite 边界写进一组可重复运行的浏览器回归测试，并给出失败定位与上线检查方法。285 收藏 -
从长列表全量 DOM 的主线程等待链讲起，说明虚拟列表如何通过可见窗口、节点复用和占位高度降低 Layout/Paint 压力，并给出最小实现与上线检查。260 收藏 -
从 Vite 7 升级到 Vite 8 时，先核对浏览器目标和旧配置，再分别检查 Rolldown、Oxc 与 CommonJS 导入边界，最后用构建产物和关键页面完成回归。248 收藏