博客

Proxy代理改了对象，结果Vue响应式失效了？ 今天下午三点十七分，我一边喝着第三杯速溶咖啡，一边盯着控制台里那个死活不更新的页面发呆——明明数据变了，视图就是不重渲染。最后发现是 Proxy 搞的...

谁更灵活？谁更省事？ 我最近又在搞一个移动端卡片拖拽排序功能，需求看着简单：手指按住卡片、上下拖动、松手后自动吸附到最近位置。结果一上手就发现——touch事件比想象中坑得多。iOS卡顿、Androi...

项目初期的技术选型 去年接了个内部运营后台，需求看着挺简单：一个可拖拽排序的卡片列表 + 每张卡片里嵌了第三方可视化组件（用的是 ECharts）。但客户提了个死要求——“拖拽必须丝滑，不能卡顿，iO...

codegen 生成的 TypeScript 类型里，optional 字段全没了？ 今天上线前跑了一遍 codegen，结果发现接口返回的 user?.profile?.avatarUrl 在 TS...

优化前：卡得不行 去年下半年接手一个老项目，是个基于 Vue 2 的后台管理页，客户用 iPad Pro（第5代）跑，点按钮要等半秒才响应。不是“稍微慢”，是真·点完看着屏幕发呆：“我点了没？再点一下...

先看效果，再看代码 搜索框输几个字就疯狂调接口？用户还没打完“苹果手机”，你已经发了5次请求，后端日志炸了，自己还一脸懵——别急，这事儿我上周刚干过。不是后端扛不住，是我前端没防抖。 防抖（debou...

我的写法，亲测靠谱 国际化（i18n）这事，我前后搞过四五个项目，从 Vue 2 的 vue-i18n@8.x 到 Vue 3 的 @intlify/core，再到 React 的 react-int...

先看效果，再看代码 上周上线一个数据流实时渲染的仪表盘，后端每秒推 30 条 JSON 数据过来，前端要逐条解析、计算、更新图表。结果一跑起来，CPU 占用直接飙到 95%，页面卡成 PPT，滚动都掉...

我的写法，亲测靠谱 Treemap 我用过三回，两回在数据看板项目里，一次在内部监控系统。第一次是照着 D3 官方例子抄的，结果上线后用户一缩放浏览器，颜色块全乱了；第二次改用 ECharts，但发现...

我的写法，亲测靠谱 11ty 真的很轻，但轻得让人容易忽略它“不帮你兜底”的本质。我用它搭过三个静态博客、两个文档站、一个公司内部知识库，每次上线前都要花半天修 path 和 permalink 的坑...

又踩坑了，iframe里fetch被CSP拦得死死的 今天上线前测预发环境，突然发现一个页面的用户头像死活加载不出来。控制台清一色报错：Refused to connect to 'https://j...

核心代码就这几行，但得先搞懂它到底在干啥 我第一次用 IntersectionObserver 是为了做图片懒加载，结果写了半天发现滚动时图片根本不动——不是没触发，是触发了但 observer 把元...

先看效果，再看代码 我上周给一个数据看板加了个 3D 地球仪，需求就一句：“能转、能点、能显示热点城市”。没说用 Three.js，但打开 Figma 稿子一看——带光照、带纹理、带 hover 缩放...

项目初期的技术选型 去年下半年接手一个电商导购页的性能优化任务，页面本身不复杂：首屏是商品瀑布流 + 底部几个跳转到合作平台的 CTA 按钮。但用户反馈“点按钮后要等好几秒才跳出去”，测下来平均首跳延...

又踩坑了，touchmove滚动失效 今天上线前测 iOS 版，发现列表页死活不滚动——手指按住拖动，页面纹丝不动。安卓一切正常，iOS 上连个 scroll 事件都不触发。我第一反应是：又来了，Co...

谁更灵活？谁更省事？ 我去年在做一个后台管理系统的前端重构时，被错误追踪这事整得挺崩溃的。不是没加监控——我们一开始用了 Sentry，配好了，也上报了，但上线后发现：真实用户遇到的白屏、卡死、API...

先看效果，再看代码 上周上线一个后台表格页，要求左侧固定菜单栏、顶部固定操作栏、中间是可滚动的数据区——典型三明治布局。我第一反应：上 flex 布局 + overflow-y: auto，结果发现滚...

项目初期的技术选型 去年下半年接手一个老项目重构，是个内部用的设备监控平台。Vue 2.6 + Webpack 4 的老底子，之前状态全靠 props / events + 全局 event bus ...

先看效果，再看代码 上周上线一个数据看板，用 Chart.js 画折线图。结果 iOS Safari 上图表空白，控制台没报错，DevTools 里 canvas 尺寸是 0×0——折腾了俩小时，最后...

我的写法，亲测靠谱 Volume卷（这里指前端音频/视频元素的 volume 控制逻辑，不是 Docker Volume 或 Node.js 的 fs.Volume）——听起来简单，但真在项目里调一遍...