Fatal编程技术网
  • javascript/
  • JavaScript:DOM加载事件、执行序列和$（document）.ready（）

JavaScript:DOM加载事件、执行序列和$（document）.ready（）

javascript jquery events dom

JavaScript:DOM加载事件、执行序列和$（document）.ready（）,javascript,jquery,events,dom,Javascript,Jquery,Events,Dom,我刚刚意识到，我对网页加载到浏览器时到底发生了什么缺乏基本知识 假设我有这样一个结构： <head> <script src="jquery.js" type="text/javascript"></script> <script src="first.js" type="text/javascript"></script> </head> <body> ... <script type="text/ja

我刚刚意识到，我对网页加载到浏览器时到底发生了什么缺乏基本知识

假设我有这样一个结构：

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>


...
//这里有更多的JS。。。
...
以下是我的问题：

  • 事情发生的顺序是什么？首先执行DOM，然后执行JS，反之亦然，还是同时执行（或者在JS文件完成下载后，不考虑DOM）？我知道脚本是按顺序加载的

  • 在Firebug的网络选项卡中，我看到
    DOMContentLoaded
    事件和
    load
    事件。触发
    DOMContentLoaded
    事件时是否触发
    $（document）.ready（）
    ？找不到这方面的任何具体信息（每个人都只提到“加载DOM时”）

  • “加载DOM时”的确切含义是什么？浏览器是否已下载并解析所有HTML/JS？还是仅仅是HTML

  • 是否可能出现以下情况：有一个
    $（document）.ready（）
    调用
    last.js
    中的代码，但在加载last.js之前运行？它最可能在哪里（在
    first.js
    或内联代码块中）如何防止这种情况发生？

    • 我想弄清楚什么时候发生什么以及什么取决于什么（如果有的话）的大局

  • 所有包含的脚本都是按它们出现在html中的顺序出现的，它们在解析html时被加载
  • 这意味着所有dom对象都已加载，并且都包含脚本和css。（图像可能还没有）
  • 见第2条
  • $（document）.ready（）只在加载了所有脚本和dom对象后才会得到调用，您应该没事了
    • 我应该帮你回答这个问题

    基本上： 首先加载所有数据（html），然后加载js 头部/身体中的代码，它不在函数中，也不在就绪状态或类似状态，而是先执行。从这里开始，它按顺序执行脚本

    需要注意的是，js优先于ie.css加载，因此从性能角度来看，您应该将js放在页面底部

    因此@4：您不需要阻止该场景，因为first.js总是在last.js执行之前被读取/执行。正如所见，Javascript被执行。通常，浏览器一看到
    标记就停止解析页面，下载并运行脚本，然后继续。这就是为什么通常建议将
    标记放在底部的原因：这样，当浏览器等待脚本下载时，用户就不会有空白页面

    但是，从Firefox3.5开始，脚本在后台下载，而页面的其余部分则呈现出来。在脚本使用
    document.write
    或类似的异常事件中，Firefox将根据需要进行备份和重画。我认为其他浏览器目前不会这样做，但如果它即将推出，我也不会感到惊讶，IE至少在
    标记中支持一个
    defer
    属性，该属性将延迟加载脚本，直到加载页面之后

    DOMContentLoaded
    就是这样：它在加载DOM时立即激发。也就是说，只要浏览器解析了所有HTML并在内部创建了一棵树。它不会等待图像、CSS等加载。DOM是您通常需要运行的所有Javascript，因此不必等待其他资源。然而，我相信只有Firefox支持
    DOMContentLoaded
    ；在其他浏览器中，
    ready（）
    

    Javascript保证按照它在HTML中出现的顺序运行，因此在尝试将其附加到事件之前，请确保定义了函数。
    非常有趣。感谢您的前瞻性观点！事实上，虽然将脚本放在底部会有所帮助，但它们仍然必须在加载页面之前执行。异步加载它们要好得多，这意味着即使您将它们放在顶部，浏览器也会继续解析页面并并行加载脚本。唯一的问题是你不再知道脚本的执行顺序。我在IE9上测试了一个aspx页面（从开发工具模拟），脚本从开始移动到结束，发现当脚本在head中时，加载时间更快。录制加载视频以测量用户体验。对我来说没有明显的赢家