相关疑难解决方法(0)

网页的加载和执行顺序？

我已经完成了一些基于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>

Run Code Online (Sandbox Code Playgroud)

所以这是我的问题:

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

我有以下理解:

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

或者是这样的:

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

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

谢谢.

编辑:

我用Firebug在Firefox上做了一个实验.它显示如下图: 替代文字

html javascript css

239
推荐指数

4
解决办法

14万
查看次数

我应该在身体或html的头部写脚本吗？

我已经看到了两种方式,两种方式的实现工作只是结构有点不同.根据您的经验,哪个更好,为什么？

html javascript

136
推荐指数

3
解决办法

16万
查看次数

标签统计

html ×2

css ×1