识别页面性能瓶颈需用Lighthouse和Performance面板测量FCP、LCP、TBT；禁用插件、清除缓存、真机调试；JS优化用defer/async和懒加载；内存泄漏查Detached DOM和未清理监听器、定时器；避免过度优化如盲目拆包或内联CSS。
如何识别页面性能瓶颈
别猜，先量。浏览器 DevTools 的 Lighthouse 和 Performance 面板是唯一直观入口。重点看 FCP（首次内容绘制）、LCP（最大内容绘制）和 TBT（总阻塞时间）三项——它们直接对应用户感知的“卡不卡”“亮不亮”“点不点得动”。常见误判是盯着 DOMContentLoaded 时间，但它只代表 DOM 构建完成，跟视觉反馈无关。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 用
chrome://inspect远程调试真机，桌面模拟器对渲染耗时严重失真 - 禁用所有浏览器插件再测，某些广告拦截插件会拖慢
script解析 200ms+ - 在
Network面板勾选Disable cache，避免缓存掩盖资源加载问题
JS 执行阶段怎么不阻塞渲染
浏览器遇到 <script> 默认同步下载+执行，期间暂停 DOM 构建和样式计算。优化核心就两条：推迟非关键 JS、拆分大块逻辑。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 第三方统计、埋点脚本一律加
defer，确保按顺序执行但不阻塞解析 - 首屏无需的代码（如模态框逻辑、图表初始化）用
async+ 动态import()懒加载 - 避免在
for循环里反复调用document.getElementById()，缓存成变量或改用querySelector()一次获取 - 长任务（如数据格式转换）拆成微任务：
Promise.resolve().then(() => {...})让出主线程
内存泄漏怎么快速定位
典型表现是页面停留越久越卡，Performance 面板里堆内存曲线持续爬升。JS 内存泄漏主因不是没写 delete，而是意外保留了对 DOM 节点或大对象的引用。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 用
Memory面板录制前后快照，对比Detached DOM tree大小——值大于 0 就说明节点被 JS 引用着却已从文档移除 - 事件监听器必须配对
removeEventListener()，尤其用addEventListener('click', handler)时，不能传匿名函数 - 全局变量慎用
var声明，它会挂到window上长期驻留；优先用const/let限定作用域 - 定时器未清理是高频泄漏源：
setInterval启动后务必在组件卸载时clearInterval(id)
哪些“优化”反而更慢
过度优化常源于过时经验或工具链默认配置。比如 Webpack 的 SplitChunksPlugin 默认按模块大小切分，但若把一个 5KB 工具函数单独打包成 utils.js，HTTP/1.1 下多一次请求反而比合并进主包慢 300ms。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 不要手动
JSON.stringify()+JSON.parse()深拷贝对象，V8 对小对象有优化，直接赋值或用structuredClone()（需检查兼容性） - 避免为省几 KB gzip 后体积，把所有 CSS 内联进 HTML —— 首屏虽快，但后续页面完全无法复用样式缓存
-
requestIdleCallback()不适合处理用户交互响应，它的执行时机不可控，按钮点击后延迟 100ms 渲染就是体验灾难
真实项目里，最常被忽略的是第三方 SDK 的初始化时机和资源加载策略——它们往往自带 300KB+ 的 JS 和多个 DNS 查询，比你写的业务代码影响更大。
