Here’s a brief overview of these subsystems in the order they’re encountered when you load a web site:
1，Networking: The first subsystem generally encountered is networking. The networking subsystem is responsible for all communication between the client and server, including local caching of web content. The networking subsystem is generally gated on the performance of the user’s network
2，HTML: As HTML documents are downloaded from the server they’re passed to an HTML subsystem which parses the document, initiates additional downloads in the networking subsystem, and creates a structural representation of the document. Modern browsers also contain related subsystems which are used for XHTML, XML and SVG documents.
（html启动额外的network层下载，创建document结构表现，文档层次结构）
3，CSS: When CSS is encountered, whether that’s inside an HTML document or a CSS document, it’s passed to a CSS subsystem which parses the style information and creates a structural representation that can be referenced later.
(解析样式信息，构建表现结构供后面引用)
4，Collections: HTML documents often contain metadata, for example the information described in the document head or the attributes applied to an element. The collections subsystem is responsible for storing and accessing this metadata.
(存储、处理 head标签中的metadata信息)
5，JavaScript: When script is encountered, it’s passed directly to the JavaScript subsystem which is responsible for executing that script. The JavaScript subsystem is probably the most well-known of the browser subsystems thanks to the visibility it has received over the last few years.
(执行页面的js，可以看出当alert时，页面中alert之前的元素可以呈现出来了,页面从上往下一步一步的每个元素呈现刷下来的，此时还看不到后面的元素,dom还未构建好)
6，Marshaling: Because most JavaScript engines are not directly integrated into the browser, there is a communication layer between the browser and the script engine. Passing information through this communication layer is generally referred to as marshaling.
（js引擎大多没有集成进浏览器，脚本引擎和浏览器通过通信层按照marshaling编队的形式传递）
7，Native OM: JavaScript interacts with the document through the Document Object Model API’s. These API’s are generally provided through a subsystem which knows how to access and manipulate the document and is the primary interaction point between the script engine and the browser.
(js通过DomAPI处理document, 通过dom系统，js调用它的API来处理、操纵document,它是浏览器和引擎的主要交互点)
8，Formatting: Once the document is constructed, the browser needs to apply the style information before it can be displayed to the user. The formatting subsystem takes the HTML document and applies styles.
（文档构造成了，需要加载样式信息，这里负责呈递为document加上styles属性）
9，Block Building: CSS is a block based layout system. After the document is styled, the next step is to construct the rectangular blocks that will be displayed to the user. This process determines things like the size of the blocks and is tightly integrated with the next stage - layout.
(与下一阶段紧密结合，构造元素的块状结构模型，大小等属性)
10，Layout: Now that the browser has styled the content and constructed the blocks, it can go through the process of laying out the content. The layout subsystem is responsible for this algorithmically complex process.
(在赋予样式和构造完模块以后，本过程负责展示、定样内容，进行这些复杂的变形处理)
11，Rendering: The final stage of the process occurs inside the rendering subsystem where the final content is displayed to the user. This process is often referred to as “drawing to the screen” and may occur on the CPU, the GPU, or a combination of both.
(呈现，最后一步，与cpu,gpu交互，展示出图像到屏幕)
As we’ve mentioned, different websites use these subsystems in different ways. Even websites that provide similar functionality, for example some of the world’s largest news websites which provide comparable experiences on their home pages including headlines and video, have very different performance characteristics.
待确定：
...页面中当用js操作修改页面结构需要新呈现的过程应该是从上面结构中的javascript往下层面执行。
应该不是按照时间顺序来执行每一步的，在页面中按照已加载的dom元素来按元素执行所有步骤，从上往下刷页面。
dom的加载和页面的呈现步骤是交叉的。
脚本会阻断dom
http://www.nowamagic.net/webdesign/webdesign_HowBrowserLoadResource.php
由www.LcKey.com 提供支持
2650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
