下面的Browser Engine图和JS Runtime图之间的桥梁是什么？

Question

我一直在阅读有关浏览器如何工作以及浏览器的组件是什么的内容。我遇到过各种关于浏览器如何解析 JS 和渲染过程等的文章，但我无法合并我在几乎所有其他文章中找到的这两个图表。 WebAPI、回调队列、事件循环等位于第一幅图中的什么位置？两个图中的 Javascript 引擎和 Javascript 解释器是否相同？

如果有人可以帮助我解决以下问题：

1. 合并这两个图并提供一个新图，在整体图中添加 Web API、事件循环等
2. 如果您能给出以下各项的示例，那就太好了：

Answer 1

简而言之，第二个图提供了第一个图中标有“JavaScript 解释器”的框内内容的一些详细信息（该术语使用该术语作为“JS 引擎”的同义词），而“Web API”的实现是渲染引擎。

也就是说，正如@JonasWilms 指出的那样，至少可以说，这两个图的整体准确性/质量是相当有争议的。一个不准确的例子是第二张图声称 DOM 是 JS 引擎的一部分。