在 Deno 的最新版本中，引入了可视化的 Tracing 工具。这种机制可以帮助前端工程师找出代码中的性能瓶颈和错误。
Tracing 机制的原理
当开发者在 Deno 中使用 Tracing 机制时，会产生一个包含应用程序执行过程的时间轴的 JSON 文件。Deno 的 Tracing 工具可以将这些文件可视化，以便于开发者定位性能瓶颈和错误。
如何使用 Tracing 机制
在 Deno 应用程序中，开发者可以通过命令行参数 --trace 来开启 Tracing 机制。例如：
$ deno run --trace app.ts
在应用程序执行过程中，Deno 会将性能数据写入一个名为 deno.sometimestamp.jsonl 的文件中。
当应用程序结束后，将会在命令行中输出一条消息提示 Tracing 机制执行完成。例如：
$ deno run --trace app.ts ... DENO TRACING FILE: deno.20191231-161508.jsonl
可视化 Tracing 数据
为了更好地理解 Tracing 数据，我们需要使用一些可视化工具，这里推荐 Chrome 的内置 Tracing 工具。
导入 Tracing 文件到 Chrome 工具
首先，我们需要将生成的 deno.sometimestamp.jsonl 文件导入到 Chrome 工具中。方法如下：
- 在 Chrome 浏览器中打开「Developer Tools（开发者工具）」窗口。
- 点击左上角的按钮，选择
More Tools > Performance。 - 点击工具面板上
Load按钮，选择导入的 Tracing 文件。
查看 Tracing 数据
在成功导入 Tracing 数据后，我们可以查看应用程序各个阶段的信息，这些信息以图形方式展示。例如，在时间轴上，可以看到应用程序的事件信息和异步处理过程中的事件信息，这些信息能够帮助我们分析和解决性能瓶颈。
代码示例
下面是一个简单的 Deno 应用程序，演示了 Tracing 的使用方式：
// javascriptcn.com 代码示例
// app.ts
interface Todo {
name: string
completed: boolean
}
const todos: Todo[] = []
for (let i = 0; i < 100000; i++) {
todos.push({
name: `Task ${i}`,
completed: false
})
}
console.log('Task creation completed.')
for (let i = 0, len = todos.length; i < len; i++) {
todos[i].completed = true
}
console.log('Task completion completed.')在执行以上的代码时，可以带上 --trace 参数来启用 Tracing 机制：
$ deno run --trace app.ts
执行完成后，可以在 deno.*.jsonl 文件中找到 Tracing 数据文件，并使用 Chrome 开发者工具进行可视化。
总结
Deno 的 Tracing 机制是前端工程师在性能调优和错误排查中非常有用的一个工具，它通过在应用程序执行过程中记录性能数据，让开发者可以对应用程序性能问题有更清晰的了解，从而更有效地根据 Tracing 数据对应用程序进行优化。
在实际应用中，为了有效利用 Tracing 机制，前端工程师还需要对 Tracing 数据的解读和分析有比较深入的理解，才能快速排除性能问题，从而保障应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d3b2a7d4982a6ebea1eee