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，进一步检查是否包含未压缩代码或冗余逻辑。
