猿问

网页的加载和执行顺序？

网页的加载和执行顺序？

我做过一些基于Web的项目，但是我不太关心普通网页的加载和执行顺序。但现在我需要知道细节。很难从谷歌找到答案，所以我提出了这个问题。

示例页面如下所示：

<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>

以下是我的问题：

  1. 这个页面是如何加载的？
  2. 装载的顺序是什么？
  3. 何时执行JS代码？(内联和外部)
  4. CSS什么时候执行(应用)？
  5. 什么时候执行$(Document)？
  6. 会下载abc.jpg吗？还是只是下载kkk.png？

我的理解如下：

  1. 浏览器首先加载html(DOM)。
  2. 浏览器开始从上到下逐行加载外部资源。
  3. 如果

    <script>

    满足时，加载将被阻塞，等待加载并执行JS文件，然后继续。
  4. 其他资源(CSS/映像)将并行加载，并在需要时执行(如CSS)。

或者是这样：

浏览器解析html(DOM)并以数组或类似堆栈的结构获取外部资源。加载html后，浏览器将并行加载结构中的外部资源并执行，直到加载所有资源为止。然后，DOM将根据用户的行为更改，具体取决于JS。

有人能详细解释一下当您得到html页面的响应时会发生什么吗？这在不同的浏览器中不同吗？有关于这个问题的参考资料吗？

谢谢。

编辑：

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


守着一只汪
浏览 974回答 3
3回答

凤凰求蛊

1)下载HTML。2)HTML是逐步解析的。当到达资产请求时，浏览器将尝试下载该资产。大多数HTTP服务器和大多数浏览器的默认配置是只并行处理两个请求。IE可以被重新配置为并行下载无限数量的资产。SteveSouders能够在IE上并行下载100多个请求。例外是脚本请求阻止IE中的并行资产请求。这就是为什么强烈建议将所有JavaScript放在外部JavaScript文件中，并将请求放在HTML中关闭主体标记之前。3)一旦解析了HTML，就会呈现DOM。CSS与几乎所有用户代理中的DOM呈现并行。因此，强烈建议将所有CSS代码放入文档的<head></head>部分中请求尽可能高的外部CSS文件中。否则，页面将呈现到DOM中CSS请求位置的出现，然后呈现从顶部开始。4)只有在DOM被完全呈现并且页面中所有资产的请求被解析或超时之后，JavaScript才会从onload事件中执行。如果没有从资产请求接收HTTP响应，IE7(我不确定IE8)不会很快超时资产。这意味着JavaScript内联到页面所请求的资产，即写入不包含在函数中的HTML标记的JavaScript，可能会在数小时内阻止onload事件的执行。如果该页中存在此类内联代码，并且由于导致代码崩溃的命名空间冲突而无法执行，则会触发此问题。在上面的步骤中，CPU最密集的步骤是解析DOM/CSS。如果您希望您的页面处理得更快，那么通过消除冗余指令和将CSS指令合并到最少可能的元素引用来编写高效的CSS。减少DOM树中的节点数量也会产生更快的呈现。请记住，您从HTML甚至CSS/JavaScript资产中请求的每个资产都是使用单独的HTTP头请求的。这消耗了带宽，需要处理每个请求。如果希望尽可能快地加载页面，那么就减少HTTP请求的数量，并减少HTML的大小。仅从HTML中将页面重量平均为180 k，这对您的用户体验没有任何好处。许多开发人员都认同这样一种谬误：用户在6纳秒内就决定了页面上内容的质量，然后清除服务器上的DNS查询，如果不高兴就烧掉他的计算机，因此他们提供了250 k HTML的最漂亮的页面。保持您的HTML简短和甜蜜，以便用户可以加载您的网页更快。没有什么比快速响应的网页更能改善用户体验了。
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JavaScript
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答