Chrome浏览器Timeline中的3根虚线代表什么意思

Question

1、Chrome的Timeline的3根虚线，绿色，蓝色和红色分别代表什么意思。

Answer 1

鼠标移到这些颜色的小方框上会有提示的

Answer 2

• 绿色 first paint，这时候开始渲染第一帧，页面可以看见内容了。

• 蓝色 domContentLoaded，DOM结构加载完成。

• 红色 Load 事件触发，此时页面资源全部加载完成。