前端

优化前：卡得不行 最近接手了一个老项目，用户反馈页面加载特别慢。打开Chrome DevTools一看，首屏加载时间竟然要5-6秒，其中有个接口响应时间就占了3秒多。仔细查看Network面板发现，每...

Grunt、Gulp、Webpack，我为什么还是怀念那个年代 最近新项目都用Vite了，回头看看Grunt这些老工具，突然有种想聊聊的想法。其实我比较喜欢用Gulp，但这几年Grunt给我踩了不少坑...

一个看似简单的工具，结果踩了不少坑 最近重构了一个老项目，代码质量实在是看不下去了。项目组里几个人的代码风格五花八门，提交的代码经常出现格式问题，还有些低级错误。领导催着要做代码规范，我就想着引入es...

Shadow DOM嵌套样式穿透踩坑记录 上周遇到一个挺棘手的问题，用Shadow DOM封装组件的时候，外部样式无法穿透到内部，折腾了两天才搞定。这里记录一下完整的排查过程和解决方案。 问题出现了，...

动态路由的基本玩法 最近项目里用了不少动态路由，踩了几个坑，记录一下。动态路由其实就是在URL里面塞个变量，比如用户ID，商品ID这种，React Router和Vue Router都有对应的实现。 ...

接口返回数据格式混乱，前端处理起来要命 最近接手一个老项目，被API的数据格式搞得头疼不已。同一个项目里，有些接口返回的是标准格式： { "code": 200, "me...

优化前：卡得不行 最近重构一个老项目的打包流程，用了Rollup来替换之前的Webpack。本来想着用Rollup的轻量级特性能让构建速度快一点，结果发现打包出来的文件居然比之前还要大，构建时间也慢得...

核心代码就这几行 行为监控这块儿，其实核心就是监听用户的各种操作然后上报数据。我之前做过几个项目，现在回头看，最简单的实现方式就是把常用的事件都监听一遍，然后统一处理。 class BehaviorM...

项目初期的技术选型 去年接手一个中后台管理系统重构，前端用的是 React + Ant Design。上线后用户反馈“页面卡顿”“加载慢”，但本地开发完全没感觉。一开始以为是网络问题，后来发现是首屏渲...

命名这事儿，真不是随便起个名就完事 我写前端写了快十年，踩过的坑里，有一大半和命名有关。变量叫 a、函数叫 handle、组件叫 Box……改代码时自己都认不出是谁写的。后来团队规模大了，协作多了，命...

FCP 优化，我为啥越来越不爱用 SSR 了？ 最近又在折腾一个新项目，首页加载速度被老板盯上了，说用户流失率高。我一查 Lighthouse，FCP（First Contentful Paint）卡...

优化前：卡得不行 上个月我接了个上传大文件的需求，用户要能上传几百 MB 的视频。一开始没当回事，直接用 FileReader 读整个文件，再转成 base64 丢给后端。结果本地测试时，100MB ...

优化前：卡得不行 上个月接手一个老项目，首页加载时间动不动就5秒往上飙，用户反馈“点开就卡死”，连登录都进不去。我本地跑起来也是一样，F5刷新后转圈半天，Network面板里一堆请求排着队，但最离谱的...

我的写法，亲测靠谱 在 React 项目里搞生命周期，我折腾过好几轮。早期用 class 组件时，componentDidMount、componentWillUnmount 写得飞起，但后来 Hoo...

优化前：卡得不行 上周搞一个拖拽排序功能，本来以为就是调个 HTML5 Drag API 走个过场，结果上线后测试同学直接甩我一句话：“你这拖拽是拿脚写的吧？卡成 PPT 了。” 确实，一拖就掉帧，尤...

优化前：卡得不行 上个月上线一个新功能，用户反馈“点一下要等好几秒”，我一开始以为是后端慢，结果自己本地试了下，发现每次刷新页面或者切换路由，前端都要卡 3~5 秒——这哪能忍？ 查了下，问题出在 T...

优化前：卡得不行 上周上线一个新功能，用户反馈“页面一滑就卡死”“点按钮半天没反应”。我本地跑起来一看，好家伙，列表页加载完后，随便滚动两下，FPS直接掉到10以下，DevTools 里 Perfor...

又踩坑了，前端做数据聚合差点把浏览器干崩 上周搞一个数据看板，后端甩过来一堆原始日志，说“前端自己聚合下吧，量不大”。我信了，结果一拉数据——好家伙，12万条 JSON 记录，每条还带几十个字段。本地...

本地开发调接口又报 CORS 错了，这次真不是后端的锅 今天本地跑一个新项目，前端用 Vite，后端 API 部署在测试环境。一调接口就报错： Access to fetch at 'https://...

优化前：卡得不行 上周上线一个新功能，用户反馈“点一下路由跳转要等好几秒”，我一开始还不信，直到自己在测试环境点了一下——好家伙，首页进去后点个“个人中心”，白屏 4 秒多，连 loading 都没来...