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

我已经远离网页设计/开发很长一段时间了，现在已经开始重新进入它。我开始做的只是为了让它们工作，现在我又回到了它，我想更清楚地理解一些事情 - 包括浏览器请求DOM何时完全加载DOM，以及脚本放置在页面顶部和底部之间的区别。了解有关DOM和脚本执行的HTTP请求/响应

我意识到这是更多的http://doctype.com的职位，但我想我会从这里得到更多的技术性答案。我也想把这个社区维基做成这个，但是我还没有足够的观点。

请随时在这里纠正我 - 我的问题/假设：

当浏览器对页面的请求时，服务器与包含脚本的层次/顺序文档对象，CSS响应和HTML - 正确？
一旦收到，浏览器就会建立一个文档对象树 - 这是DOM准备好的时候，还是在浏览器的页面上开始渲染元素的时候？
在这方面，“何时加载DOM”和“何时DOM准备就绪”之间有什么区别？
把（java）脚本放在顶部（在head标签中）还是在底部（在</body>标签之前）有什么区别？
当浏览器加载所有资源（css，images，javascripts等）时，是否有一个DOM事件触发完全？我问这是因为有时我可能会有一个仍然由浏览器加载的背景图片，并且在它完成之前，我的Javascript动画已经开始执行。

感谢您花时间阅读本文，我期待您的回复！

来源

2010-08-30 magz

浏览器向服务器发送有条件和无条件的请求。（服务器响应查询和客户端渲染响应...有信息的吞吐量有限，并从用户（隐私设置&等等）

无条件要求：

客户端浏览器本地没有资源可用的缓存副本时会发出无条件请求在这种情况下，服务器是预计会返回资源一个 HTTP/200 OK响应。如果响应的标头允许它，则客户端可能会缓存此响应，以便在稍后重新使用它时以的顺序。如果浏览器稍后需要本地缓存中的资源，则将资源的标头检查为确定缓存副本是否仍为新鲜。如果缓存的副本是新鲜的，则则不会发出网络请求，并且客户端仅从缓存中重新使用资源。

条件要求：

如果浏览器以后需要的资源是在缓存中，但过去的到期日期是响应比其最大年龄到期（旧的或），然后客户端将作出到服务器的条件请求到确定先前的缓存响应是否仍然有效，并且应该被重用。条件请求包含和/或If-None-Match标头，其中向服务器指示浏览器在其缓存中已经具有的内容的哪个版本。该服务器可以指示客户端的副本仍然是新鲜通过返回HTTP/304未修改头，没有身体，也可以指示客户端的副本陈旧返回一个HTTP/200 OK 新回应版本的资源。

文档对象模型 - 是的信息的模型，因为它涉及到一个浏览器的请求/响应。在许多方面，ECMA/Javascript是作为访问页面元素的直接关系而诞生的，并成为许多浏览器对象（document.frm等）的默认DOM Library解决方案。但是，实施和支持在所有浏览器中都是非统一和稀疏的。

本质上，被加载的DOM只是一个定义，表示页面正在被渲染并且内容已被调用。这是访问DOM Object时不能指望的东西，所以这是不利的交互方法。通常，您应该使用就绪状态，这意味着DOM处于准备就绪状态并处于等待状态。

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

是和否:)没有真正的保证，但使用javascript/jquery，您可以使用body的onload事件来识别成功加载的页面的所有元素。这是一个狡猾的问题btw。没有真正的答案就我所知，除非是我弄错了你问什么...

来源

2010-08-30 22:14:43

感谢ü乔，这也帮助不少。我觉得自己像一个小菜一样，再次穿过这一切......但我宁愿觉得自己只是一个小菜，而不愿意继续不了解基本面！因此，如果在页面的顶部有脚本访问或修改某个HTML元素，那么当页面（以及所有资源被加载）或被抓取时它会运行吗？ – magz 2010-08-30 23:56:13

我们只能使用方法加载时，我知道它是否异步hapens – blackHawk 2016-11-18 05:30:07

为了更快的页面加载，我们把脚本放在body标签的底部 – blackHawk 2016-11-18 05:30:59

脚本变量与您的标记在线同步与标记（除了的浏览器的处理中执行，请参阅＃2 ），所以如果 - 例如 - 这些标签引用外部文件，它们往往会减慢页面的处理。（这是因为浏览器可以处理document.write语句，这会更改他们正在处理的标记。）
具有defer属性的脚本标记可能在一些浏览器上不会执行，直到DOM已完全渲染。自然，这些不能使用document.write。（类似地，有一个异步属性使脚本异步，但我对它的了解不多，或者它的支持程度如何;细节。）
在DOM加载（通过innerHTML和类似方法）之后，您分配给元素的内容中的脚本标记完全不会被执行，除非您使用像jQuery或Prototype这样的库来为您执行此操作。（除了Andy E指出的一个例外：在IE上，如果它们具有延迟属性，它将执行它们，但在其他浏览器中不起作用。）
如果通过实际脚本元素附加到文档元素＃appendChild，浏览器立即执行该脚本（如果你愿意，你可以愉快地移除该元素，该脚本已经被执行和处理）。（您通常会将这些添加到head元素中，但实际上它并不重要。）
在发生相关事件时，脚本内部的属性（）而不是脚本标记中的事件处理程序会执行。

原创作者 - 来自：When does the browser execute Javascript? How does the execution cursor move?

要回答你的最后一个问题 - 以及有时...

来源

2010-09-02 14:30:52

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

回答

相关问题