javascript 简介

在Web开发中，<script> 标签是嵌入或引用JavaScript代码的核心元素。本文将详细探讨<script>标签的功能、位置、执行方式及相关最佳实践，帮助开发者更高效地使用JavaScript来增强网页的动态效果和交互性。

1. <script> 元素简介

<script> 标签用于在HTML文档中嵌入或引用JavaScript代码。通过内联代码或外部脚本文件，可以为网页添加动态交互、数据处理等功能。

• 内联脚本 ：直接在<script>标签内编写JavaScript代码。
• 外部脚本 ：通过src属性引用外部的JavaScript文件。

<script>
  console.log("Hello, World!");
</script>

<script src="script.js"></script>

2. 标签位置

<script> 标签的位置直接影响脚本的加载和页面的渲染顺序。

• 在<head>中 ：如果脚本放置在<head>部分，浏览器会先解析并执行脚本，这会阻塞页面的渲染，导致页面加载延迟。
• 在<body>底部 ：将脚本放在页面底部（</body>前）可以避免阻塞页面渲染，提高页面加载速度。

<!-- 推荐位置 -->
<body>
  <script src="footer-script.js"></script>
</body>

3. 推迟执行（defer）

defer属性用于延迟脚本的执行，直到HTML文档完全解析完成。这意味着页面内容会先渲染，脚本会按照顺序执行。

• 适用场景：加载外部脚本时，特别是依赖DOM结构的脚本。
• 特点 ：defer确保脚本不会阻塞页面渲染，且会按顺序执行。

<script src="script.js" defer></script>

4. 异步执行（async）

async属性使脚本立即异步加载并执行，加载过程不阻塞页面渲染。脚本执行顺序不保证，通常适用于独立脚本。

• 适用场景：不依赖DOM或其他脚本的脚本，如分析工具或广告。
• 特点：脚本加载和执行时不影响页面渲染，但执行顺序无法预测。

<script src="script.js" async></script>

5. 动态加载脚本

动态加载脚本通过JavaScript在页面加载后按需插入<script>标签。这可以有效减小初始页面的负担，提高加载速度。

示例：

let script = document.createElement('script');
script.src = 'dynamic-script.js';
document.body.appendChild(script);

动态加载脚本通常用于在页面交互后加载特定功能或库，避免不必要的初始加载。

6. XHTML中的变化

在XHTML中，<script>标签必须遵循严格的XML规则，必须闭合并显式声明type属性。与HTML5不同，XHTML对标签语法要求更为严格。

示例：

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

7. 废弃语法

随着Web标准的发展，<script>标签的一些属性和语法已经废弃，尤其是：

• language属性 ：在HTML4中，language属性用于指定脚本的语言，但HTML5中已废弃，现代浏览器默认处理JavaScript。
• 无type属性的脚本 ：虽然HTML5允许省略type="text/javascript"，但仍建议明确指定，以提高代码清晰度。

废弃示例：

<script language="javascript">console.log("Deprecated")</script>

8. <noscript> 标签

<noscript>标签用于在浏览器禁用JavaScript时显示的内容。如果用户的浏览器不支持或禁用了JavaScript，<noscript>中的内容会被呈现出来。

示例：

<noscript>
  Your browser does not support JavaScript or it is disabled.
</noscript>

<noscript>是确保网页可访问性的一个重要工具，尤其是在需要向不支持JavaScript的用户提供信息时。

9. 文档模式（Document Mode）

文档模式决定了浏览器如何解析和呈现HTML。尤其在Internet Explorer中，<script>标签的行为可能会受到文档模式的影响，导致脚本不兼容或无法执行。

• 标准模式：浏览器遵循HTML标准渲染页面。
• 兼容模式：浏览器模拟旧版浏览器的渲染方式，可能导致一些现代特性无法正常工作。

现代浏览器默认使用标准模式，而确保文档使用正确的<!DOCTYPE>声明是避免兼容性问题的关键

注: 在解释 HTML 中script会应用特殊规则但在XHTML中就没有这些规则，意味意

    if(a < b ){} 

这里的 < 会解释为 标签开始要避免这种错误可以换成

    if(a < b){}