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

时间:2012-10-08 11:57:39

标签: html

  

可能重复:
  Is it practically good to put JS files at the bottom of webpage?

我见过HTML文档,开发人员将<script src="xxx">标记放在文档的底部,并想知道原因。

我刚刚阅读了关于script tag的HTML4规范。它没有说明何时以及如何加载脚本。因此,Web浏览器可以根据需要处理它。

认为浏览器作者应该知道同步加载脚本或以任何其他方式阻碍文档呈现会影响浏览体验,这是不合理的吗?

即。是不是我们作为Web开发人员更好地将脚本放在<head>标签中?

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:3)

脚本需要解释(可能相对昂贵),并且可能需要通过另一个HTTP请求进行检索。将它们放在文档的末尾允许首先加载页面的其余部分。

  

获取并执行没有异步或延迟属性的脚本   立即,在浏览器继续解析页面之前。

https://developer.mozilla.org/en-US/docs/HTML/Element/script

另请参阅http://dev.w3.org/html5/spec/the-script-element.html,特别是有关准备/阻止的详细信息。请注意,这是编辑的草案;其中一些规则可能不在最终规范中,也可能由所有用户代理强制执行。

作为旁注,这种阻止行为不错/错。想象一下Modernizr这样的库, 属于head。它以允许正确应用CSS的方式改变DOM;它是否并行执行,结果不正确。

答案 2 :(得分:0)

通过这种方式,文档将在JavaScript代码启动之前完全显示。如果脚本需要时间或无法工作或无法访问,则不会让用户坐下在空白页面前。

此外,在body元素完全加载之前进行DOM操作会产生错误IE。

答案 3 :(得分:0)

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

  2. 如果脚本需要时间来运行(比如,它有一个慢循环,或者抛出一个alert()框,或者做了阻止执行的其他事情),那么页面加载的其余部分将会被推迟到完成。如果脚本位于<head>中,则可能导致用户在脚本执行操作时看到空白页。