什么是这些回流，油漆，编组，样式重新计算，...浏览器概念到底是什么？

Question

我偶尔会在网络浏览器的上下文中听到关键词编组，样式重新计算，IO，回流，绘画等。知道这些的人能说得简单吗？如果有的话，每个人的责任是什么以及他们如何一起工作？

例如，这就是IE博客对性能的评价：http://blogs.msdn.com/b/ie/archive/2010/09/14/performance-what-common-benchmarks-measure.aspx

以下是V8测试实际测试的图片：

我想知道所有这些真正意味着什么。我从来没有听说过编组和格式化的任何解释等等。我假设显示是渲染/绘画，布局是重排。

Answer 1

在您链接到的完全相同的页面上，链接指向page that describes the various subsystems。

我引用：

  

以下是这些子系统的简要概述   加载网站时遇到：

     

网络：通常遇到的第一个子系统是网络。   网络子系统负责之间的所有通信   客户端和服务器，包括Web内容的本地缓存。该   网络子系统一般都是关于性能的门控   用户的网络

     

HTML ：当从服务器下载HTML文档时，它们会被传递   到解析文档的HTML子系统，启动附加   在网络子系统中下载，并创建结构   文件的代表。现代浏览器也包含相关的   子系统，用于XHTML，XML和SVG文档。

     

CSS ：遇到CSS时，是否在HTML文档中   或者一个CSS文档，它被传递给一个CSS子系统来解析它   样式信息并创建可以的结构表示   稍后引用。

     

集合：HTML文档通常包含元数据，例如   文档头中描述的信息或应用的属性   一个元素。集合子系统负责存储   并访问此元数据。

     

JavaScript ：遇到脚本时，会直接传递给   JavaScript子系统，负责执行该脚本。   JavaScript子系统可能是最知名的   浏览器子系统由于它已经收到的可见性   最近几年。

     

Marshaling ：因为大多数JavaScript引擎都不是直接的   集成到浏览器中，之间有一个通信层   浏览器和脚本引擎。通过此传递信息   通信层通常被称为编组。

     

Native OM ：JavaScript通过Document与文档进行交互   对象模型API。这些API通常通过提供   知道如何访问和操作文档的子系统   脚本引擎和脚本引擎之间的主要交互点   浏览器。

     

格式化：构建文档后，浏览器需要   在将样式信息显示给用户之前应用样式信息。   格式化子系统获取HTML文档并应用样式。

     

Block Building ：CSS是一个基于块的布局系统。文件之后   风格，下一步是构造矩形块   将显示给用户。这个过程决定了像   块的大小与下一阶段紧密结合 -   布局。

     

布局：现在浏览器已对内容进行样式化并构建   块，它可以经历布局内容的过程。   布局子系统负责这种算法复杂   过程

     

渲染：该过程的最后阶段发生在渲染中   子系统，其中最终内容显示给用户。这个   过程通常被称为“绘制到屏幕上”并且可能发生   在CPU，GPU或两者的组合上。