网页的加载和执行顺序？

Question

我已经完成了一些基于Web的项目，但我对普通网页的加载和执行顺序没有太多考虑。但现在我需要了解细节。很难从Google或SO中找到答案，所以我创建了这个问题。

示例页面如下所示：

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

所以这是我的问题：

这个页面如何加载？
加载的顺序是什么？
什么时候执行JS代码？（内联和外部）
什么时候执行CSS（应用）？
$（文件）.ready什么时候执行？
请下载abc.jpg吗？或者只是下载kkk.png？

我有以下理解：

浏览器首先加载html（DOM）。
浏览器开始逐行从上到下加载外部资源。
如果满足<script>，则加载将被阻止并等待加载并执行JS文件，然后继续。
其他资源（CSS /图像）并行加载并在需要时执行（如CSS）。

或者是这样的：

浏览器解析html（DOM）并获取数组或类似堆栈结构的外部资源。加载html后，浏览器开始并行加载结构中的外部资源并执行，直到加载所有资源。然后，根据JS，DOM将根据用户的行为进行更改。

任何人都可以详细解释当你得到html页面的响应时会发生什么？这在不同的浏览器中有所不同？关于这个问题的任何参考？

谢谢。

编辑：

我用Firebug在Firefox上做了一个实验。它显示如下图：

Answer 1

根据你的样本，

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

大致的执行流程大致如下：

下载HTML文档
开始解析HTML文档
HTML解析到达<script src="jquery.js" ...
下载并解析jquery.js
HTML解析到达<script src="abc.js" ...
下载，解析并运行abc.js
HTML解析到达<link href="abc.css" ...
下载并解析abc.css
HTML解析到达<style>...</style>
解析和定义内部CSS规则
HTML解析到达<script>...</script>
内部Javascript被解析并运行
HTML解析到达<img src="abc.jpg" ...
下载并显示abc.jpg
HTML解析到达<script src="kkk.js" ...
下载，解析并运行kkk.js
HTML文档的解析结束

请注意，由于浏览器的行为，下载可能是异步和非阻塞的。例如，在Firefox中，此设置限制了每个域的同时请求数。

此外，根据组件是否已被缓存，可能不会在近期请求中再次请求该组件。如果组件已缓存，则将从缓存而不是实际URL加载组件。

解析结束并且文档已准备好并加载时，将触发事件onload。因此当onload被解雇时，$("#img").attr("src","kkk.png");被运行。所以：

文档准备就绪，onload被触发。
Javascript执行命中$("#img").attr("src", "kkk.png");
下载kkk.png并加载到#img

$(document).ready()事件实际上是在加载并准备好所有页面组件时触发的事件。了解更多信息：http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Edit - This portion elaborates more on the parallel or not part:

默认情况下，根据我目前的理解，浏览器通常以3种方式运行每个页面：HTML解析器，Javascript / DOM和CSS。

HTML解析器负责解析和解释标记语言，因此必须能够调用其他2个组件。

例如，当解析器遇到此行时：

<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>

解析器将进行3次调用，两次调用Javascript，一次调用CSS。首先，解析器将创建此元素并将其注册到DOM命名空间中，以及与此元素相关的所有属性。其次，解析器将调用将onclick事件绑定到此特定元素。最后，它将再次调用CSS线程将CSS样式应用于此特定元素。

执行是自上而下和单线程。 Javascript可能看起来是多线程的，但事实是Javascript是单线程的。这就是为什么在加载外部javascript文件时，主HTML页面的解析被暂停。

但是，CSS文件可以同时下载，因为CSS规则总是被应用 - 这意味着元素总是用最新的CSS规则重新绘制 - 从而使其解锁。

元素只有在解析后才能在DOM中使用。因此，在处理特定元素时，脚本始终位于窗口onload事件之后或之内。

像这样的脚本会导致错误（在jQuery上）：

<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>

因为解析脚本时，仍然没有定义#mydiv元素。相反，这将工作：

<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>

要么

<script type="text/javascript">/* <![CDATA[ */
  $(window).ready(function(){
                    alert($("#mydiv").html());
                  });
/* ]]> */</script>
<div id="mydiv">Hello World</div>

Answer 2

1）下载HTML。

2）逐步解析HTML。当达到资产请求时，浏览器将尝试下载资产。大多数HTTP服务器和大多数浏览器的默认配置是并行处理两个请求。 IE可以重新配置为并行下载无限数量的资产。 Steve Souders已经能够在IE上并行下载超过100个请求。例外情况是脚本请求阻止IE中的并行资产请求。这就是强烈建议将所有JavaScript放在外部JavaScript文件中并将请求放在HTML中的结束正文标记之前的原因。

3）解析HTML后，呈现DOM。 CSS几乎与所有用户代理中的DOM呈现并行呈现。因此，强烈建议将所有CSS代码放入文档的<head> </ head>部分中请求尽可能高的外部CSS文件中。否则，页面将呈现为DOM中CSS请求位置的出现，然后从顶部开始渲染。

4）只有在DOM完全呈现并且页面中所有资产的请求被解析或超时后，JavaScript才会从onload事件执行。 IE7，我不确定IE8，如果没有从资产请求收到HTTP响应，则不会快速超时资产。这意味着JavaScript内联到页面请求的资产，即写入未包含在函数中的HTML标记的JavaScript，可以阻止onload事件执行数小时。如果页面中存在此类内联代码，并且由于导致代码崩溃的命名空间冲突而无法执行，则可以触发此问题。

在上述步骤中，CPU密集度最高的是DOM / CSS的解析。如果您希望更快地处理页面，那么通过消除冗余指令并将CSS指令合并到尽可能少的元素引用中来编写高效的CSS。减少DOM树中的节点数也会产生更快的渲染速度。

