＜script＞元素

最新推荐文章于 2025-03-11 18:00:00 发布

sugar_master

最新推荐文章于 2025-03-11 18:00:00 发布

阅读量141

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/sugar_master/article/details/116518340

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在HTML页面中插入JavaScript的两种主要方法：内联和外部引用。详细讨论了<script>标签的async和defer属性，以及它们对脚本执行顺序的影响。解释了将脚本放在<head>或<body>末尾的不同效果，强调了延迟和异步脚本的使用场景。最后，提出了优化脚本加载以提升网页性能的最佳实践。

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

向html页面中插入JavaScript的主要方法，就是使用*<script>*元素.

HTML4.01 为其定义了6个属性：

async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset:可选。表示通过src属性指定的代码的字符集。很少使用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效。
src:可选。表示包含要执行代码的外部文件。
type:text/javascript 可以看成language的替代属性；表示编写代码使用的脚本语言的内容类型（也成为MIME类型）。

使用<script>的方式：

//直接在页面中嵌入JavaScript代码
<script type = "text/javascript">
	function sayHI() {
		alert("Hi !");
		alert("<\/script>");
	}
</script>
//在解释器对<script>元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示

//包含外部JavaScript文件
//通过<script>元素来包含外部JavaScript文件，那么src属性就是必须的。这个属性的值是一个指向外部JavaScript文件的链接
<script type = "text/javascript" src = "example.js"></script>
//或在XHTML文档中
<script type = "text/javascript" src = "example.js"/>
//src属性指向当前HTML页面所在域之外的某个域中的完整URL
<script type = "text/javascript" src = "http://www.somewhere.com/afile.js></script>
//注意：在访问自己不能控制的服务器上的JavaScript文件时要多加小心。

只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。即第一个<scritp>元素中包含的代码解析完毕后，第二个<script>包含的代码才会被解析。

<script>标签的位置

放在<head>元素中
目的是想把所有外部文件（包括CSS和JavaScript文件）的引用放在同一地方。
但是，这会导致浏览器必须等到全部JavaScript代码下载、解析和执行完毕后，才会呈现内容（<body> 标签），如果加载的JavaScript足够多，浏览器会出现明显的延迟。

现代Web应用程序一般把全部JavaScript引用放在<body>元素的后面:

!<DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page></title>
	</head>
	<body>
		<!-- 这里放内容 -->
		<script type = "text/javascript" src = "example1.js"></script>
		<script type = "text/javascript" src = "example2.js"></script>
	</body>
</html>

延迟脚本

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script type = "text/javascript" defer = "defer" src = "example1.js"></script>
		//defer 属性的用途是表明脚本会被延迟到整个页面都解析完毕后在进行
		<script type = "text/javascript" defer = "defer" src = "example2.js"><script>
		//设置defer属性相当于告诉浏览器：立刻下载，但延迟执行
	</head>
	<body>
		<!--这里放内容-->
	</body>
</html>

在上述例子中，尽管把<script>放在了<head>元素中，但其中包含的脚本会在浏览器遇到</html>标签之后再按照先后顺序执行。但现实当中，延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded时间触发前执行，因此，最好只包含一个延迟脚本。
~~怎么感觉回去比较好~~

异步脚本

<async> 与<defer>类似，但与之不同的是，并不能保证脚本按指定顺序执行。~~都不能那什么能？~~

<!DOCTYPE html>
<html>
	<head>
		<title> Example HTML Page </title>
		<script type = "text/javascript" async src = "example1.js"></script>
		<script type = "text/javascript" async src = "example2.js"></script>
	</head>
	<body>
		<!-- 这里放内容 -->
	</body>
</html>