关于<script>标签元素的重点知识

最新推荐文章于 2021-01-17 15:31:50 发布

原创最新推荐文章于 2021-01-17 15:31:50 发布 · 997 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JScript #ECMAScript

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于<script>标签元素的重点知识：

一.该标签由Netscape公司创造，并随后被列入HTML规范。

二.常用的属性只有四个：type、src、async（IE似乎不支持）、defer（个别浏览器不支持）

type属性的可选值有：text/javascript、text/ecmascript、application/javascript、application/ecmascript等，但考虑到约定俗成和最大限度的浏览器兼容性，最好（其实是一定）要设置为text/javascript，如果不设置type属性，默认值也为text/javascript。

src属性用于包含外部脚本文件，其值为外部脚本文件的URL。包含外部脚本文件的<script>标签有如下两种写法。

1.省略结束标签</script>，不推荐这种写法，因为这种语法不符合HTML规范，而且也可能得不到某些浏览器（如IE）的正确解析。

例：

<script type="text/javascript" src="example.js" />

2.带有结束标签</script>，推荐使用这种写法。

例：

<script type="text/javascript" src="example.js"></script>

另外，关于src属性还有如下两点值得一提：

1.外部JavaScript文件的扩展名[.js]只是一种惯例，并非必须，因为浏览器不会去检查JavaScript外部文件的扩展名。（但服务器通常还是需要这个扩展名的）

2.src属性还可以包含来自外部域的JavaScript文件，如

<script type="text/javascript" src="http://www.baidu.com/example.js"></script>

以上两点知道就行了，不要在实际项目中实践。No zuo No die.

三.关于<script>标签在页面中的放置位置

按照惯例是要放在<head>元素中，这种惯例做法的最主要目的是将页面的外部引用文件（CSS和JavaScript）都放在相同的地方，便于管理。但这种做法有一个弊端，就是只有在所有JavaScript代码都被加载和解析后才能呈现页面内容（浏览器遇到<body>标签后才开始呈现页面内容），也就是说，假如该页面有大量JavaScript代码需要加载和解析的话，那么页面在浏览器中呈现的时候会有一个明显的延迟，延迟期间页面会一片空白，导致用户体验下降。所以现代Web应用流行的做法是把<script>标签放在<body>元素中页面内容的后面（即</body>前面）。当然如果用前面提到的defer属性，也可以解决上述问题，但在个别浏览器中，还没有提供对defer属性的支持，因此保险起见，最佳选择还是将脚本放在页面地步。