交互

协同编辑光标乱跳？我差点被 OT 算法整崩溃 上周做个多用户实时文档编辑功能，本来以为用个现成的库就完事了，结果一上线测试，光标位置各种乱跳，删着删着别人的字没了，自己打的字跑到别人段落里……简直灾难...

优化前：卡得不行 上周上线一个带大量卡片点击交互的活动页，用户反馈“点一下卡半天”“点完没反应以为坏了”。我本地测试也明显感觉到——页面渲染完后，第一次点击响应要等将近1秒，后面好点但还是有明显延迟。...

为什么我要折腾 CKEditor 的不同方案？ 最近一个项目要给后台加个富文本编辑器，需求不算复杂：支持基础格式、图片上传、代码块，最好还能自定义按钮。老板说“别搞太重”，但产品经理又想要“类似 No...

列表滚动卡成PPT？缓存没做对 上周改一个商品列表页，用户反馈“滑动像在翻PPT”，一屏一卡。我本地跑起来也确实，手指一划，画面停顿半秒才跟上——典型的滚动性能问题。第一反应：是不是没做虚拟滚动？但仔...

为什么我又在 Better Scroll 里折腾了三天？ 上周我接了个需求：一个带下拉刷新、上拉加载、横向滚动 tab 的移动端列表页。UI 给的原型里，交互细节特别多，比如“下拉到 80px 才触发...

双击事件在移动端失效？折腾半天发现是冒泡惹的祸 上周改一个老项目，产品说“列表项要支持双击点赞”，听起来很简单对吧？结果我写完 PC 端测试没问题，一上手机就完全没反应。点两下跟点一下效果一样，根本识...

我的写法，亲测靠谱 做前端这么多年，进度提示这玩意儿看着简单，真到项目里一上手，坑多得能埋人。我一开始也图省事，直接套个现成的 UI 库组件，结果用户反馈“卡死了”“没反应”，查半天才发现是进度逻辑没...

项目初期的技术选型 上个月在做一个后台管理系统的重构，里面有个需求：用户操作某些高危动作（比如删除数据、停用账号）时，得弹个警告提示，确认一下。本来以为就是个简单的 confirm 框，但产品经理说“...

我的写法，亲测靠谱 搞前端这么多年，组件树这东西说简单也简单，说复杂也复杂。特别是在大型项目里，组件嵌套一深，状态一乱，调试起来简直想砸键盘。我一开始也是随便写，父传子、子调父，props 满天飞，e...

优化前：卡得不行 上个月接手一个老项目，首页有个“锚点导航”功能，点击侧边栏的链接会平滑滚动到对应区块。听起来很基础对吧？但实际体验——简直灾难。我用 iPhone 12 测试，手指一碰链接，页面卡顿...

Plotly 图表在移动端拖拽缩放失效，折腾半天才找到原因 上周在做一个数据看板项目，用 Plotly.js 渲染几个关键指标的趋势图。本地开发时一切正常，鼠标拖拽、滚轮缩放都好使。结果一上真机测试，...

又踩坑了，FormData 上传文件居然没带上字段 上周做后台表单提交，带文件上传那种，前端用 FormData 拼数据发给后端。结果后端同事一脸懵：“文件收到了，但其他字段全空。” 我当时就纳闷了，...

优化前：卡得不行 上周上线一个移动端商品列表页，用户反馈“一滑就卡”“手指动了页面半天不动”。我本地测试也确实离谱——低端机上滑动直接掉到10帧以下，高端机勉强能看但也不流畅。查了下代码，发现每次 t...

我的写法，亲测靠谱 Hover效果看似简单，但真正在项目里用起来，坑多到你怀疑人生。我一开始也以为加个:hover就完事了，结果在移动端、低配设备、复杂布局下各种翻车。折腾了好几个项目后，现在基本形成...

导入导出这事儿，真没你想的那么简单 最近项目里又碰到了 Excel 导入导出的需求，说实话，每次做这种功能我都头大。不是技术难，而是方案太多，选哪个都得权衡半天。客户说“导出个表格很简单吧”，我只能苦...

动画卡顿到怀疑人生，原来是 anime.js 的 timeline 用错了 上周在做一个产品页的交互动画，用 anime.js 做一个分步入场的效果。本来以为就是简单地串几个动画，结果页面一跑起来，动...

我的写法，亲测靠谱 做 P2P 通信这几年，我踩过不少坑，也总结出一套自己用起来最顺手的写法。WebRTC 看似简单，但真要跑通、稳定、兼容性好，细节特别多。下面这个基础连接流程，是我目前项目里最常用...

3D地图上点不准？我差点把鼠标摔了 上周做个项目，要在 3D 地图上点选某个区域高亮，结果手指（或者鼠标）点哪儿都不对。明明点在建筑上，结果触发的是隔壁街区的事件。调试一整天，越调越懵，最后发现是坐标...

为什么选 Three.js？因为老板说要“炫一点” 上个月接了个活，给一个产品页加个3D展示模块。客户没给具体需求，就一句话：“要有点科技感，能转的那种”。我一听就知道逃不掉了——得上 Three.j...

先看效果，再看代码 最近项目里要快速搭一个后台配置页，产品经理说“能不能让用户自己拖拽生成表单”，我第一反应是：又来？但这次我不想手写一堆动态渲染逻辑了，直接上 Low Code 方案。折腾了两天，亲...