相信大家或多或少接触过<script>标签，<script>标签是不可或缺的一部分，它允许我们在HTML文档中嵌入或引用JavaScript代码，以实现页面的动态交互和丰富功能。然而，正确且高效地使用<script>标签并非易事，本文将深入探讨其使用技巧及注意事项，并通过具体例子加以说明。
一、Script标签的基本用法
<script>标签主要有两种用途：嵌入JavaScript代码和引用外部JavaScript文件。
1. 嵌入JavaScript代码
直接在<script>标签内编写JavaScript代码是最基本的使用方式。例如：
<script>
document.write('Hello, World!');
</script>
这段代码会在页面加载时执行，输出“Hello, World!”。
2. 引用外部JavaScript文件
通过src属性，<script>标签可以引用外部JavaScript文件。例如：
<script src="script.js"></script>
这里的script.js是外部JavaScript文件的路径，浏览器会加载并执行该文件中的代码。
二、Script标签的注意事项
1. 放置位置
<script>标签可以放在<head>或<body>标签中，但出于性能考虑，通常建议将其放在<body>标签的末尾，以避免阻塞页面渲染。例如：
<body>
<!-- 页面内容 -->
<script src="script.js"></script>
</body>
2. async与defer属性
- async：表示脚本异步加载，不阻塞页面渲染，加载完成后立即执行，不保证执行顺序。
- defer：表示脚本延迟执行，直到页面解析完毕后才执行，但会按照在HTML中出现的顺序执行。
这两个属性仅适用于外部脚本，且不能同时使用。例如：
<script src="async-script.js" async></script>
<script src="defer-script.js" defer></script>
3. 脚本类型与字符编码
在HTML5中，<script>标签的type属性默认为text/javascript，通常可以省略。对于外部脚本，charset属性可以指定脚本的字符编码，但现代浏览器大多能自动检测，因此也较少使用。
4. 字符串与注释的处理
在<script>标签内编写代码时，需要注意避免使用</script>字符串作为内容的一部分，因为这会被浏览器错误地解析为标签的闭合。可以使用转义字符\来避免这个问题，例如：
<script>
const example = "script的闭合标签是<\/script>";
console.log(example);
</script>
5. 错误处理
如果<script>标签中的JavaScript代码出现错误，那么该错误后面的代码将不会被执行。但是，错误不会影响其他<script>标签中的代码执行。
三、具体例子
示例1：动态显示时间
<!DOCTYPE html>
<html>
<head>
<title>动态时间显示</title>
</head>
<body>
<p id="time"></p>
<script>
function updateTime() {
const now = new Date();
document.getElementById('time').innerText = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
这个例子中，<script>标签内嵌入了JavaScript代码，用于每秒更新页面上的时间显示。
示例2：使用async和defer
<!DOCTYPE html>
<html>
<head>
<title>async与defer示例</title>
</head>
<body>
<script src="async-example.js" async></script>
<script src="defer-example.js" defer></script>
</body>
</html>
在这个例子中，async-example.js将异步加载并执行，而defer-example.js将在页面解析完毕后按顺序执行。
四、总结
<script>标签是网页开发中不可或缺的工具，掌握其使用技巧和注意事项对于提升页面性能和用户体验至关重要。通过合理放置标签位置、使用async和defer属性、注意字符串与注释的处理以及错误处理，我们可以更有效地利用JavaScript为网页增添动态交互和丰富功能。
