了解有关DOM和脚本执行的HTTP请求/响应

时间:2010-08-30 21:34:49

标签: html dom execution

我已经远离网页设计/开发很久很久了,最近又开始重新开始。我开始做的只是让它们工作,现在我又回到它,我想更清楚地理解事情 - 包括当浏览器请求DOM完全加载时,以及脚本位于页面顶部和底部之间的区别。

我意识到这更像是http://doctype.com的帖子,但我想我会从这里得到一个更技术性的答案。我也想把它变成一个社区维基,但我还没有足够的分数......

请随时在此纠正我 - 我的问题/假设:

  1. 当浏览器发出页面请求时,服务器会回复一个文档对象,其中包含脚本的层次结构/顺序,css和html - 是否正确?
  2. 一旦收到,浏览器就会构建一个文档对象树 - 这是在DOM准备就绪还是在浏览器中开始在页面上呈现元素时?
  3. 在这方面,“加载DOM时”与“DOM准备就绪”之间有什么区别?
  4. 在顶部(头部标签)或底部(</body>标签之前)放置(java)脚本有什么区别吗?
  5. 当浏览器加载完全所有资产(css,图像,javascripts等)时,是否会触发DOM事件?我问这个问题,因为有时候浏览器仍然会加载背景图片,在它完成之前,我的Javascript动画已经开始执行了。
  6. 感谢您花时间阅读本文,我期待您的回复!

2 个答案:

答案 0 :(得分:3)

  1. 浏览器向服务器发出有条件和无条件请求。 (服务器响应查询和客户端呈现响应...用户的信息吞吐量有限(隐私设置&amp;等)
  2. 无条件请求:

      

    无条件请求时   客户端浏览器没有   缓存的可用资源副本   本地。在这种情况下,服务器是   期望用a返回资源   HTTP / 200 OK响应。如果   响应的标题允许它,   客户端可以缓存此响应   以便稍后重复使用它。   如果浏览器以后需要资源   这是在本地缓存中   资源的标头被检查   确定缓存的副本是否仍然存在   新鲜。如果缓存的副本是新鲜的,   然后没有网络请求和   客户端只需重用资源   来自缓存。

    有条件请求:

      

    如果浏览器以后需要资源   这是在缓存中,但那   响应已过期(早于它的   max-age或过期日期),   然后客户会做一个   对服务器的条件请求   判断是否以前   缓存的响应仍然有效   应该重复使用。有条件的   请求包含If-Modified-Since   和/或If-None-Match标题   向服务器指示什么版本   浏览器已有的内容   在它的缓存中。服务器可以指示   客户的副本仍然是新鲜的   通过返回HTTP / 304 Not Modified   标题没有身体,或者它可以   表明客户的副本是   通过返回HTTP / 200确定陈旧   响应新版本的   资源。

    1. 文档对象模型 - 是与浏览器请求/响应相关的信息模型。在许多方面,ECMA / Javascript诞生为访问页面元素的直接关系,并成为许多浏览器对象(document.frm等)的默认DOM库解决方案。但是,实施和支持在所有浏览器中都是非统一且稀疏的。

    2. 本质上,正在加载的DOM只是一个定义,表示正在呈现页面并且正在调用内容。这是关于访问DOM Object所不能指望的,因此,它是不利的交互方法。通常,您应该使用就绪状态,这意味着DOM处于就绪和等待请求状态。

    3. 差异负载 - 客户端代码的执行顺序意味着它将被加载的位置。加载整个页面对象或加载所有内容后。

    4. 是和否。:)没有真正的保证,但是,使用javascript / jquery,您可以使用正文的onload事件来识别成功加载的页面的所有元素。这是一个棘手的问题。我的知识没有真正的答案,除非我误解你所问的......

答案 1 :(得分:2)

  1. 与标记内联的脚本标记与浏览器对该标记的处理同步执行(除了,参见#2),因此,如果 - 例如 - 这些标记引用外部文件,它们往往会减慢页面的处理。 (这样浏览器就可以处理document.write语句,这会改变它们正在处理的标记。)

  2. 在某些浏览器上,具有defer属性的脚本标记在完全呈现DOM之后才能执行。当然这些不能使用document.write。 (类似地,有一个异步属性使脚本异步,但我不太了解它或支持它的程度如何;详情。)

  3. 在DOM加载后(通过innerHTML和类似文件)分配给元素的内容中的脚本标记根本不会执行,除非您使用像jQuery或Prototype这样的库来为您完成。 (Andy E指出一个例外:在IE上,如果他们有defer属性,它将执行它们。在其他浏览器中不起作用。)

  4. 如果您通过Element#appendChild将实际脚本元素附加到文档,浏览器会立即执行该脚本(如果您愿意,您可以愉快地删除该元素,该脚本已被执行和处理)。 (你通常会将它们附加到head元素,但实际上它并不重要。)

  5. 当相关事件发生时,将执行属性()而不是脚本标记中的事件处理程序内的脚本。

  6. 原作者 - 来自:When does the browser execute Javascript? How does the execution cursor move?

    回答你的上一个问题 - 有时候......