优化

项目初期的技术选型 上个月接手一个老项目重构，前端是纯 React + Webpack 的 SPA，打包后体积快 3MB 了（gzip 前）。用户反馈首屏加载慢，尤其在低端安卓机上直接卡成 PPT。团...

先看效果，再看代码 上周我接手一个老项目，打包后 vendor.js 高达 3.8MB，首屏加载直接卡成 PPT。打开一看，好家伙，import { Button, Input, Modal, Tab...

先上代码，再聊原理 最近给一个静态博客加 sitemap，折腾了小半天，最后发现其实就几行代码的事。但中间踩的坑可不少，尤其是时间格式和路径拼接那块，差点以为自己写错了。这里直接贴出我最终用的方案——...

先看效果，再看代码 我最近在优化一个图片密集型的页面，首屏加载慢得像老牛拉车。F12 一看，好家伙，一张 banner 图居然加载了 3MB 的高清图，而实际显示区域只有 600px 宽。这种浪费带宽...

又踩坑了，权限系统里一堆 flag 判断卡到爆 上周改一个老项目，用户权限那块逻辑写得跟意大利面条似的。每个功能点都要判断用户有没有某个权限，比如“能不能导出数据”“能不能删除评论”，代码里全是 if...

有损压缩？别被名字吓到，其实就那么几种靠谱方案 最近项目里图片加载慢得离谱，用户反馈“点开页面等三秒才出图”，我一查，好家伙，首页 banner 图平均 3MB 起步。产品经理还振振有词：“高清大图才...

又踩坑了，弹窗一出来背景还能滚 上周做移动端项目，搞了个全屏弹窗，结果测试一提：「你这弹窗打开的时候，底下页面还能滑动，手指一划就滚走了，体验贼差」。我一开始还不信，自己试了下——好家伙，真能滚！明明...

为什么我要折腾请求队列？ 去年做项目时，用户频繁点击“保存”按钮，结果后端收到一堆重复请求，数据库直接炸了。后来加了防抖，但又遇到新问题：有些请求必须按顺序执行（比如先创建再更新），防抖一搞，顺序全乱...

又踩坑了，Loading 状态闪一下就没了 前几天改一个老项目，用户反馈说点“加载更多”按钮的时候，Loading 动画几乎看不到，一闪就没了。我一开始以为是网络太快，结果本地 mock 数据也这样—...

先看效果，再看代码 上周重构一个老项目，用户反馈说“在低端机上点按钮没反应”。我一开始以为是 JS 报错，结果打开 DevTools 一看，根本没加载 JS 文件——因为网络太差，JS 资源超时了。这...

优化前：卡得不行 上个月我们上线了一个内容型站点，用的是 Next.js 的静态生成（SSG）。初期几百个页面，构建飞快，部署也稳。但随着内容量涨到 3000+ 页面，每次构建直接干到 15 分钟以上...

优化前：卡得不行 上周上线一个内容密集型的详情页，用户一进来就疯狂抱怨“转圈转到怀疑人生”。我自己用手机点开也是一脸黑线——首屏白屏将近5秒，滚动还卡成PPT。这哪是用户体验，简直是用户劝退。 页面结...

又踩坑了，闭包导致的内存泄漏差点让我背锅 上周上线一个新功能，用户反馈页面越用越卡，切换几个模块后直接卡死。我一开始以为是动画太多或者数据量太大，结果排查半天发现，罪魁祸首居然是几个看似无害的闭包函数...

项目初期的技术选型 上个月搞一个中后台管理系统，页面多、模块杂，用户经常在首页点来点去，跳转到各种子页面。产品提了个需求：希望用户点开新页面时“快一点”，别卡半天。一开始我直接上了路由懒加载 + co...

优化前：卡得不行 上周上线一个新页面，字体用的是自定义的 Inter 和一个中文思源黑体。本地开发跑着挺顺，但一上测试环境，用户反馈“白屏好几秒”“字突然蹦出来吓一跳”。我自己打开 Lighthous...

我的写法，亲测靠谱 WeakMap 和 WeakSet 这俩东西，我一开始总觉得“高大上但用不上”，直到某次内存泄漏排查到凌晨三点，才意识到它们真能救命。现在我几乎在所有需要“私有数据”或“临时缓存”...

我的写法，亲测靠谱 做前端这几年，处理“可视区域”相关的逻辑几乎成了家常便饭。不管是懒加载、滚动动画、还是性能优化，绕不开 IntersectionObserver。但说实话，一开始我用得特别糙，直接...

先看效果，再看代码 我最近接手一个老项目，打包时间从 45 秒飙到 2 分钟，本地开发时改一行 CSS 都要等半分钟，简直没法干活。折腾了几天，最后把 Webpack 配置重构成一套亲测有效的优化方案...

项目初期的技术选型 去年接了个企业官网重构的活，客户要求“首屏加载快一点”，但没给具体指标。我一开始也没太当回事，毕竟现在都用 Vite + React，按部就班搞个代码分割、懒加载，应该问题不大。结...

项目初期的技术选型 去年做了一个后台管理系统的搜索模块，需求是用户输入关键词时实时展示匹配结果。一开始没多想，直接在 input 的 oninput 里加了个 fetch 请求，结果 QA 一测就炸了...