前端优化系列 - 工具使用（上）

本文介绍前端性能分析最强大的工具-Trace，带开发者一起来了解如何借助该工具优化自己的业务。注意，本文配有视频，请在wifi环境下查看。

由于公众号对文章内的视频个数有严格限制（上限为３个），Trace工具的使用分享一文将会分为上下两节发出，请开发者谅解。

Trace的原理并不复杂，它最本质的是日志，一般包括生成日志和使用日志两部分。

• 生成日志。指的是在内核各个函数进行打点，Trace数据格式请参考：Trace Event Format。
• 使用日志。指的是在devtools的Trace，Timeline，Lighthouse等工具中，利用生成的Trace日志进行统计分析。例如，可以计算内核某个函数的调用次数和执行耗时。Trace可以深入到内核函数的级别，它可以帮助开发者定位页面性能问题。

PC Chrome的Trace使用方法非常简单，步骤如下：

1. 启动PC Chrome浏览器，新建一个窗口并在地址栏输入chrome://tracing
2. Record → Javascript and rendering → Edit categories → select v8.execute and v8.compile → Record
3. 新建另外一个窗口，访问页面，例如：https://pages.test.com/xxxxxxx
4. 页面首屏展现完成，点击 Stop 停止记录，生成Trace文件，可以分析具体的函数执行情况。

细节请参考下面视频：

PC与手机的性能差异非常大，我们在开发手机端应用时，一定要使用手机去进行测试。需要注意的是，调试页面一定要使用开发者版本的应用。出于控制应用安装包尺寸的原因，一般应用默认都不会带有Trace功能。
手机Trace的调试方法：

1. 【手机端】手机通过USB数据线连上PC（比如，Mac Pro）。
2. 【PC端】打开PC Chrome浏览器，新建一个窗口并在地址栏输入chrome://inspect/?trace
3. 【PC端】Record → Javascript and rendering → Edit categories → select v8.execute and v8.compile → Record
4. 【手机端】应用中加载待测试的页面。例如：https://pages.test.com/xxxxxxx
5. 【手机端】页面首屏展现完成。
6. 【PC端】点击 Stop 停止记录，生成Trace文件，可以分析具体的函数执行情况，比如，v8.run 代表JS执行耗时，下面视频中aplus_wap.js执行耗时162.364ms。

细节请参考下面视频：

Trace一般用于宏观分析，分析页面耗时特别严重的模块，而Timeline更适合分析耗时的细节，比如，找出某个比较耗时的JS函数调用。
手机Timeline的调试方法：

1. 【手机端】手机通过USB数据线连上PC（比如，Mac Pro）。
2. 【手机端】应用中加载待测试的页面。例如：https://pages.test.com/xxxxxxx
3. 【PC端】打开PC Chrome浏览器，新建一个窗口并在地址栏输入，chrome://inspect
4. 【PC端】点击 Inspect 进入Remote Inspect调试界面。
5. 【PC端】在 Timeline 的界面，点击 刷新 按钮，开始记录Timeline信息（注：不要勾选 Screenshots，否则可能会由于占用内存过多而导致应用崩溃）。
6. 【PC端】等待完成，它会生成Timeline信息（注：也可以自行点击 Stop 停止记录）。
7. 【PC端】在 Call Tree 界面，可以分析具体函数的耗时，比如，视频中的 startsWith / endsWith。
   细节请参考下面视频：