script标签的位置

Posted by luoway on October 3, 2015

script标签写法

w3school: HTML <script> 标签

必需的 type 属性规定脚本的 MIME 类型。 在 HTML 4.01 中,script 元素的 “language” 属性不被赞成使用。 在 XHTML 1.0 Strict DTD 中,script 元素的 “language” 属性不被支持。

html5关于script标签的说明:W3C Recommendation 28 October 2014

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is “text/javascript”.

在HTML5中,script元素在无type属性时,默认为type="text/javascript"

script标签位置

1.置于<head>标签内。

2.置于<body>标签内。

错误放置:

3.置于<head>、<body>标签之外。

w3school: HTML DOM 节点

<head>元素是<html>元素的首个子节点

<body>元素是<html>元素的最后一个子节点

一个节点可拥有任意数量的子

因此script元素可以作为<html>的子节点,但它只能位于<head><body>之间。

由于现代浏览器的自动修复机制,错误的放置也能正确地执行。当然,理论上讲,浏览器执行自动修复必然会导致性能有损失。

使用JavaScript:alert()进行试验

我们可以使用javascript的alert()方法来暂停页面的执行。

试验html5代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
    <script>alert("1.我是head里的script");</script>		<!--1-->
</head>
<script>alert("2.我是head、body之间的script");</script>	<!--2-->
<body>
    <p>显示内容</p>
    <script>alert("3.我是body里的顶部script");</script>	<!--3-->
    <input type="button" value="点击" onclick="alert('我是body中的input绑定事件');"/>
    <script>alert("4.我是body里的底部script");</script>	<!--4-->
</body>
<script>alert("5.我是body之后的script");</script>		<!--5-->
</html>

试验浏览器:Firefox、Chrome

试验结果如<!-- -->注释所示。

遵循规则

浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

浏览器~加载,解析,渲染

关于加载顺序:当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。


script阻塞浏览器加载:

参考JavaScript 的性能优化:加载和执行,以及“Yahoo!前端优化规则”

无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响。

Web 开发人员一般习惯在<head>中加载外链的 JavaScript,接着用<link>标签用来加载外链的 CSS 文件或者其他页面信息。然而这种常规的做法却隐藏着严重的性能问题。

由于脚本会阻塞页面其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。

结论

script标签 正确放置位置:

  1. 置于<head>标签内。

  2. 置于<body>标签内。

  3. 置于<head><body>标签之间。

性能优化考虑,推荐放置位置:

  1. 置于<body>标签内。

浏览器顺序下载,并同时加载、解析、渲染html文件代码。

如果放在<body>里面的底部,等页面初始化完成,才去加载;

如果放在<head>里面,或其他位置,初始化页面的时候就会首先加载,执行并阻塞后面的代码,直到执行完毕,此时DOM还未加载完成,操作DOM可能发生错误。