关于谷歌控制台timeline的数据含义

Question

运行的是vue-cli生成hello world

请问：
Evaluation Script指的是代码的运算耗时吗？
如果我想知道这个耗时过程中，每一个函数或者每一行代码所用的时间如何查看呢

下面的Scripting（self）和 Scripting（children）又分别指的是什么呢？

Answer 1

Evaluation Script指的是代码的运算耗时吗？

是的,准确的说记录（我这里记录的意思是界面上单独列出）的不是代码执行的时间。你可以点旁边的evene log看一下，只涉及到定时器，资源请求，解析HTML,解析JS和GC的相关时间记录，其他的一些普通代码执行的时间就不会单独记录了，你可以观察他记录的每一段的start time和self time，就能明白我所说的了（每一段的start+self并不总是等于下一段的start,因为还有其他的很多普通代码执行需要时间）。并且不是一定包含上述所有这些过程，某一些函数调用只涉及这其中的一些。

如果我想知道这个耗时过程中，每一个函数或者每一行代码所用的时间如何查看呢

这个是不可能的，一行代码执行的时间太短太短了，如果要显示他该用什么单位，纳秒还是微秒？而且一个页面那么多JS，他如果页面执行的JS每一行都去统计，那得多浪费时间和空间。。就像上面所说的，他只会记录那些对程序员说关心的东西。那些普通的诸如什么a++，if判断，while循环这些，你可以通过分析start time和self time看到确实是包含了这些代码的执行时间，但是不会单独列出来。

下面的Scripting（self）和 Scripting（children）又分别指的是什么呢

self指代码执行的时间，children指解析JS和GC的时间。旁边的bottom-up，call-Tree，event log你都可以看看，应该会帮助你理解,这里附上devtool的官方文档，想详细了解的话你可以点击chrome-devtools(需翻墙)