Javascript 网页的加载和执行顺序？_Javascript_Html_Css

Javascript 网页的加载和执行顺序？

javascript html css

Javascript 网页的加载和执行顺序？,javascript,html,css,Javascript,Html,Css,我做过一些基于web的项目，但我没有过多考虑普通web页面的负载和执行顺序。但现在我需要知道细节。很难从谷歌找到答案，所以我提出了这个问题示例页面如下所示： <html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="abc.js" type="text/javascript"> </script>

我做过一些基于web的项目，但我没有过多考虑普通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>


h2{字体宽度：粗体；}
$（文档）.ready（函数（）{
$（“#img”）.attr（“src”、“kkk.png”）；
});

下面是我的问题：

这个页面如何加载

装载的顺序是什么

JS代码何时执行？（内部和外部）

什么时候执行（应用）CSS

$（document）.ready何时开始执行

会下载abc.jpg吗？还是只下载kkk.png

我的理解如下：

浏览器首先加载html（DOM）

浏览器开始逐行从上到下加载外部资源

如果满足

，加载将被阻止，并等待JS文件加载并执行，然后继续

其他资源（CSS/图像）并行加载，并在需要时执行（如CSS）

或者是这样的：

<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（DOM）并以数组或堆栈式结构获取外部资源。加载html后，浏览器开始并行加载结构中的外部资源并执行，直到加载所有资源。然后，DOM将根据用户的行为（取决于JS）进行相应的更改

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

谢谢

编辑：

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

根据您的样品

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

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

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

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

元素只有在解析后才能在DOM中使用。因此，当使用特定元素时，脚本总是放在window onload事件之后或之内

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

或

/**/
你好，世界

如果你问这个问题是因为你想加速你的网站，请查看雅虎的网页。它有许多加速网站的最佳实践。

1）下载HTML

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

3）解析HTML后，将呈现DOM。在几乎所有的用户代理中，CSS的呈现与DOM的呈现是并行的。因此，强烈建议将所有CSS代码放入外部CSS文件中，这些文件在文档的部分中要求尽可能高。否则，页面将呈现到DOM中CSS请求位置，然后从顶部重新开始呈现

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

在上述步骤中，最需要CPU的是DOM/CSS解析。如果你想让你的页面处理得更快，那么就通过消除冗余指令并将CSS指令整合到尽可能少的元素引用中来编写高效的CSS。减少DOM树中的节点数也将提高渲染速度

请记住，从HTML甚至CSS/JavaScript资产请求的每个资产都是通过单独的HTTP头请求的。这会消耗带宽，并且每个请求都需要处理。如果您希望尽可能快地加载页面，那么请减少HTTP请求的数量并减小HTML的大小。仅从HTML的页面平均重量为180k，这并没有给用户体验带来任何好处。许多开发人员都相信这样一种谬论，即用户在6纳秒内就决定了页面内容的质量，然后从服务器上清除DNS查询，如果不高兴，就会烧掉计算机，因此取而代之

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

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

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