HTML页面加载的顺序？ [英] Sequence in which HTML page loads?
问题描述
HTML网页加载的顺序是什么？请参阅下面的基本HTML大纲 -
What is the sequence in which a HTML page loads. Please see below a basic HTML outline -
<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.
我的问题 -
1.身体部分开始加载只有头部完全加载？
2. css sheet1是否完全加载，然后只有sheet2和js文件开始加载？
3. CSS文件是否并行加载？与JS文件相同？或者CSS和JS文件一起并行加载？
4.由于HQ *图像是大文件，加载需要时间。仅在HQ1和HQ2完全加载后才执行button2加载并显示在页面中？
5.HQ1和HQ2的下载是并行发生还是同步，首先是HQ1，然后是HQ2？
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?
推荐答案
HTML页面从头到尾按顺序解析。当遇到资源时，例如样式表，图像或脚本，浏览器会触发对这些资源的并行请求。
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.
图像和样式表不被视为阻塞资源，
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.
未标记的脚本标记 defer 或 async 是阻塞的，他们必须在解析页面其余部分之前加载并执行。
Script tags that are not marked defer or async are blocking and they must load and execute before the parsing of the rest of the page continues.
身体部分开始加载仅头部加载
完全？
Does body section begin to load only once head section is loaded completely?
是的。但它不一定等待在< head> 标签中指定的所有资源。它可以在获取所有< head> 资源之前开始解析< body> 。但是，< head> 节中的所有标签在开始解析< body> 节之前都会被解析。
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.
css sheet1是否完全加载，然后只有sheet2和JS文件
开始加载？
Does css sheet1 load completely, and then only sheet2 and JS file start loading?
否。样式表并行加载，并且页面不会阻止等待样式表加载的进一步解析。
No. Stylesheets are loaded in parallel and the page does not block further parsing waiting for a stylesheet to load.
CSS文件是否并行加载？与JS文件相同？或者CSS和
JS文件并行加载？
Does CSS files load in parallel? same with JS files..? or does CSS and JS file together load in parallel?
CSS文件并行加载。可以并行获取多个脚本文件，但是在获取和执行脚本文件（除非它具有async或defer属性）之前，进一步的解析将不会继续进行。作为性能优化，浏览器可以预测页面中的其他资源并且可以并行地提取它们。
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.
由于HQ *图像是大文件，因此可以并行获取多个脚本文件，加载需要时间。只有在HQ1和HQ2完全加载后，button2
才加载并显示在页面中？
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?
否，图像被异步加载
HQ1和HQ2的下载是否并行发生，或者是it
同步，先是HQ1然后是HQ2？
Does downloading of HQ1 and HQ2 happen in parallel, or is it synchronous which is first HQ1 and then HQ2?
图像以并行方式加载到一个点。浏览器具有某些连接限制，并且只能同时从同一服务器并行加载最多N个资源。在您的简单网页中，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.
HTML网页载入的顺序是什么
What is the sequence in which a HTML page loads
因此，在您的范例HTML网页中：
So, in your sample HTML page:
<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>
以下是操作顺序：
- 浏览器解析
< html>和< head>标签。
- 浏览器遇到第一个
< link>标记，会看到对外部样式表的引用，并启动下载该外部样式表的服务器请求。浏览器不等待该请求完成。 - 浏览器遇到第二个
< link>标记，样式表，并启动服务器请求以下载第二个外部样式表。 - 浏览器遇到指定外部脚本文件的第一个
< script>标记。浏览器从服务器为外部脚本文件启动请求。 - 浏览器可以预览并查看下一个
< script> - 由于外部
< script>资源正在阻止资源，所以正式页面解析并且执行直到第一个脚本文件被读取并执行才能继续执行。浏览器可能会向前查看是否应启动任何其他资源的下载。 - 第一个脚本文件完成下载。浏览器执行该脚本。
- 第二个脚本文件完成下载。
- 在此过程中的任何一点，如果任一样式表完成下载，则会立即处理。
- 处理第二个块脚本文件后，页面解析可以继续。
-
< / head>和< ; body>标签被解析。 -
< button> button1< / button>添加到body的DOM。 -
< img>标签都会被解析，并会启动对外部图片的撷取 - 第二个
< button>标记已处理完毕，可以呈现。 - 浏览器会看到表示网页结尾的结束标记。
- 在将来的某个时候，图片完成下载并完成呈现。根据图片和浏览器的不同，图片可能在下载时正在进行渐进式渲染。
- 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.
正如其他人提到的， Chrome开发者工具中的网络标签的时间轴部分可以是一个非常有效的可视化工具，用于显示各种网页组件下载的工作原理。
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开发者工具的网络标签中，以下是加载StackOverflow页面的屏幕截图。右侧的栏显示了首次请求各种资源时以及下载完成时的时间表。
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.
另一个资源，此答案加载并执行脚本的顺序 包含如何/何时下载脚本以及包括异步和延迟属性的影响的详细说明。
As another resource, this answer load and execute order of scripts contains a detailed description of how/when scripts are downloaded and includes the effects of async and defer attributes.
这篇关于HTML页面加载的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
