有一个页面，它加载特别慢，你该怎么排查？
1.页面加载慢排查 面试速记卡片
（按三层递进结构回答，面试直接背）
一、第一步：定位问题（面试核心分）
-
打开 Chrome 工具定位瓶颈
-
Network面板：看资源大小、加载时间、排队 / 阻塞情况、接口耗时，判断是网络问题还是资源问题。 -
Performance面板：录制页面加载过程，查看核心指标（FP/FCP/LCP）、长任务、JS 执行和重绘回流情况，判断是脚本阻塞还是渲染卡顿。 -
Lighthouse评分：直接定位问题根源（图片、JS、缓存、第三方资源等）。
-
二、第二步：按方向排查问题（标准流程）
网络层面
-
资源过大：图片未压缩、未使用 WebP 格式、未做懒加载。
-
资源未缓存：无强缓存或协商缓存配置。
-
请求过多：接口未合并、未做防抖节流、受并发限制影响。
-
阻塞资源：JS/CSS 阻塞渲染。
渲染层面
-
大量 DOM、长列表无虚拟滚动。
-
频繁重绘回流、样式低效。
-
首屏内容过大、关键资源优先级低。
脚本层面
-
长任务占用主线程。
-
第三方脚本（统计 / 广告）阻塞页面。
-
打包体积大、未拆包、未按需加载。
三、第三步：对应优化方案（面试官加分项）
表格
一句话总结
页面加载慢排查的核心是「先定位瓶颈，再分层优化」：用 Chrome 工具定位问题根源，再从网络、渲染、脚本三个维度针对性优化。