博客

优化前：卡得不行 上周上线新版本后，产品跑来问：“为啥点导航菜单要等半天才进页面？我点完还得等一下，像在按电梯按钮。”我当场打开 DevTools 录了个 Performance，一看——路由跳转时主...

优化前：卡得不行 去年底把公司三个前端项目（一个内部管理后台、一个客户侧 SaaS 前台、一个独立的 UI 组件库）合并进一个 Turborepo 仓库，本想着“一套工具链管到底”，结果 CI/CD ...

HMR改完代码不刷新？我折腾了大半天才搞明白是 Webpack 模块缓存没清干净 今天下午三点，我正改一个组件的 props 类型校验，改完保存——页面纹丝不动。F5 刷新一下？行。但 HMR 就是不...

又踩坑了，AudioContext在iOS上一碰就挂 今天上线前最后测音频可视化，结果 iOS 上点一下播放按钮——直接白屏。控制台没报错，页面静默死亡。Chrome 里跑得好好的，Safari 里连...

项目初期的技术选型 去年年底接手一个内部协作平台，类似轻量版的飞书+钉钉混合体。核心需求之一是「实时显示同事在线状态」——不是那种“最后活跃时间”，而是真·在线/离线，带心跳检测和状态同步。产品经理说...

优化前：卡得不行 项目上线前压测，客户现场反馈：“拖个列表，手指都抬起来了，item还在半路飘着”。我本地一试——50条数据，Chrome DevTools 里 FPS 直接掉到 8fps，touch...

又踩坑了，Select下拉菜单在iOS上点不中 今天上线前测到一个诡异问题：我们自研的 Select 组件，在 iOS Safari 里点开下拉后，选项列表明明渲染出来了，但点任何一项都没反应——既不...

项目初期的技术选型 去年下半年在做一个纯前端的移动端活动页，需求很典型：左右滑动切换卡片、上拉加载更多、下拉刷新、中间区域支持 pinch-zoom（双指缩放）、顶部固定导航栏要随滚动隐藏/显示。整个...

项目初期的技术选型 去年下半年接手一个内部审计系统，核心需求是：用户上传的敏感文档（PDF、Excel）必须在浏览器端完成加密后再发到后端。不是简单加个密码保护，而是要实现「用户A上传的文件，只有用户...

又踩坑了，touchmove滚动失效 今天上线前测一个横向拖拽组件，结果在 iOS Safari 上死活不响应 touchmove —— 不是卡住，是压根没触发。我第一反应是：JS 报错了？赶紧打开 ...

优化前：卡得不行 上周上线了个新活动页，用 Vue 3 + Vite 搭的，页面结构也不复杂：顶部 Banner、三组商品卡片、底部一个表单。结果一上线，运营同事直接微信轰炸我——“点不动”“滑两下就...

谁更灵活？谁更省事？Persistent Cookie 的三种实战方案对比 我最近在重构一个老项目的身份认证模块，后端坚持用 Session + Persistent Cookie 做登录态维持，前端...

先看效果，再看代码 上周上线一个新活动页，PM跑来问我：「为啥LCP老是1.8秒？竞品才0.6」。我打开Chrome DevTools Performance面板一瞅，主图加载完都快2秒了——还是个2...

我的写法，亲测靠谱 性能监控这事，我干了快五年，从最早手动打点 console.time，到后来用 PerformanceObserver 监听 paint、load、navigation，再到现在搭...

我的写法，亲测靠谱 Vant 用得多了，我基本不看官方文档的“快速上手”章节了——因为那套默认 import 全量组件的方式，在真实项目里跑两轮打包分析就直接被我干掉了。我现在的标准操作是：按需引入 ...

真机调试，我到底该信谁？ 写这篇文章之前，刚在地铁上用 iPhone 连着 Mac 调试一个 Vue H5 页面，结果 Safari Web Inspector 卡死三次，最后靠 console.lo...

优化前：卡得不行 上周上线了个新功能——引导说明（onboarding walkthrough），就是那种用户首次进入页面时，高亮某个按钮、弹个小气泡、带箭头指向、点击下一步的交互。本来以为就几行 C...

谁更灵活？谁更省事？ 我做响应式组件快六年了，从最早手写媒体查询+JS监听 resize，到后来用 Bootstrap 栅格、Tailwind 的断点类，再到最近几个项目里试水 CSS Contain...

我的写法，亲测靠谱 Props 设计这事，我干了快六年，从 Vue 2 到 Vue 3，再到 React 18 + TS，踩过的坑比组件还多。最开始我真以为 props 就是“传个值”，结果上线后被产...

又踩坑了，Table里嵌套滚动区域 touchmove 失效 今天上线前测到一个诡异问题：Table组件里某列渲染了一个自定义的「标签选择器」，里面用了横向滚动容器（overflow-x: auto）...