浏览器中的引擎 - 它们如何交互？

Question

我一直在努力学习更多关于Web开发的内容，特别是JavaScript，以及不同的引擎如何与JavaScript引擎交互。例如，我知道渲染引擎正在进行交互，HTTP请求等等。我只是想知道，当JavaScript引擎必须将数据发送到另一个引擎（例如渲染引擎）时，JavaScript引擎完成了多少计算。数据到达的时间？

Answer 1

Web是在Internet Protocol Suite的应用层运行的标准化平台。

这是一个超媒体系统，由协议（HTTP），标记语言，样式语言（CSS）和浏览器API（Web API）组成。

Web是早期超媒体系统（如HyperCard）的开发，它使用类似的单线程，面向事件的渲染过程。

问题的关键是＆＃34;浏览器的各个部分如何互动以呈现网页？＆＃34;

答案是由供应商特定实施和标准机构W3C和WHATWG定义的标准化行为的混合。

高级渲染过程可能是这样的：

操作系统的网络子系统（其依次通过TCP IPS传输层接收流）将入站消息公开给浏览器应用程序，作为使用UTF-8编码的字节流。

因此，浏览器的网络子系统接收入站UTF-8编码的八位字节流。

浏览器可能会处理除协调UI呈现之外的线程或进程上的入站字节流，以避免锁定浏览器。

浏览器了解1989年发明的基于文本的HTTP protocol Tim Berners-Lee，并将入站字节解释为HTTP消息。

邮件正文将对应于页面的标记。一旦收到页面标记，它将被交给一个线程进行渲染。

从标记顶部开始，浏览器呈现过程将根据W3C / WHATWG定义的算法开始解析。

当遇到JavaScript时，它通常会立即运行，但是关于确切发生什么时会有复杂的规则。

当遇到对资源（例如图像，脚本，样式表）的引用时，将进行下载请求。有些会阻止渲染过程，有些则不会。

遇到一段JavaScript时，其评估通常会阻止用户界面。这是因为Web被设计为具有控制页面呈现的单个执行线程，并且JavaScript是该过程的一部分。据我所知，多线程用户界面渲染系统因其复杂性而异常（尽管我可能错了）。

因此，浏览器将从标记（或链接的脚本资源）中提取JavaScript，并将其交给JavaScript引擎进行评估。 JavaScript运行时是一个能够评估基于堆栈的语言的应用程序。它有一个堆栈和一个堆和逻辑，用于将JavaScript脚本转换为CPU理解的形式。

堆栈上有零个或多个堆栈帧。在JavaScript中，堆栈帧称为执行上下文。执行上下文就像书中的书签，它有助于运行时跟踪脚本执行的位置。只有当堆栈没有执行上下文时，浏览器才能继续进行渲染工作 - 所以是的，运行JavaScript通常会阻止渲染。

各种浏览器子系统（网络，JavaScript运行时，呈现）之间的通信将通过分配给浏览器进程的堆进行，或者如果浏览器是多进程的，则通过特定操作系统公开的进程间通信机制进行使用（例如命名管道）。

一旦评估（HTML）和样式（CSS）足够（根据W3C规范）并且评估了足够的脚本（JavaScript），就可以开始渲染。

渲染是特定于供应商的流程，但大多数浏览器在高级别上都是类似的。每个HTML元素依次处理。 Chrome对页面上的每个元素使用the following sequence：

1. 评估适用于该元素的JavaScript。
2. 评估适用于该元素的CSS样式。
3. 元素在页面上相应布局。
4. 元素被绘制成位图（彩色像素）。
5. 元素是合成的。根据页面上其他元素的不同层次的影响计算它的最终外观。

此过程可能会在任何给定元素上重复多次，具体取决于页面内容和脚本动态引入的更改。

Answer 2

计算机通常能够每秒执行数十亿次计算。但是，渲染线程仅正常更新60次（刷新率/ VSync），并且网络请求要慢得多。与被等待阻止相比，将它们卸载到线程更便宜。

卸载绘图的另一个原因是使界面看起来很快：即使在JS线程中运行的东西很长，卸载的渲染线程仍然会正常响应。

Answer 3

非常粗略，这是怎么回事：

• 浏览器获取HTML页面（或发送给它的HTML数据）。
• 浏览器开始解释和处理页面
• 在head部分，如果它看到任何外部链接文件，例如JavaScript＆amp; CSS文件，它立即启动加载请求。
• 如果在HTML或链接文件中存在任何JavaScript，则会立即执行 ，除非它利用较新的async选项。这就是为什么JavaScript通常包含文档加载完成时的事件处理程序。
• 其余的继续......

休息一下，请注意head内容会在收到时处理，而不是稍后。

• 从上到下处理body内容。
• 当发生这种情况时，会创建DOM（文档对象模型 - 一种内容映射）。
• 呈现HTML可见内容。
• 任何其他外部数据（如图像）都会发起自己的下载请求。 此内容并行加载，而不是等待。这就是设计糟糕的HTML经常导致在加载图像后重绘的原因。
• 现在加载的CSS同时应用。

这就是静态内容。如果你有改变内容的JavaScript，还有一个阶段：

• JavaScript可以随时更改文档的内容。
• 通常，但并非总是如此，更改内容可能会触发重绘。如果更改影响布局，则需要这样做。
• JavaScript还可以更改HTML元素的各个CSS样式。同样，这可能会触发重绘。