Html 为什么有些开发人员将脚本标记放在文档的底部?

Html 为什么有些开发人员将脚本标记放在文档的底部?,html,Html,可能重复: 我见过HTML文档,开发人员将标记放在文档底部,我想知道为什么 我刚刚阅读了HTML4规范中关于。它没有说明何时以及如何加载脚本。因此,由web浏览器来处理它认为合适的问题 浏览器作者是否应该意识到同步加载脚本或以任何其他方式加载脚本会阻碍文档呈现,从而影响浏览体验 i、 e.作为web开发人员,将脚本放在标记中不是更好吗?将脚本标记放在文档顶部会阻止页面其余部分的加载;横幅广告脚本尤其如此。如果加载第三方脚本需要很长时间,则此后的任何DOM元素都会被延迟,导致页面出现空白/格式错

可能重复:

我见过HTML文档,开发人员将
标记放在文档底部,我想知道为什么

我刚刚阅读了HTML4规范中关于。它没有说明何时以及如何加载脚本。因此,由web浏览器来处理它认为合适的问题

浏览器作者是否应该意识到同步加载脚本或以任何其他方式加载脚本会阻碍文档呈现,从而影响浏览体验


i、 e.作为web开发人员,将脚本放在
标记中不是更好吗?

将脚本标记放在文档顶部会阻止页面其余部分的加载;横幅广告脚本尤其如此。如果加载第三方脚本需要很长时间,则此后的任何DOM元素都会被延迟,导致页面出现空白/格式错误,直到请求超时,或者最终加载内容。

这样,在JavaScript代码生效之前,文档将被完全显示。如果一个脚本需要时间,或者无法运行,或者无法访问,那么它不会让用户坐在空白页面前


此外,在body元素完全加载之前执行DOM操作可能会产生错误,即脚本需要解释(这可能比较昂贵),并且可能需要通过另一个HTTP请求进行检索。将它们放在文档的末尾可以首先加载页面的其余部分

获取并执行没有async或defer属性的脚本 紧接着,在浏览器继续解析页面之前

另请参见详细介绍的准备/阻塞周围区域。请注意,这是一个不断变化的编辑草稿;这些规则中的一些可能不在最终规范中,或者由所有用户代理强制执行

作为旁注,这种阻塞行为并不坏/错误。想想像这样的库,它确实属于
头部。它以允许正确应用CSS的方式改变DOM;如果并行执行,结果将不正确

  • JS脚本在页面加载中出现的位置执行。如果它位于页面顶部,则页面的其余部分在运行时不会加载,这意味着它将无法访问页面中的任何元素

  • 如果脚本需要时间运行(例如,它有一个慢循环,或者抛出一个
    警报()
    框,或者执行任何其他阻止执行的操作),那么页面加载的其余部分将延迟到它完成为止。如果脚本位于
    中,这可能会导致用户在脚本执行其操作时看到一个空白页面


  • 你是怎么得出这个结论的一般来说,独立的JS文件(而不是插件)倾向于自动执行;它们被加载,最后一行执行它们包含的任何代码。如果代码中的某些内容需要外部资源(图像、代码等等),那么浏览器的单个线程将暂停,直到脚本可以执行为止。这意味着在JS完成之前,主页上不会再加载任何代码,页面会挂起。这是一篇三年前的文章(IE8、Opera9和旧Chrome/WebKit)。现在的脚本不是基于jquery的吗(即文档加载时的回调)?因此,这基本上适用于外部脚本。重要的是,大部分用户仍然使用较旧的浏览器,在下载脚本之前,这些浏览器仍然可以/将阻止加载。我们不能因为人们不在最新更新中而让他们感到羞耻;)脚本阻止并行下载。如果你有太多的链接脚本文件在你的头,你可能会看到可怕的闪光的非风格的内容,而他们下载;在文档末尾添加它们可以避免此问题。这是一个浏览器软件的问题,不管HTML doctype如何,我不确定它是否会很快消失。回答这个问题的人的问题:如果你把你的js放在一个
    $(文档)中。准备好了{}
    ,这难道不能阻止所有这些负面影响吗?换句话说,在执行脚本之前,这不是要等待页面加载吗?@ilight-在正确的时间执行代码(这当然非常重要)与脚本的物理下载/解析是不同的。这需要时间,即使在脚本的某些部分被执行之前它不会产生可见的效果。这是HTML5特有的,尽管它回答了该版本的问题+1是的,它与HTML5有关(还添加了相关HTML5规范的链接),但大多数(所有?)浏览器似乎都遵循这些规则。在许多情况下,HTML5在编纂浏览器已经在做的事情方面做得更好。