Javascript 什么'；s是指chrome开发工具时间线框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框框？

（单击此处可查看更大的）

蓝色-加载，黄色-脚本，紫色-渲染，绿色-绘制

但是有很多轮廓矩形，那是什么？

@leiyonglin

Google Chrome开发者已经为帧负载定义了一个标准度量。它的每秒60帧，根据常识，这与60赫兹的屏幕刷新率一致。因此，一个框架应该花费1/60秒，大约16毫秒。每个垂直条代表一个框架，并且应该在一个特定的时间限制内，您可以将其视为一个水平条，以便您的页面具有足够的响应能力。每个帧可以有多个正在进行的操作，包括脚本编写、绘制和加载。加载意味着像图像传输（url）这样的N/w请求。因此，在统计上，这个矩形表示这些过程（蓝色加载、黄色脚本、紫色渲染、绿色绘制）。矩形的无色部分表示浏览器（GPU/CPU）处理整个帧所需的时间。 您可以通过链接了解更多信息：

请参见屏幕截图和一帧的分析

在这一帧中，有两个绘制作业和一个跨越13.917毫秒的JS事件 所有提到的事件（加载、绘制等）都经过整理，其余时间由浏览器、CPU/GPU完成