javascript HTML 页面加载的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28635141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sequence in which HTML page loads?
提问by nikhil rao
What is the sequence in which a HTML page loads. Please see below a basic HTML outline -
HTML 页面加载的顺序是什么。请参阅下面的基本 HTML 大纲 -
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css"
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
<head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
What i know - (please correct me if i am not right)
我所知道的 - （如果我不正确，请纠正我）
head section is loaded first. and then body section loads.
首先加载头部部分。然后加载身体部分。
My questions -
1. Does body section begin to load only once head section is loaded completely?
2. Does css sheet1 load completely, and then only sheet2 and JS file start loading?
3. Does CSS files load in parallel? same with JS files..? or does CSS and JS file together load in parallel?
4. Since HQ* images are big files, it takes time to load. does button2 load and show up in page only once HQ1 and HQ2 is loaded completely?
5. Does downloading of HQ1 and HQ2 happen in parallel, or is it synchronous which is first HQ1 and then HQ2?
我的问题 -
1. 身体部分是否只有在头部部分完全加载后才开始加载？
2. css sheet1加载完全，然后只有sheet2和JS文件开始加载？
3. CSS 文件是否并行加载？与JS文件相同..？还是 CSS 和 JS 文件一起并行加载？
4. 由于 HQ* 图像是大文件，加载需要时间。只有在 HQ1 和 HQ2 完全加载后，button2 才会加载并显示在页面中吗？
5. HQ1和HQ2的下载是并行发生的，还是同步的，先HQ1再HQ2？
回答by jfriend00
The HTML page is parsed sequentially from beginning to end. As resources are encountered such as stylesheets, images or scripts, the browser fires off parallel requests for those resources.
HTML 页面从头到尾依次解析。当遇到样式表、图像或脚本等资源时，浏览器会触发对这些资源的并行请求。
Images and stylesheets are not considered blocking resources, meaning that the parsing of the rest of the page can continue while those resources are being fetched.
图像和样式表不被视为阻塞资源，这意味着在获取这些资源时可以继续解析页面的其余部分。
Script tags that are not marked deferor asyncare blocking and they must load and execute before the parsing of the rest of the page continues.
未标记defer或async阻塞的脚本标记，它们必须在页面其余部分的解析继续之前加载和执行。
Does body section begin to load only once head section is loaded completely?
身体部分是否只有在头部部分完全加载后才开始加载？
Yes. But it does not necessarily wait for all resources specified in the <head>tag. It may start parsing the <body>before all <head>resources have been fetched. But, all tags in the <head>section are parsed before it starts parsing the <body>section.
是的。但它不一定要等待<head>标记中指定的所有资源。它可能会在获取<body>所有<head>资源之前开始解析。但是，在<head>开始解析该<body>部分之前，该部分中的所有标签都会被解析。
Does css sheet1 load completely, and then only sheet2 and JS file start loading?
css sheet1加载完全，然后只有sheet2和JS文件开始加载？
No. Stylesheets are loaded in parallel and the page does not block further parsing waiting for a stylesheet to load.
不会。样式表是并行加载的，页面不会阻止进一步解析以等待样式表加载。
Does CSS files load in parallel? same with JS files..? or does CSS and JS file together load in parallel?
CSS 文件是否并行加载？与JS文件相同..？还是 CSS 和 JS 文件一起并行加载？
CSS files load in parallel. Multiple script files may be fetched in parallel, but further parsing will not proceed until a script file has been fetched and executed (unless it has an async or defer attribute). As a performance optimization, browsers may "look-ahead" at other resources in the page and may fetch them in parallel. For example, multiple script files may be fetched in parallel, even though their execution must be serially.
CSS 文件并行加载。可以并行获取多个脚本文件，但在获取并执行脚本文件之前不会进行进一步的解析（除非它具有 async 或 defer 属性）。作为性能优化，浏览器可以“先行”查看页面中的其他资源，并可以并行获取它们。例如，多个脚本文件可以并行获取，即使它们的执行必须是串行的。
Since HQ* images are big files, it takes time to load. does button2 load and show up in page only once HQ1 and HQ2 is loaded completely?
由于 HQ* 图像是大文件，加载需要时间。只有在 HQ1 和 HQ2 完全加载后，button2 才会加载并显示在页面中吗？
No, images are loaded asynchronously and do not block the loading of the rest of the page or HTML tags.
不，图像是异步加载的，不会阻止页面其余部分或 HTML 标记的加载。
Does downloading of HQ1 and HQ2 happen in parallel, or is it synchronous which is first HQ1 and then HQ2?
HQ1 和 HQ2 的下载是并行发生的，还是同步的，先是 HQ1，然后是 HQ2？
Images are loaded in parallel up to a point. A browser has certain connection limits and will only load up to N resources from the same server in parallel at once. In your simple web page, HQ1 and HQ2 would probably be loaded in parallel - though this is up to the browser implementation, not something in a specification.
图像被并行加载到一个点。浏览器有一定的连接限制，一次最多只能从同一服务器并行加载 N 个资源。在您的简单网页中，HQ1 和 HQ2 可能会并行加载 - 尽管这取决于浏览器实现，而不是规范中的内容。
What is the sequence in which a HTML page loads
HTML 页面加载的顺序是什么
So, in your sample HTML page:
因此，在您的示例 HTML 页面中：
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css">
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
</head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
Here's a sequence of operation:
下面是一个操作序列：
- Browser parses
<html>and<head>tags. - Browser encounters first
<link>tag, sees a reference to an external stylesheet and initiates a server request to download that external stylesheet. The browser does not wait for that request to finish. - Browser encounters second
<link>tag, sees a reference to an external stylesheet and initiates a server request to download that second external stylesheet. The browser does not wait for that request to finish. - Browser encounters first
<script>tag specifying an external script file. Browser initiates request from server for the external script file. - Browser may "look-ahead" and see next
<script>tag and also initiate the request for that external script file. - Since external
<script>resources are blocking resources, the official page parsing and execution cannot continue until the first script file has been fetched and executed. The browser may look ahead to see if the download of any other resources should be initiated. - The first script file finishes download. The browser executes that script.
- The second script file finishes download. The browser executes that script.
- At any point in this process if either of the stylesheets finish downloading, they are processed as soon as available.
- After second block script file is processed, page parsing can continue.
</head>and<body>tags are parsed.<button>button1</button>is parsed and added to the body DOM. The browser may do partial rendering at this point.- Both
<img>tags are parsed and fetches for their external images are initiated. - The second
<button>tag is processed and may be rendered. - The browser sees the end tags that signify the end of the page.
- At some point in the future, the images finish downloading and rendering is finished. Depending upon the images and the browser, the images may have been doing progressive rendering as they were downloading.
- 浏览器解析
<html>和<head>标记。 - 浏览器遇到第一个
<link>标记，看到对外部样式表的引用并启动服务器请求以下载该外部样式表。浏览器不会等待该请求完成。 - 浏览器遇到第二个
<link>标签，看到对外部样式表的引用，并启动服务器请求以下载第二个外部样式表。浏览器不会等待该请求完成。 - 浏览器遇到第一个
<script>指定外部脚本文件的标记。浏览器向服务器发起对外部脚本文件的请求。 - 浏览器可能会“向前看”并查看下一个
<script>标签，并且还会发起对该外部脚本文件的请求。 - 由于外部
<script>资源是阻塞资源，官方的页面解析和执行要等到第一个脚本文件被获取并执行后才能继续。浏览器可以提前查看是否应该启动任何其他资源的下载。 - 第一个脚本文件完成下载。浏览器执行该脚本。
- 第二个脚本文件完成下载。浏览器执行该脚本。
- 在此过程中的任何时候，如果任何一个样式表完成下载，都会尽快处理它们。
- 处理完第二个块脚本文件后，可以继续进行页面解析。
</head>和<body>标签被解析。<button>button1</button>被解析并添加到主体 DOM 中。此时浏览器可能会进行部分渲染。- 两个
<img>标签都被解析并开始获取它们的外部图像。 - 第二个
<button>标签被处理并且可以被呈现。 - 浏览器会看到表示页面结束的结束标记。
- 在未来的某个时刻，图像完成下载并完成渲染。根据图像和浏览器，图像可能在下载时进行了渐进式渲染。
As some others have mentioned, the Timeline section of the Network tab in the Chrome developer tools can be a very effective visual tool for showing you how the download of various page components works.
正如其他一些人所提到的，Chrome 开发人员工具中网络选项卡的时间轴部分可以是一个非常有效的可视化工具，用于向您展示各种页面组件的下载是如何工作的。
To illustrate what type of info is in the Network tab in the Chrome developer tools, here's a screenshot from loading a StackOverflow page. The bars on the right side show a timeline for when various resources were first requested and when they finished downloading.
为了说明 Chrome 开发人员工具的“网络”选项卡中的信息类型，以下是加载 StackOverflow 页面的屏幕截图。右侧的栏显示了首次请求各种资源以及完成下载的时间线。
As another resource, this answer load and execute order of scriptscontains a detailed description of how/when scripts are downloaded and includes the effects of async and defer attributes.
作为另一个资源，此答案加载和执行脚本的顺序包含有关如何/何时下载脚本的详细说明，并包括 async 和 defer 属性的效果。
回答by Alex
There is a reason why HTML documents are formed in a tree heirachy, the browser (render engine), will traverse through the tree parsing and appending elements as it finds them, and then traverses to the next level.
HTML 文档在树层次中形成是有原因的，浏览器（渲染引擎）会遍历树，在找到它们时解析并附加元素，然后遍历到下一个级别。
therefore a HTML page is drawn top down:
因此，一个 HTML 页面是自上而下绘制的：
Draw:
=========
-- <html>
| <head>
| ...
| </head>
| <body>
| <div>...</div>
| </body>
-- </html>
回答by blurfus
Just to be clear, let's not confuse the HTMLpage's header/body with the HTTPrequest's header/body.
为了清楚起见，我们不要将HTML页面的标题/正文与HTTP请求的标题/正文混淆。
It is true that the HTTPrequest's header is read first and the body second but it is all received in one HTTPresponse.
确实，HTTP首先读取请求的标头，然后读取正文，但所有这些都在一个HTTP响应中接收。
Similarly, the HTTPresponse contains the entire HTMLpage (with header/body tags).
同样，HTTP响应包含整个HTML页面（带有标题/正文标签）。
Now, to your question(s):
现在，对于您的问题：
The browser reads the HTMLpage line by line from top to bottom (first line to last line). As the browser is reading (aka parsing) the HTML page, it determines that it needs other resources (i.e. CSS, JS, JPG, GIF files, etc) and the browser makes additional requests to obtain those resources. It does so in parallel unless specified otherwise.
浏览器HTML从上到下（从第一行到最后一行）逐行读取页面。当浏览器正在读取（也就是解析）HTML 页面时，它确定它需要其他资源（即 CSS、JS、JPG、GIF 文件等），并且浏览器会发出额外的请求来获取这些资源。除非另有说明，否则它会并行执行。
