1. Chrome DevTools
- 工具使用：在Chrome浏览器中打开页面，通过快捷键
Ctrl + Shift + I（Windows/Linux）或 Command + Option + I（Mac）打开开发者工具，选择“Performance”标签页。点击录制按钮后刷新页面，即可记录页面加载过程中的各项性能指标。
- 基本原理：Chrome DevTools通过浏览器内核提供的性能监控接口，收集页面在加载、渲染等过程中的各种事件数据，如DOM解析、资源加载、脚本执行等，从而分析出页面加载时间、资源请求情况等性能信息。
2. Next.js内置分析工具
- 工具使用：Next.js提供了
next build --analyze 命令。运行此命令后，构建完成会生成一个交互式的分析报告，展示各个chunk的大小和依赖关系。
- 基本原理：Next.js在构建过程中，会收集打包后的代码模块信息，包括每个chunk的大小、包含的文件等。通过分析这些信息，可以了解哪些部分的代码导致了较大的体积，从而影响性能。
3. Lighthouse
- 工具使用：在Chrome浏览器中，可通过访问
chrome://lighthouse/ 进入Lighthouse界面，输入要测试的Next.js页面网址，点击“Generate report”生成性能报告。也可以在Chrome DevTools的“Lighthouse”标签页中直接运行测试。
- 基本原理：Lighthouse通过模拟真实用户场景，对页面进行一系列的性能测试，包括页面加载、交互性等。它利用Chrome浏览器的自动化测试框架，结合性能最佳实践规则，对页面进行打分并提供优化建议。
4. Performance.now()
- 工具使用：在Next.js页面的JavaScript代码中，可以在关键位置使用
Performance.now() 方法记录时间戳。例如，在页面加载开始和结束的位置分别记录时间，相减得到页面加载时间。
const startTime = performance.now();
// 页面加载相关代码
const endTime = performance.now();
const loadTime = endTime - startTime;
console.log(`页面加载时间: ${loadTime} 毫秒`);
- 基本原理：
Performance.now() 方法返回一个高精度时间戳，其时间原点是页面加载开始的时间，通过记录不同时间点的时间戳差值，可以精确测量代码执行或页面加载等过程的耗时。
