前端技术文章
-
用一个 10 万条数据的列表场景讲清楚前端虚拟列表的核心思路：不一次性渲染全部 DOM，而是根据 scrollTop 计算可视窗口，只保留屏幕附近的行。352 收藏 -
本文介绍如何在使用 Zod 搭配 Validator.js 进行表单验证时，正确支持可选字段的空字符串（""）输入，避免 .refine 校验因 isAlpha("") 返回 false 而意外拒绝合法空值。 本文介绍如何在使用 Zod 搭配 Validator.js 进行表单验证时，正确支持可选字352 收藏 -
本文用读者问答方式说明后台表格列设置刷新后丢失的处理方案：把可见列、列宽、列顺序保存成带版本的用户偏好，读取时过滤已删除字段，合并默认列，并提供重置和清理策略。351 收藏 -
拖拽排序跳回原位，通常不是 CSS 位置算错，而是指针事件丢失、视觉顺序没有同步 DOM 顺序，或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏 -
弹窗被导航、地图、页脚或抽屉遮住时，单纯调大 z-index 往往治标不治本。本文按完整工作流拆解层级现场、stacking context 定位、层级表设计、Portal 容器落地和回归验证。350 收藏 -
用 CSS Anchor Positioning 给提示气泡和筛选浮层建立稳定锚点，结合 position-try 回退与 position-visibility 处理视口边缘、滚动和旧浏览器兼容。349 收藏 -
异步函数（如 async 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需通过 await（在 async 上下文中）或 .then()（在同步上下文中）获取最终结果。 异步函数（如 `async` 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需349 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端 筛选条件 列表页 history.replaceState URLSearchParams 刷新还原
列表页筛选后刷新又回到默认结果，通常不是接口错了，而是筛选状态只存在内存里。本文从复现现象开始，逐步验证状态来源、URL 参数和刷新还原流程，整理一套稳定写法。348 收藏 -
通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 和 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的平衡。 通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 `` 和 `` 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的347 收藏 -
文章 · 前端 | 1星期前 | 前端 · javascript · 登录态 · 浏览器API · Cookie Store API cookieStore 登录态变化 CookieChangeEvent 前端降级
页面登录态变化后，多个组件经常要各自轮询 Cookie 或等待下一次刷新。Cookie Store API 提供异步读取和 change 事件，可以把登录失效、退出登录与界面刷新串成一条可复查的链路；本文同时说明 HTTPS、替换同名 Cookie 和旧浏览器降级边界。346 收藏 -
从一个面板尺寸越改越抖的实际场景出发，定位 ResizeObserver 反复触发的回路，区分布局读取与写入边界，并用稳定尺寸和帧内合并完成验证。346 收藏 -
文章 · 前端 | 1个月前 | 前端 · vite · 运维手册 · 白屏排查 · CDN缓存 · 发布回滚 · React 前端 白屏 vite CDN缓存 index.html 发布回滚 JS 404
Vite 或 React 前端发布后突然白屏，常见原因是 index.html 与带 hash 的 JS/CSS 产物不一致，CDN 或浏览器还命中了旧缓存。处理时先确认控制台和 Network 里的 JS 404，再回滚 HTML、清理 CDN、保留最近构建产物，并补上发布前后的检测与告警。342 收藏 -
这是 TypeScript 14 年来最大的一次变革。不是语法变了，不是 API 变了——是编译器本身被换掉了。一、125 秒 → 10 秒，这 10 倍速从哪来的？先看一组数据。2026 年 7 月 9 日，微软正式发布 TypeScript 7.0。官方博客放出了一组基准测试：代码库代码量TS340 收藏 -
CSS :has() 让父元素可以根据子元素状态切换样式，适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏 -
用浏览器原生 Popover API 做一个键盘可用的操作菜单，覆盖 popovertarget、自动关闭、焦点回收、toggle 事件和不支持浏览器的降级方案。340 收藏