请记住，您从HTML或甚至CSS / JavaScript资产中请求的每个资产都是使用单独的HTTP标头请求的。这会消耗带宽并需要按请求处理。如果要尽可能快地加载页面，请减少HTTP请求的数量并减小HTML的大小。通过将页面权重平均为180k，仅使用HTML，您就不会对用户体验任何好处。许多开发人员订阅了一些谬论，即用户在6纳秒内决定页面上的内容质量，然后从他的服务器中清除DNS查询并在不满意的情况下烧毁他的计算机，因此他们提供了最美好的可能页面250k的HTML。保持您的HTML简短和甜蜜，以便用户可以更快地加载您的页面。没有什么能像快速响应的网页那样改善用户体验。

Answer 3

在Firefox中打开您的页面并获取HTTPFox插件。它会告诉你所需要的一切。

在archivist.incuito上找到了这个：

http://archivist.incutio.com/viewlist/css-discuss/76444

当您第一次请求页面时，您的浏览器会向服务器发送GET请求，该服务器会将HTML返回给浏览器。然后浏览器开始解析页面（可能在返回所有页面之前）。

当它找到对外部实体的引用时，例如CSS文件，图像文件，脚本文件，Flash文件或页面外部的任何其他内容（在同一服务器/域上或不在同一服务器/域上），它准备制作对该资源的进一步GET请求。

但是，HTTP标准指定浏览器不应向同一域发出两个以上的并发请求。因此，它将每个请求放入队列中的特定域，并且在返回每个实体时，它将启动该域的队列中的下一个。

返回实体所需的时间取决于其大小，服务器当前正在经历的负载以及运行浏览器的计算机与服务器之间的每台计算机的活动。对于每个请求，这些机器的列表原则上可以是不同的，只要一个图像可能从英国经过大西洋从美国到达我，而来自同一服务器的另一个图像通过太平洋，亚洲和欧洲出来，这需要更长的时间因此，您可能会得到如下所示的序列，其中页面（按此顺序）引用三个脚本文件，以及五个不同大小的图像文件：

GET script1和script2; script3和images1-5的队列请求。

script2到达（它比script1小）：GET script3，queue images1-5。

script1到了; GET image1，队列图像2-5。

image1到达，GET image2，队列图像3-5。

由于网络问题，script3无法到达 - 再次GET脚本3（自动重试）。

image2到了，script3仍然不在这里; GET image3，队列图像4-5。

图像3到达; GET image4，队列image5，script3仍然在路上。

image4到了，GET image5;

image5到了。

script3到了。

简而言之：任何旧订单，取决于服务器正在做什么，互联网的其余部分正在做什么，以及是否有任何错误并且必须重新获取。这可能看起来像是一种奇怪的做事方式，但如果没有这样做的话，互联网（不仅仅是WWW）在任何程度的可靠性下工作都是不可能的。

此外，浏览器的内部队列可能无法按照它们在页面中出现的顺序获取实体 - 任何标准都不需要它。

（哦，不要忘记在浏览器和ISP使用的缓存代理中缓存，以减轻网络负载。）

Answer 4

如果您因为想要加快网站速度而提出这个问题，请查看有关Best Practices for Speeding Up Your Web Site的Yahoo页面。它有很多加速您网站的最佳实践。

Answer 5

Dynatrace AJAX Edition向您展示页面加载，解析和执行的确切顺序。

Answer 6

AFAIK，浏览器（至少是Firefox）在解析每个资源后立即请求它们。如果它遇到img标记，它将在解析img标记后立即请求该图像。甚至在它收到HTML文档的全部内容之前就已经存在了......那就是在发生这种情况时它仍然可以下载HTML文档。

对于Firefox，有适用的浏览器队列，具体取决于它们在about：config中的设置方式。例如，它不会尝试从同一服务器一次下载超过8个文件...其他请求将排队。我认为每个域限制，每个代理限制，以及其他东西，这些都在Mozilla网站上记录，可以在about：config中设置。我在某处看到IE没有这样的限制。

一旦下载了主HTML文档并解析了DOM，就会触发jQuery ready事件。然后，一旦下载并解析了所有链接的资源（CSS，图像等），就会触发load事件。它在jQuery文档中很清楚。

如果你想控制所有加载的顺序，我相信最可靠的方法是通过JavaScript。

Answer 7

选择的答案看起来不适用于现代浏览器，至少在Firefox 52上。我观察到的是，在HTML解析器到达元素之前发出加载资源（如css，javascript）的请求，例如

<html>
  <head>
    <!-- prints the date before parsing and blocks HTMP parsering -->
    <script>
      console.log("start: " + (new Date()).toISOString());
      for(var i=0; i<1000000000; i++) {};
    </script>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="abc.js" type="text/javascript"></script>
    <link rel="stylesheets" type="text/css" href="abc.css"></link>
    <style>h2{font-wight:bold;}</style>
    <script>
      $(document).ready(function(){
      $("#img").attr("src", "kkk.png");
     });
   </script>
 </head>
 <body>
   <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
   <script src="kkk.js" type="text/javascript"></script>
   </body>
</html>

我发现加载css和javascript资源的请求的开始时间没有被阻止。看起来Firefox有一个HTML扫描，并在开始解析HTML之前识别关键资源（不包括img资源）。

网页的加载和执行顺序？

问题描述投票：235回答：7

7个回答

Edit - This portion elaborates more on the parallel or not part:

最新问题

网页的加载和执行顺序？

问题描述 投票：235回答：7

7个回答

Edit - This portion elaborates more on the parallel or not part:

最新问题

问题描述投票：235回答：7