打开Chrome浏览器，按F12或者右键“检查”就能进入开发者工具。很多人只知道用它改页面文字、调样式，其实它还能帮你找出网页为什么这么卡。
打开Performance面板
在开发者工具里点“Performance”选项卡，这时候页面是灰色的，说明还没开始记录。点左上角的圆形录制按钮，然后在页面上操作你想测试的动作，比如点击某个按钮、滚动页面、加载一个模块，再点一下停止录制。
等几秒后，Chrome会展示这段时间内的性能数据。里面有一堆图表，别慌，重点看上面几个关键区域：
FPS（帧率）
红色竖线代表掉帧，绿色越高表示当前帧率越好。一般60fps是流畅标准，如果频繁出现红色，说明动画或交互卡顿。
CPU占用
蓝色条越长，CPU消耗越高。如果JS脚本执行太久，就会阻塞页面响应。常见于大量计算、循环处理数据的场景。
Main线程活动
这里是重头戏。展开Main下的各项，能看到每一帧里都执行了哪些任务。如果有很长的黄色块，基本就是JavaScript在干活。可以点进去看具体是哪个函数耗时最多。
实战例子：页面点击反应慢
假设你有个按钮，点完要等一两秒才有反应。录完一段操作后，在Main里找到对应点击事件的时间段，点击详情，看到函数调用栈里有个叫processLargeArray()的函数用了800ms，点开发现它遍历了一个上万条的数据列表。
这时候你就定位到了问题。优化方向也很明确：能不能分页处理？能不能用Web Worker把计算挪到后台？甚至加个loading提示也能提升体验。
避免强制同步布局
有时候写代码不小心会触发浏览器重排重绘。比如这段代码：
const el = document.getElementById('box');
console.log(el.offsetWidth); // 强制布局
el.style.height = '200px';
console.log(el.offsetHeight); // 再次强制布局每次读取offsetWidth这类属性，浏览器都得重新计算布局，频繁操作就会卡。解决办法是把读和写分开，先统一读完再统一写。
利用内存快照辅助判断
如果页面用着用着越来越慢，可能是内存泄漏。在Performance录制时勾选Memory，可以看到JS堆内存、DOM节点数的变化趋势。如果曲线一直往上走不回落，就得查是不是绑了没解绑的事件监听，或者缓存没清理。
比如轮播图组件切换页面没销毁定时器，每进一次就多一个setInterval，跑着跑着就卡爆了。
小技巧：快捷键和设置
录制前记得清空缓存，避免静态资源加载干扰结果。可以用Ctrl+Shift+R硬性刷新页面。开启“Disable cache”选项更保险。
开始录制时直接按Ctrl+E，开始后操作页面，再按一次结束。比点按钮快多了。
Chrome性能分析不用每次都搞得很复杂。遇到卡顿，花两分钟录一段，大概率能一眼看出问题在哪。修一个耗时函数，可能整个页面就顺滑了。