博客

又翻车了，transition动画卡成PPT 今天上线前最后测一遍动效，结果在安卓低端机上直接裂开——一个简单的展开收起 transition 动画，愣是卡出了幻灯片切换的效果。我寻思这都 2024 ...

又出问题了，页面卡成PPT 今天上线前做最后的性能检查，Lighthouse一跑，直接给我整不会了——强制重排阻塞主线程 3.2 秒。啥概念？用户点个按钮，页面直接卡住三秒没反应，这谁顶得住。更离谱的...

先看效果，再看代码 上周临时接了个需求：在后台展示全国门店的分布，还要能按区域筛选、点击弹窗查看详情。本来以为就是套个地图组件完事，结果搞了两天才上线——中间踩的坑真不少。 最终用的是 Leaflet...

说实话，我以前真没把Divider当回事 直到有次在做一个后台管理系统的页面重构，设计师甩过来的设计稿里，分割线到处都是：卡片之间、表单项之间、菜单分组……而且要求还特别细，有的要带文字居中，有的要虚...

我的写法，亲测靠谱 事件冒泡这玩意儿，说简单也简单，说坑多也真能让人折腾到半夜。我最早用的时候就是直接绑一堆 click 事件，结果一嵌套深了，父子都响应，逻辑全乱。后来才明白，得靠事件委托和合理阻止...

先说结论：我一般用 Intersection Observer FCP（First Contentful Paint）这玩意儿，说白了就是用户第一眼看到页面内容的时间。作为前端，我们关心它，是因为它直...

先看效果，再看代码 说实话，我之前一直没怎么正经用过浏览器的 Security 面板。平时调试基本靠 Network 看接口、Console 打日志、Elements 改 DOM。直到上周线上一个 H...

项目初期的技术选型 最近做完了一个企业级后台的营销页模块，需求是做一整套动态引导式交互流程，类似产品功能导览那种，带蒙层、高亮、自动滚动、动画提示。产品经理甩过来几个竞品视频，点名要那种“丝滑感”，不...

优化前：卡得不行 这破下拉菜单我真是忍了好久。项目里有个商品分类的 Dropdown，数据量大概两三千条，结构是多级嵌套的，展开后能有五六层。最开始没想那么多，直接递归渲染，用户一点开就卡住两三秒，页...

我的 Ref 写法，亲测靠谱 我用 Vue 3 的 ref 已经两年多了，从最开始觉得 reactive 更高级，到后来发现 ref 才是真香，中间踩过一堆坑。今天不讲概念，就聊实战中怎么写 ref ...

又踩坑了，touchmove滚动失效 今天在搞一个 H5 活动页的时候，遇到个离谱的问题：页面里有个弹窗，弹窗出现后我给 document 绑了 touchmove 事件，想阻止底层页面滚动。结果弹窗...

又踩坑了，touchmove滚动失效 今天在搞一个移动端的 Drawer 抽屉组件，功能很简单：从右边滑出一个侧边栏。UI 搞完之后测试发现，在安卓机上抽屉里的内容根本滚不动，手指划来划去一点反应都没...

这次想说点实在的：安全运维这摊事，到底怎么搞 最近又在折腾安全策略，前端项目上线前总得过一遍安全检查。以前是随便配个CSP、加个HTTPS就算完事，但现在不行了，XSS、CSRF、点击劫持这些玩意儿防...

我的写法，亲测靠谱 先说结论：Access-Control-Allow-Headers 这玩意儿我一开始真没当回事，觉得不就是配个响应头嘛，直到线上接口突然挂了一片，用户登不上、数据拉不了，我才意识到...

项目初期的技术选型 上个月接手了一个老项目的重构，前端是 Vue 2 + Webpack 的架构，部署方式还是最原始的手动 build 后 scp 传到服务器。每次发版本都得小心翼翼，生怕漏了什么步骤...

我的写法，亲测靠谱 Retina 屏幕适配这事，我做了好几年项目了，一开始也以为就是换张高清图就完事。结果上线后 QA 一反馈：「你这图标怎么模糊？」我一看，好家伙，果然糊成一片。折腾了半天才发现问题...

又踩坑了，touchmove滚动失效 今天在搞一个移动端的滑动卡片组件，加了个简单的微交互：手指滑动时，卡片跟着偏移，松手后判断滑动距离决定是回弹还是滑走。逻辑不复杂对吧？结果一上手就翻车了。 问题出...

先来个登录表单，看看这玩意儿咋用 我最近在搞一个管理后台，UI 框架选了 PrimeReact，主要是老板说要“看起来专业点”，又不想花时间自己写样式。于是我就上了 PrimeReact，结果第一关就...

项目初期的技术选型 这个项目是个移动端的 H5 活动页，主要面向 iOS 用户，目标是做一个流畅的手势滑动画廊。一开始我们考虑用 Swiper，毕竟这玩意儿稳、文档全、社区大。但后来产品提了个需求：滑...

优化前：卡得不行 上周上线了个图片上传功能，用户反馈说“传个图要等半天”，一开始没当回事，觉得可能是网络问题。直到我自己在测试机上点了一下——好家伙，选完照片页面直接卡死两秒，进度条还没动。再传个大点...