博客

先看效果，再看代码 最近项目里要做一个侧边栏菜单，一开始我直接用原生 HTML + CSS 搞了个静态的，结果产品经理说“能不能加个展开收起”“能不能支持多级嵌套”“能不能记住上次打开的项”。行吧，那...

优化前：卡得不行 上周上线一个新功能，用户反馈页面打开后“转圈圈转了5秒”，甚至有些低端机直接卡死。我本地跑起来也明显感觉不对劲——点一下按钮，等半秒才有反应，滚动列表的时候掉帧严重。查了下 Perf...

又踩坑了，npm install 之后项目被悄悄植入后门 上周五下午，我正准备上线一个新功能，本地跑 npm install 装完依赖，顺手点了个构建，结果 CI 报错说打包体积暴涨了 300KB。我...

直接上代码，这才是 CSP frame-ancestors 的正确打开方式 上周上线一个内嵌页面，被安全团队卡住了：「你们这个页面能被任意网站 iframe 嵌入，有点击劫持风险，必须加 frame-...

我的写法，亲测靠谱 用 Recoil 一年多，踩过不少坑，也摸索出一套自己觉得还算稳的写法。Recoil 的核心思想是原子化状态管理，但很多人一上来就滥用 atom，结果项目越做越乱。我现在的做法是：...

先看效果，再看代码 上周做数据对比功能，客户要的是“一眼看出两个版本的差异”，不是那种表格里标红绿色的弱鸡方案。我一开始也想用现成的 diff 库，结果发现要么太重，要么不支持自定义样式，最后干脆自己...

树形组件展开后滚动位置错乱，折腾半天才搞定 上周在搞一个权限管理页面，用到了树形结构展示角色和菜单的关联关系。本来以为直接套个现成的 Tree 组件就完事了，结果用户反馈：点开某个深层级节点后，页面自...

先看效果，再看代码 最近在做一个文件管理器的交互优化，产品经理说：“双击打开文件夹，单击选中，这个很基础吧？” 我心想：不就是个 dblclick 事件嘛，能有多难？结果一上手就发现坑比想象中多。今天...

核心代码就这几行，但别急着复制 上周重构一个移动端商品详情页，需要实现一个带 sticky 效果的滚动区域。一开始我直接用原生 overflow-y: scroll，结果在 iOS 上卡成 PPT，手...

又踩坑了，CSS动画卡成PPT 上周改一个商品详情页的轮播图，加了个淡入淡出的过渡效果，结果在安卓机上一跑，直接卡成幻灯片。手指滑一下，画面愣是半秒后才动，用户肯定以为页面崩了。我一开始以为是 JS ...

又踩坑了，真机上滚动卡成PPT 上周改一个移动端的弹窗组件，本地 Chrome DevTools 里跑得飞起，手势滑动、滚动都丝滑得很。结果一丢到 iPhone 上真机测试，直接卡成幻灯片——手指划一...

先看效果，再看代码 上周上线一个用户评论功能，结果 QA 一测就炸了：有人在评论里贴了段 <script>alert(1)</script>，页面直接弹窗。我赶紧翻了下代码，发...

FCP 优化，我为啥越来越不爱用 SSR 了？ 最近又在折腾一个新项目，首页加载速度被老板盯上了，说用户流失率高。我一查 Lighthouse，FCP（First Contentful Paint）卡...

优化前：卡得不行 上个月我接了个上传大文件的需求，用户要能上传几百 MB 的视频。一开始没当回事，直接用 FileReader 读整个文件，再转成 base64 丢给后端。结果本地测试时，100MB ...

优化前：卡得不行 上个月我们上线了一个内嵌在 App 里的 WebView 页面，结果用户反馈“点开就转圈，半天打不开”。我本地测的时候也确实慢得离谱——首次加载要 5 秒多，弱网下直接超时。更糟的是...

我的抓包调试姿势，亲测靠谱 干前端这些年，抓包调试是我每天都要打交道的活儿。别看它基础，真要高效用起来，踩过的坑能填满一个泳池。我一开始也以为装个 Charles 或 Fiddler 就完事了，结果在...

优化前：卡得不行 上个月接手一个老项目，前端页面加载动不动就5秒起步，用户反馈“点一下等半天”。我一开始以为是前端打包问题，结果排查一圈发现，真正卡住的是后端 API 响应——但奇怪的是，本地直连后端...

核心代码就这几行，但别急着复制 我写过好几个项目都用到懒加载，最开始是自己手搓 Intersection Observer，后来发现直接用现成的库更省事。但不管用哪种方式，核心逻辑其实就那几行。先看一...

优化前：卡得不行 上个月上线 Apple Pay 支付功能时，我差点被用户反馈砸死。不是支付失败，而是点开支付按钮后整个页面卡住 3～5 秒，手指滑动完全没反应。iOS 用户尤其明显——Safari ...

又踩坑了，CSP 的 default-src 让我静态资源全挂了 上周上线一个新项目，本地跑得好好的，一部署到测试环境，页面直接白屏。F12 一看，控制台全是红的：Refused to load th...