博客

优化前：卡得不行 上周改一个商品详情页的入场动画，本来以为就是个简单的 fade-in + slide-up，结果一上线用户反馈“页面卡成 PPT”。我本地测试还好，但用低端安卓机一跑，帧率直接掉到 ...

优化前：卡得不行 上周我接手了一个老后台系统的表单重构，一打开页面我就想砸键盘——一个带 30+ 字段的动态表单，每次输入框 focus、blur 或者切换选项卡，整个页面直接卡住 1-2 秒。用户反...

优化前：卡得不行 上个月接手一个老项目，首页加载时间动不动就5秒往上飙，用户反馈“点进去以为页面挂了”。我本地跑起来也是一言难尽——白屏时间长，JS bundle 超过 3MB，首屏关键资源全塞在一个...

又踩坑了，多点触控手势识别乱成一锅粥 上周在搞一个画板功能，用户要在手机上用两个手指缩放、旋转画布。听起来挺简单的对吧？结果 touchstart、touchmove、touchend 一套下来，手指...

useMemo 用错了，组件疯狂重渲染 上周改一个数据看板页面，列表里每行要显示一堆计算后的指标，比如转化率、环比、同比这些。我一开始图省事，直接在组件里写了一堆计算逻辑，结果一滚动就卡得不行。打开 ...

又踩坑了，事件解绑没生效 昨天在搞一个弹窗组件，用户点“关闭”按钮要移除绑定的键盘事件（比如按 ESC 关闭），结果死活解不掉。我明明写了 removeEventListener，但每次按 ESC 弹...

我的写法，亲测靠谱 在移动端项目里用 Codegen（比如 Apollo Codegen、GraphQL Codegen 这类），我一开始图快，直接按文档跑个命令生成一堆 TypeScript 类型和...

我的写法，亲测靠谱 说实话，我一开始用 npx 就是图个方便，想临时跑个工具又不想全局安装。但踩了几次坑之后，才意识到这玩意儿用不好反而更麻烦。现在我基本固定了一套写法，稳定、清晰、不容易出错。 最常...

优化前：卡得不行 上周改一个列表页，数据量不大，也就几千条，但前端一次性全拉回来渲染，页面直接卡成PPT。滚动一下要等半秒，点个按钮半天没反应，连Chrome DevTools都差点打不开。用户反馈“...

又踩了个坑：Tree Shaking 不生效，原来是 sideEffects 没配对 前几天打包项目，发现一个奇怪的问题：明明只用了某个工具库里的一个函数，结果整个库都被打包进去了。我用的是 Webp...

优化前：卡得不行 上个月上线一个新功能，用户反馈“点一下要等好几秒”，我一开始以为是后端慢，结果自己本地试了下，发现每次刷新页面或者切换路由，前端都要卡 3~5 秒——这哪能忍？ 查了下，问题出在 T...

先上手再说，GraphQL 真没那么玄 我第一次接触 GraphQL 时，还以为又是个包装 REST 的花架子。结果项目一上手，发现它真能省不少事——尤其是前端要的数据结构变来变去的时候。别被那些“声...

项目初期的技术选型 上个月接了个后台管理系统的活，UI 框架用的是 Ant Design，菜单这块自然就用了 Menu 组件。说实话，一开始觉得这不就是个现成的组件嘛，配置几个路由、加点图标，搞定收工...

优化前：卡得不行 上周上线一个新功能，用户反馈“页面一滑就卡死”“点按钮半天没反应”。我本地跑起来一看，好家伙，列表页加载完后，随便滚动两下，FPS直接掉到10以下，DevTools 里 Perfor...

又踩坑了，前端做数据聚合差点把浏览器干崩 上周搞一个数据看板，后端甩过来一堆原始日志，说“前端自己聚合下吧，量不大”。我信了，结果一拉数据——好家伙，12万条 JSON 记录，每条还带几十个字段。本地...

导入导出这事儿，我折腾过好几轮 做前端这几年，但凡碰上数据管理类的项目，十有八九要搞导入导出。用户总想把表格数据导成 Excel，或者从本地 Excel 上传一批数据进来。刚开始我都是现查现用，后来发...

本地开发调接口又报 CORS 错了，这次真不是后端的锅 今天本地跑一个新项目，前端用 Vite，后端 API 部署在测试环境。一调接口就报错： Access to fetch at 'https://...

项目初期的技术选型 去年底接手一个中后台管理系统重构，前端技术栈要从老旧的 jQuery + 自研状态管理迁移到现代框架。团队里有人推 NgRx，有人想用 Redux Toolkit，但考虑到项目规模...

我的写法，亲测靠谱 在做加载状态、骨架屏或者提示弹窗这类交互时，我经常遇到一个坑：内容加载太快，用户根本没看清提示就消失了。反过来，如果加载慢，又不能卡太久不让走。这时候就得用“最小展示时间”来平衡体...

为啥要折腾微信支付的方案？ 做移动端项目，尤其是 H5 商城类应用，绕不开微信支付。但微信官方文档写得有点“绕”，不同场景下能用的接入方式还不一样，搞得我每次新项目都得重新翻文档、查历史代码。折腾多了...