safari性能分析需先启用开发菜单并打开web inspector，再用timelines面板录制操作轨迹，最后通过帧率、布局重排、内存堆等指标定位js执行慢、渲染阻塞或资源加载问题。
如果您在 Mac 上使用 Safari 浏览网页时发现页面加载缓慢、交互卡顿或内存占用异常升高，则可能是由于 JavaScript 执行耗时过长、渲染阻塞或资源加载不合理所致。Safari Web Inspector 提供了完整的性能分析能力，可精准定位瓶颈所在。以下是开展性能分析的具体操作路径：
一、启用 Safari 开发者工具并打开 Web Inspector
Web Inspector 默认未启用，需先激活开发菜单才能访问所有调试功能，包括 Timelines 面板等性能分析模块。
1、打开 Safari 浏览器，点击顶部菜单栏的Safari → 偏好设置。
2、切换到高级标签页。
3、勾选在菜单栏中显示“开发”菜单选项。
4、关闭偏好设置窗口，此时顶部菜单栏将出现“开发”菜单项。
5、访问目标网页后，点击开发 → 显示 Web 检查器，或使用快捷键 Command + Option + I。
二、使用 Timelines 面板录制并分析性能轨迹
Timelines 面板是 Safari 中用于性能诊断的核心模块，支持同步捕获 CPU 使用率、布局渲染、JavaScript 执行、内存分配及事件响应延迟等多项指标，所有数据以时间轴形式可视化呈现。
1、在 Web Inspector 窗口中，点击顶部标签栏中的Timelines。
2、点击左上角的红色圆形录制按钮开始记录。
3、在页面上执行待测操作（例如滚动长列表、点击触发动画、提交表单等）。
4、操作完成后，再次点击录制按钮停止记录。
5、在时间轴视图中，拖动鼠标选择某一段高负载区间，右侧详情面板将自动显示该时段内Top Functions（耗时最长的函数）、Layouts（重排版次数）、Paints（重绘帧）、JS Heap（内存堆大小）等关键指标。
三、识别并定位渲染性能瓶颈
Safari 会自动标记出导致掉帧（Frame Rate ）的关键帧，并高亮其渲染阶段耗时分布，便于快速判断是样式计算、布局、绘制还是合成阶段出现问题。
1、在 Timelines 面板中，确保Frames和Rendering复选框已勾选。
2、回放录制结果，观察底部帧率曲线中出现的红色低谷区域（表示帧丢失）。
3、点击某一个红色帧，在右侧Call Stack中查看该帧内执行的 JavaScript 函数调用链。
4、若发现大量Recalculate Style或Layout条目，说明存在强制同步布局（Forced Synchronous Layout），应检查是否在循环中频繁读取 offsetTop/scrollHeight 等会触发重排的属性。
四、分析 JavaScript 执行效率与内存泄漏
通过 Timelines 的 JS Profile 功能可识别执行时间占比过高或频繁调用的脚本函数；结合 Memory 轨迹可发现持续增长未释放的对象引用，从而定位潜在内存泄漏点。
1、在 Timelines 面板中，勾选JavaScript and Events与Memory轨道。
2、执行典型用户路径（如进入页面→操作→离开页面），完成录制。
3、在时间轴上选择离开页面后的空闲时段，观察JS Heap Size是否回落至接近初始值；若持续上升且不下降，则存在内存泄漏风险。
4、点击Call Tree视图，按Self Time（自身执行时间）降序排列，重点关注耗时超过 10ms 的函数。
5、右键某函数名，选择Reveal in Debugger，跳转至 Debugger 标签页直接查看对应源码行。
五、利用 Network 面板协同评估资源加载对性能的影响
页面首屏时间（FCP）、最大内容绘制（LCP）等核心性能指标高度依赖资源加载效率。Network 面板可揭示阻塞渲染的关键请求，辅助判断是否因大体积 JS/CSS 或未优化图片拖慢整体表现。
1、在 Web Inspector 中切换至Network标签页。
2、勾选Disable Cache并刷新页面，确保获取真实加载数据。
3、在请求列表中，按“Start Time”排序，定位首个 HTML 文档请求。
4、查看其Waterfall 图中各阶段耗时（DNS、Connect、SSL、Request、Response、DOMContentLoaded、Load）。
5、筛选出Size > 100KB 且 Type = script 或 stylesheet 的资源，右键选择Open in Resources Tab，进一步检查是否包含未压缩代码或冗余逻辑。
