前端性能优化

项目初期的技术选型 上个月搞一个内容密集型的中后台系统，页面里塞了十几张图表、一堆懒加载图片、还有几个实时数据卡片。用户反馈“打开慢得像卡碟”，我一开始以为是接口慢，结果 Network 面板一开，发...

Early Hints 到底值不值得上？我折腾完的真实体验 去年我在一个首屏加载慢得离谱的项目里试了 Early Hints，本来以为就是加个 header 的事，结果折腾了三天才跑通。今天这篇就聊聊...

为什么我还在纠结 Carlo 这个东西？ 最近一个 Electron 项目跑得有点卡，用户反馈“启动慢得像在加载整个宇宙”，我琢磨着是不是该换轻量方案。正好看到 Carlo——Google 出的基于 ...

又踩坑了，React 里 useEffect 依赖项没写对，数据总对不上 上周改一个用户资料页，页面加载后要从接口拉取用户信息，然后根据用户角色动态设置页面标题。结果每次刷新页面，标题要么是空的，要么...

我的写法，亲测靠谱 做 PWA（Progressive Web App）项目时，manifest.json 是绕不开的一环。我最早以为它就是个配置文件，填几个字段就行，结果上线后发现图标不显示、横屏被...

优化前：卡得不行 最近有个项目，用户反馈说移动端加载速度慢得离谱，特别是在一些低端手机上，简直卡得受不了。我打开自己的手机测试了一下，首页加载时间竟然达到了5秒多，这明显是不可接受的。于是，我决定好好...

我的写法，亲测靠谱 在前端开发中，图片压缩是一个常见的需求。我一般这样处理：首先，在用户上传图片时进行压缩，然后将压缩后的图片存储到服务器。这样既能保证图片质量，又能减少服务器存储压力。 以下是我的代...

为什么要对比这几个方案 代码分割是前端优化中一个老生常谈的话题了。随着应用越来越大，加载时间越来越长，代码分割成了一个绕不开的技术点。市面上有几种主流的代码分割方案，比如基于路由的懒加载、动态导入（i...

cssnano压缩CSS文件后样式乱了，我怎么解决的 最近在搞一个项目，用了cssnano来压缩CSS文件，结果压缩完发现页面样式全乱了。这里我踩了个坑，折腾了半天才发现问题所在。 排查过程 一开始以...

优化前：卡得不行 上个月接手一个用 Espresso 写的移动端列表页，一打开就卡得我直皱眉。不是那种轻微掉帧，是真·卡——滑动时白屏半秒，点击按钮要等 1 秒才有反应，用户反馈“像在用诺基亚”。我本...

PerformanceObserver 报错？原来 entryTypes 是个坑 上周在搞一个性能监控模块，想用 PerformanceObserver 来收集页面的 LCP、FID 这些指标。结果一...

为什么我开始纠结目录规范这事儿？ 说实话，以前写项目根本没怎么管目录结构，想到哪建到哪。结果去年接手一个三年老项目，光是找某个组件的样式文件就花了二十分钟——因为有人把 CSS 放在 src/comp...

我的写法，亲测靠谱 Service Worker（SW）这东西，用好了能让你的 PWA 飞起来，用不好……页面缓存乱成一锅粥，用户看到的永远是旧内容。我折腾过好几个项目，踩过不少坑，现在基本形成了一套...

我的写法，亲测靠谱 Early Hints（103 Early Hints）这玩意儿我最早是在一个首屏加载特别慢的项目里试水的。当时用户一打开页面，白屏得能煎蛋，Lighthouse 评分惨不忍睹。后...

WeakMap 到底该用在哪？我踩过的坑和选型逻辑 最近在重构一个组件库的状态管理模块，又碰到了 WeakMap。说实话，这玩意儿我用了好几年，但每次用都得重新翻文档——不是记不住语法，而是搞不清它到...

我的写法，亲测靠谱 做前端这几年，性能优化从“锦上添花”变成了“上线必过”。我一开始也以为加个懒加载、压缩下图片就完事了，结果线上一跑，Lighthouse 分数还是 40 多，用户反馈“卡得像幻灯片...

项目初期的技术选型 上个月接了个移动端的活动页需求，要实现一个类似“刮刮卡”的交互效果——用户手指滑动区域，底下隐藏的内容逐渐显现。一开始我第一反应是用 Canvas，毕竟这种像素级控制 Canvas...

先上代码：懒加载图片亲测有效 我之前做的一个项目首页加载巨慢，首屏白屏将近3秒。打开 Network 一看，好家伙，几十张高清图一股脑全在 HTML 里用 <img src="..."> ...

项目初期的技术选型 上个月接了个老项目重构，前端资源包体积大得离谱——首屏 JS 超过 1.8MB，CSS 近 500KB。用户反馈加载慢，尤其在弱网环境下基本要等 5 秒以上。团队内部讨论后，决定先...

项目初期的技术选型 去年接手一个中后台管理系统重构，前端用的是 React + Ant Design。一开始没想太多，页面不多，数据量也不大，就按常规套路写：组件拆分、状态管理用 Redux Tool...