1. 自下而上：在此视图中，您将看到时间如何分布在不同函数中，从调用堆栈的底部开始。它有助于发现执行时间较长且可能导致速度变慢的特定任务或函数。此视图可帮助您专注于修复最耗时的代码。
2. 调用树：显示函数调用的自上而下视图，显示每个函数及其子函数所用的时间。它可帮助您跟踪程序的整体流程并深入
了解导致性能问题的特定函数。
3. 事件日志：提供记录期间 教师数据库 发生的事件（例如网络请求和用户交互）的详细列表。每个事件都带有时间戳，因此您可以准确了解问题发生的时间和地点。这对于调试可能在特定时间点减慢网站速度的交互或事件特别有用。
可以肯定地说，通过在 Chrome DevTools 中结合所有这些不同的视图，您可以了解您的网站的运行情况并确定需要优化的领域。
进行首次绩效审计（清单）
我们知道阅读某些内容并不等同于实际去做某件事。
因此，为了确保您 Costa Concordia 的康复：讲故事和病历之间 在阅读本文后能够立即采取一些可行的步骤，我们收集了最重要的要点并将它们制成清单。
以下是您下次使用 Chrome DevTools 的“性能”选项卡时需要执行的操作：
- 配置现场数据，以便 AU 手机号码 您可以将访问者的体验与本地结果进行比较
- 通过限制 CPU 和网络来微调本地环境以模拟用户的体验
- 将鼠标悬停在三个核心网络指标上，以获取有关实际罪魁祸首的更多信息
- 确保记录网站的初始加载和运行时性能
- 在记录报告中，放大时间轴以识别可能减慢加载时间的渲染阻塞资源
- 利用火焰图来查明对页面响应能力产生负面影响的耗时较长的任务
常见问题解答
DevTools 中的性能是什么？
在 Chrome DevTools 中，性能是指一组工具和指标，可帮助分析您的网站或网络应用程序的加载和运行情况。性能选项卡跟踪页面加载时间、JavaScript 执行、渲染和用户交互等方面。它提供有关资源使用情况的详细见解，突出显示可能影响网站速度和响应能力的任何瓶颈
如何在 Chrome DevTools 中限制我的 CPU？
要在 Chrome DevTools 中限制 CPU：
- 打开 DevTools 并转到“性能”选项卡。
- 单击右上角的齿轮图标（设置）。
- 在“CPU”部分中，选择节流级别（例如 4 倍或 6 倍减速）来模拟较慢的设备
如何检查 Chrome 中的页面加载性能？
要检查 Chrome 中的页面加载性能，请打开 DevTools 并导航到“性能”选项卡。到达那里后，点击“记录”按钮并重新加载网页。在页面加载过程中，该工具会捕获资源加载、网络活动和 CPU 使用率的详细细分。停止记录后，，包括加载脚本、渲染和与页面交互所花费的时间。
