哪些元素将首先加载到 html 页面中？

Which elements will load first in an html page?

提问by learner

I want to know which elements (html tags, scripts, styles, images) will load first when opening a web page?

我想知道打开网页时首先加载哪些元素（html 标签、脚本、样式、图像）？

Can anybody help me? Thanks in advance.

有谁能够帮助我？提前致谢。

回答by Grant Thomas

HTML pages are interpreted on the fly and read in their entirety from top to bottom - so, the first elements will load first, the last last.

HTML 页面被动态解释并从上到下完整地读取 - 因此，第一个元素将首先加载，最后一个元素将被加载。

For instance, if you place a script at the top of the bodythen it will be executed prior to any elements within the body loading; whereas if you place is at the end of the body, all elements within the body will load thenthe script will execute.

例如，如果您将脚本放在顶部，body那么它将在加载正文中的任何元素之前执行；而如果您放置在 的末尾，body则正文中的所有元素都将加载，然后脚本将执行。

The order of loading for external sources such as scripts and images, though, might differ from browser to browser (while for the most part following the same conventions) - the idea is that connections will be open to request these resources and then things like size, speed and latency come into question - and these are most often still sequential and blocking.

但是，外部源（例如脚本和图像）的加载顺序可能因浏览器而异（而大多数情况下遵循相同的约定） - 想法是将打开连接以请求这些资源，然后是大小等，速度和延迟成为问题 - 这些通常仍然是顺序和阻塞的。

回答by Aaron Digulla

There is no standard way; browsers are free to implement this in any way they like.

没有标准的方法；浏览器可以自由地以他们喜欢的任何方式实现这一点。

If you want to know how your browser does it, use a tool like Firebug, Chrome's Developer Tools or Safari Inspector. They can show the network traffic and in which order elements are downloaded.

如果您想知道您的浏览器是如何做到的，请使用 Firebug、Chrome 的开发人员工具或 Safari Inspector 等工具。它们可以显示网络流量以及下载元素的顺序。

Usually, the download order is the same as in the HTML document but browsers can open more than a single connection to a server. In that case, it might send 2 or 5 requests in document order but the server can respond in arbitrary order. Also some parts might be loaded from cache.

通常，下载顺序与 HTML 文档中的相同，但浏览器可以打开多个到服务器的连接。在这种情况下，它可能会按文档顺序发送 2 或 5 个请求，但服务器可以以任意顺序响应。还有一些部分可能是从缓存中加载的。

回答by BonyT

The html will load first obviously as this instructs the browser on the extended requirements: images, scripts, external stylesheets etc

html 将首先加载，因为这会指示浏览器扩展要求：图像、脚本、外部样式表等

After that, the load order is pretty random - multiple connections will be initiated by most browsers and the order in which they return cannot be predicted.

之后，加载顺序非常随机——大多数浏览器都会启动多个连接，并且无法预测它们返回的顺序。

回答by Harsh

Execution start from Top to bottom ...

执行从上到下...

回答by John Aldrin

Html and its shit go top bottom, scripts and css less read bottom to top. The code is written this way because each is part of a list and it is being set in descending order on one path; Ascending on the other path. The Journey can shift if your files are stacked differently, thus the argument of 'where shit goes'... So the Html divs down to a Head; And then the body sets us up. Set your javascript script tags in the area of the html itself using the script tags. This might seem a bit much but creating an id tag to a script in that area will set the script when that section is called for instance. Same goes with css and stuff. SO I think like that and typically get fast loads on some neat parallax pages I have on johnaldrin.net if anyone is interested. I always have no paintings and sample scripts to play with, custom ASP web forms... Digital ARt mixed with fun Meta tags, driving an SEO Engine I developed in .NET C#!

Html 及其狗屎从上到下，脚本和 css 从下到上阅读较少。代码是这样编写的，因为每个都是列表的一部分，并且在一个路径上按降序设置；在另一条道路上上升。如果您的文件堆叠不同，则旅程可能会发生变化，因此“狗屎去哪儿”的论点......所以 Html div 下降到一个头部；然后身体设置我们。使用脚本标签在 html 本身的区域中设置您的 javascript 脚本标签。这可能看起来有点多，但是在该区域中为脚本创建 id 标记将在调用该部分时设置脚本。css 和其他东西也是如此。所以我是这样认为的，如果有人感兴趣，我通常会在我在 johnaldrin.net 上的一些整洁的视差页面上快速加载。我总是没有绘画和示例脚本可以玩，自定义 ASP Web 表单......