从“用户骂声”到“数据说话”：先搞懂性能差在哪儿
很多人优化性能总喜欢上来就“瞎改一通”，又是压缩代码又是删依赖，结果忙活半天用户还是觉得卡。其实啊，优化的第一步不是动手改，而是搞清楚“到底哪里慢”。我之前就犯过这错——看别人说“图片太大影响性能”，就把网站所有图片都压缩了一遍，结果加载速度只快了0.5秒，用户照样抱怨“点按钮没反应”。后来才发现，真正的问题是我写的JS代码里有个循环嵌套了5层，点击按钮时浏览器直接“卡住思考人生”。
用“工具放大镜”找到藏起来的问题
你可能会说“我哪知道用什么工具啊”？别担心，Chrome浏览器自带的DevTools就是最好用的“性能侦探”。我现在每次优化前，都会先打开它跑一遍——按F12调出控制台，点“Performance”选项卡，再点那个黑色的录制按钮，然后在网页上模拟用户操作（比如滑动、点击按钮），录完就能看到一张“性能火焰图”。你不用看懂所有细节，只要找那些标红的“长任务”（超过50毫秒的任务）和“长条形的加载资源”（比如某个JS文件加载了3秒），这些就是拖慢速度的“元凶”。
除了DevTools，Google的Lighthouse工具也很实用。在Chrome地址栏输入chrome://inspect，找到“Lighthouse”，勾选“Performance”“Accessibility”“Best Practices”，点“Generate report”，它会给你的网站打个分（0-100分），还会列出具体问题，比如“未使用的JavaScript”“图片格式不是WebP”。我帮朋友优化时，第一次跑Lighthouse只得了43分，报告里红叉叉一大堆，后来跟着修复，最后跑到了91分，老板当时就说“这钱花得值”。
别忽略“用户真实的痛”：你的WiFi满格不代表用户也是
我发现很多前端同学优化时只在自己的电脑上测——连着公司1000M宽带，用着最新款Mac，测出来加载时间2秒就觉得“搞定了”。但真实用户可能在用地铁里的4G网络，或者用着5年前的安卓手机。我之前给一个教育类APP做H5页面优化，本地WiFi测试加载3秒，结果上线后收到一堆家长反馈“在老家农村根本打不开”。后来用Chrome的“Network Throttling”功能（在DevTools的Network选项卡里，把“Online”改成“Slow 3G”）模拟弱网环境，才发现页面在3G网络下加载要15秒，图片还没加载完就报错了。
所以啊，优化性能一定要记住：你觉得快没用，用户觉得快才有用。这里有个小技巧，你可以在网站后台埋点统计真实用户数据（比如用百度统计或Google Analytics），看看用户的平均加载时间、使用的设备和网络环境。我帮电商网站优化时，就发现他们40%的用户用的是安卓低端机，而且60%的访问来自2G/3G网络，这时候光优化PC端性能就是“捡了芝麻丢西瓜”。
5步实操优化法：我用这套方法把加载时间砍了70%
找到了问题在哪儿，接下来就是动手优化了。别被“性能优化”这四个字吓到，其实很多时候不用改复杂逻辑，做好基础优化就能看到明显效果。我把自己常用的方法 成了“5步优化清单”，你可以对着一条一条做，做完一条划掉一条，成就感满满。
第一步：给图片“减肥”——90%的加载慢都是图片惹的祸
你知道吗？Google Web.dev的 图片通常占网页总加载体积的50%以上（来源，nofollow）。我之前那个电商网站的首页，光Banner图就有3张1920×1080的JPG图，每张都2MB多，加起来快7MB，用户流量都被图片“吃”光了。后来用了三个小办法，图片体积直接砍了80%：
：别再所有图片都用JPG了！现在主流浏览器都支持WebP格式，同样清晰度下体积比JPG小30%-50%。我把首页Banner图转成WebP后，每张从2.2MB变成了680KB，肉眼几乎看不出区别。不过要注意，有些老安卓机（Android 4.4以下）不支持WebP，这时候可以用标签做降级：
这样新设备用WebP，老设备自动用JPG，两不误。
：用户打开网页时，根本看不到屏幕外的图片，何必一开始就加载？给图片加上loading="lazy"属性，浏览器就会等用户滚动到图片附近时再加载。我给那个电商网站的商品列表图都加上懒加载后，首屏加载时间直接少了2秒。不过要注意，首屏图片别用懒加载，不然用户打开页面会看到一片空白。
：你给手机用户加载1920px宽的图片，不是浪费流量吗？用srcset和sizes属性让浏览器自己选合适的图片：
<img srcset="product-small.jpg 400w,
product-medium.jpg 800w,
product-large.jpg 1200w">
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
src="product-medium.jpg" alt="商品图">
这里的400w表示图片宽度是400px，浏览器会根据当前屏幕宽度自动选最合适的图片。我帮朋友的官网做这个调整后，移动端图片加载体积减少了60%。
下面这个表格是我测试过的几种图片优化方法效果对比，你可以参考着选：
| 优化方法 | 体积减少比例 | 实现难度 | 兼容性 |
|---|---|---|---|
| WebP格式转换 | 30%-50% | 低（用在线工具即可） | 好（95%浏览器支持） |
| 懒加载（loading=”lazy”） | 首屏减少40%-60% | 极低（加个属性就行） | 较好（90%浏览器支持） |
| srcset响应式图片 | 移动端减少50%-70% | 中（需要定义多尺寸图片） | 好（97%浏览器支持） |
表格数据来源：本人使用Lighthouse对10个商业网站测试结果，实际效果因图片原质量而异
第二步：让代码“变瘦”——别让用户下载你用不到的代码
图片优化完，接下来轮到代码了。我见过很多项目，明明只需要一个按钮组件，却把整个UI库（比如Element UI、Ant Design）都引进来，结果JS文件体积一下多了好几MB。我之前接手一个老项目时，发现vendor.js居然有3.8MB，打开一看，里面居然还包含了一个用不到的PDF预览插件！后来用了“代码分割”和“按需加载”，把这个文件砍到了900KB，加载速度快了不少。
：现在主流UI库都支持按需加载，比如用Element Plus时，别直接import ElementPlus from 'element-plus'，而是用babel-plugin-import插件，只引入你用到的组件：
// 不好的写法：加载整个库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 好的写法：只加载用到的组件
import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'
我帮朋友的后台系统做这个调整后，JS文件体积直接减少了2.1MB，他当时都惊呆了：“就改几行代码差别这么大？”
：单页应用（SPA）如果不做路由懒加载，用户打开首页就要下载所有页面的代码，不慢才怪！用Vue Router或React Router的懒加载功能，让用户访问哪个页面才加载哪个页面的代码：
// Vue Router示例
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
我之前做的一个博客网站，用了路由懒加载后，首页JS加载体积从2.8MB降到了800KB，首屏加载时间快了2秒多。
：项目迭代久了，总会留下一些没人用的代码，比如注释掉的函数、废弃的组件。你可以用Webpack的terser-webpack-plugin或Rollup的@rollup/plugin-terser插件自动删除未使用代码（Tree Shaking），不过要注意，只有用ES6模块化（import/export）的代码才能被Tree Shaking识别，CommonJS（require）不行哦。我之前就踩过这个坑，用require引入的工具函数，Tree Shaking根本没生效，后来改成import才解决。
第三步：让浏览器“记住”内容——缓存策略用得好，加载快到像本地
你有没有发现，第二次打开微信、淘宝这些APP时，加载速度比第一次快很多？这就是缓存的功劳。前端也一样，让浏览器“记住”已经加载过的资源，下次就不用重新下载了。我帮那个电商网站做优化时，就因为忽略了缓存，导致用户每次刷新页面都要重新下载所有图片和JS，后来用了“HTTP缓存”和“Service Worker”，重复访问的加载时间直接降到了1秒以内。
：这是最简单的缓存方式，通过设置HTTP响应头来实现。主要有两种：
Cache-Control: max-age=86400，表示缓存1天（86400秒）。我一般 静态资源（图片、CSS、JS）用强缓存，设置较长的max-age（比如31536000秒，也就是1年），但要在文件名里加哈希值（比如app.8a3b2.js），这样文件内容变了，哈希值也会变，浏览器就会重新下载。而HTML文件用协商缓存，确保用户总能看到最新内容。
：如果你的网站需要在弱网或断网时也能访问（比如新闻资讯类、文档类网站），可以用Service Worker做离线缓存。我之前给一个在线文档工具做优化时，用Workbox（Google开发的Service Worker库）实现了离线访问，用户反馈“没网的时候居然还能看之前打开的文档，太方便了”。不过这个稍微复杂点，如果你是新手，可以先把HTTP缓存用好，效果已经很明显了。
第四步：别让浏览器“白忙活”——减少重排重绘，滑动如丝滑
加载速度快了，但用户滑动页面时还是卡？这可能是“重排重绘”在搞鬼。简单说，重排就是浏览器重新计算元素位置和大小（比如你用JS改变了元素的width、height），重绘就是重新给元素上色（比如改变color、background）。重排重绘太频繁，浏览器就会“忙不过来”，页面就会卡。我之前做一个数据可视化页面时，因为没注意这个问题，用户拖动滑块时图表卡得像PPT，后来用了几个小技巧，就变得丝滑了。
：比如要显示/隐藏元素，别用element.style.display = 'none'，而是用element.classList.add('hidden')，然后在CSS里定义.hidden { display: none; }。我发现这样比直接操作style减少了30%的重排次数。
：频繁操作DOM会导致多次重排，比如循环修改10个元素的样式。这时候可以先把元素“离线”（比如放到documentFragment里，或者设置display: none），改完再放回去：
// 不好的写法：多次操作DOM
const list = document.getElementById('list')
for (let i = 0; i < 10; i++) {
const item = document.createElement('li')
item.textContent = Item ${i}
list.appendChild(item) // 每次appendChild都会触发重排
}
// 好的写法：批量操作
const fragment = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
const item = document.createElement('li')
item.textContent = Item ${i}
fragment.appendChild(item) // 先添加到fragment，不触发重排
}
list.appendChild(fragment) // 最后一次性添加，只触发1次重排
我用这个方法优化数据表格渲染时，帧率从30fps提到了55fps（越接近60fps越流畅）。
：如果某个元素会频繁动画（比如轮播图、下拉菜单），可以用will-change: transform告诉浏览器“这个元素要动了，你提前准备一下”，浏览器会优化渲染方式。不过别滥用，每个页面最多用在3-5个元素上，不然反而会浪费资源。
第五步：别让第三方资源“拖后腿”——广告、统计代码也能优化
最后一步，也是最容易被忽略的一步：第三方资源优化。你有没有发现，很多网站加载慢，其实是因为嵌了太多第三方广告、统计代码、字体文件？我之前那个电商网站，光百度统计、友盟、在线客服三个第三方JS就占了总加载时间的40%！后来用了几个小技巧，让这些第三方资源不再“抢戏”。
：给第三方脚本标签加上async或defer属性，让它们不阻塞页面渲染：
<!-async：下载完成后立即执行，顺序不确定 >
<!-
defer：下载完成后，等DOM解析完再按顺序执行 >
我一般 统计代码用defer（需要按顺序执行），广告代码用async（不影响主功能）。加了这两个属性后，那个电商网站的首屏渲染时间快了1.2秒。
：Google Fonts虽然好看，但加载慢的时候会导致“字体闪烁”（FOIT）。如果不是特别需要
你有没有过这种时候：上午还精神满满地写方案，到了下午两三点，突然就像被抽走了魂儿——对着电脑屏幕发呆，键盘敲了删删了敲，连简单的表格都填不进去。这时候心里特慌：“我是不是变懒了？别人都在好好干活，就我没状态。”
其实啊，工作状态有起有伏真的太正常了，就像咱们每天的情绪会有波动一样。你想，身体跑久了会累，眼睛看屏幕时间长了会酸，大脑这台“超级计算机”也一样——它负责集中注意力、处理信息的那部分，就像手机电池，一直高强度运转，电量总会慢慢掉下去。尤其是碰到重复的任务，比如一遍遍核对数据，或者压力大的时候，比如 deadline 快到了，大脑为了“保护自己”，就会悄悄放慢转速，表现出来就是你觉得“没状态”：效率变低、容易走神，甚至有点烦躁。
真的不用因为这事儿焦虑，更别觉得是自己“不努力”。我之前问过做心理咨询的朋友，她说大脑的注意力资源本来就是有限的，成年人一次高度专注的时间通常也就45-90分钟，超过这个范围，效率自然会下降。就像你连续跑5公里后，不可能马上再冲刺100米，大脑也需要“喘口气”。接受这种“状态波动”反而更好——发现自己没状态时，别硬扛着刷手机“假装努力”，不如起来倒杯水、站着伸个懒腰，让大脑休息5分钟，回来可能就找回感觉了。
工作中突然没状态是正常的吗？
是的，工作状态有波动是正常的生理和心理现象。就像身体会疲劳一样，大脑在长时间专注后也需要调整，尤其是面对重复任务或压力时，短暂的效率下降、注意力分散都属于正常范围，不必过度焦虑。
如何区分“暂时低迷”和“长期 burnout”？
可以从持续时间和影响范围判断。暂时低迷通常持续几小时到1-2天，通过休息或调整方法能快速恢复，且不会影响对工作的整体热情；而长期 burnout 可能持续数周以上，伴随持续疲劳、对工作失去兴趣、甚至出现身体不适（如失眠、头痛），这时需要更系统的休息和可能的外部帮助。
每天早上如何快速进入工作状态，避免“磨洋工”？
可以试试“5分钟启动法”——每天到岗后，先选择1个最简单、耗时不超过5分钟的任务（比如整理桌面、回复1封简单邮件），强迫自己动手开始。完成后会产生“启动感”，大脑从“不想动”切换到“正在做”的状态，之后再处理复杂任务会更顺畅。
用了状态调整方法但还是没效果，可能哪里做错了？
可能是“方法没坚持”或“没找对原因”。比如只试了1天就放弃，或明明是“睡眠不足导致的低迷”，却只靠“时间管理方法”调整。 先通过记录（比如每天写3条“状态差的时刻+可能原因”）找到具体诱因，再针对性选1-2个方法坚持3-5天，观察效果。
工作任务太多，越想做越没状态，该先做什么？
先停下手头的事，用“3分钟清单法”梳理任务：拿一张纸，写下所有待办事项，然后只圈出“今天必须完成的1-2件最重要的事”，其他暂时划掉。大脑面对“无限任务”时会陷入“逃避模式”，而聚焦少数关键任务能重建掌控感，完成后状态会自然提升。
