JavaScript/HTML 中的 JavaScript

JavaScript 语言最初是为了在浏览器中运行并处理用户界面的动态方面而引入的，例如：验证用户输入、修改页面内容（DOM）或用户界面外观（CSS），或者任何事件处理。这意味着 HTML 与 JS 之间必须存在一个互连点。HTML 元素 <script> 扮演着这个角色。它是一个普通的 HTML 元素，它的内容是 JS。

<script> 元素几乎可以出现在 HTML 文件中的任何位置，既可以在 <head> 中，也可以在 <body> 中。选择最佳位置只有几个标准；请参阅下方。

内部 JavaScript 与外部 JavaScript

<script> 元素要么直接包含 JS 代码，要么通过其 src 属性指向包含 JS 代码的外部文件或 URL。第一种变体称为 _内部 JavaScript_ 或 _内联 JavaScript_，第二种称为 _外部 JavaScript_。

在 _内部 JavaScript_ 的情况下，<script> 元素看起来像这样

<script>
  // write your JS code directly here. (This line is a comment in JS syntax)
  alert("Hello World!");
</script>

_内部脚本_ 的优势在于您的 HTML 和 JS 都在一个文件中，这对快速开发很方便。这通常用于暂时测试一些想法，以及在脚本代码很小或特定于该页面的情况下。

对于 _外部 JavaScript_，<script> 元素看起来像这样

<!--  point to a file or to a URL where the code is located. (This line is a comment in HTML syntax) -->
<script src="myScript.js"></script>
<script src="js/myScript2.js"></script>
<script src="https://example.com/dist/js/externallib.js"></script>
<script src="https://example.com/dist/js/externallib.min.js"></script>

<!-- although there is nothing within the script element, you should consider that the HTML5 spec  -->
<!-- doesn't allow the abbreviation of the script element to: <script src="myScript.js" />         -->

为 JavaScript 代码分离文件

将您的 JS 放在一个单独的文件中，对于大型程序来说是推荐的做法，尤其是对于那些在多个页面上使用的程序。此外，这种拆分支持分离关注点的模式：一个专家负责 HTML，另一个负责 JS。此外，它还支持页面内容（HTML）与其行为（JS）的分离。

总的来说，使用 _外部脚本_ 被认为是软件开发的最佳实践。

远程代码注入与本地库

使用以下示例

<script src="https://example.com/dist/js/externallib.min.js"></script>

您可以在本地 Web 项目中注入来自服务器 https://example.com 的远程维护代码。远程代码更新可能会破坏您的本地项目，或者可能将不需要的代码功能注入您的 Web 项目。另一方面，集中维护和更新的库由于错误修复而可以服务您的项目，这些错误修复会在您从远程服务器再次获取库时自动更新到您的项目中。

压缩与未压缩代码

压缩的 JavaScript 代码会压缩源代码，例如通过缩短综合变量，比如vImage为单个字符变量a。这会显着减小库的大小，因此减少网络流量和响应时间，直到网页准备好为止。对于开发和学习，将未压缩的库本地可用可能会有所帮助。

外部 JavaScript

有关更多详细信息，您可以参考 MDN ^[1]。

src 属性

在打开的 script 标签中添加 src="myScript.js" 表示 JS 代码将位于与 HTML 文件相同的目录中的名为 _myScript.js_ 的文件中。如果 JS 文件位于其他位置，则必须将 src 属性更改为该路径。例如，如果它位于名为 _js_ 的子目录中，则读取 src="js/myScript.js"。

type 属性

JS 不是 Web 开发的唯一脚本语言，但 JS 是客户端最常见的脚本语言（PHP 在服务器端运行）。因此，它被认为是 HTML5 的默认脚本类型。该类型的正式表示法为：type="text/javascript"。旧版本的 HTML 了解许多其他脚本类型。如今，它们都被评为 _遗留_。一些例子是：application/javascript、text/javascript1.5、text/jscript 或 text/livescript。

在 HTML5 中，规范指出 - 如果您使用 JS - 应从脚本元素中省略 type 属性 ^[2]，无论对于 _内部脚本_ 还是 _外部脚本_ 都是如此。

<!-- Nowadays the type attribute is unnecessary -->
<script type="text/javascript">...</script>

<!-- HTML5 code -->
<script>...</script>

async 和 defer 属性

旧浏览器仅使用一个或两个线程来读取和解析 HTML、JS、CSS 等。这可能会导致糟糕的用户体验（UX），因为加载 HTML、JS、CSS、图像等时会产生延迟时间。当页面第一次加载时，用户可能会觉得系统很慢。

当前浏览器可以并行执行许多任务。为了启动关于 JS 加载和执行的并行执行，<script> 元素可以用 async 和 defer 两个属性扩展。

属性 async 会导致异步脚本加载（与其他任务并行），并在它可用时立即执行。

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

defer 的作用类似。它与 async 的区别在于执行被推迟到页面完全解析后。

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

<script> 元素的位置

script 元素几乎可以出现在 HTML 文件中的任何位置。但是，有一些最佳实践可以加快网站速度 ^[3]。有些人建议将其放在关闭 </body> 标签之前。这会加快下载速度，并且还允许在渲染文档对象模型 (DOM) 时直接对其进行操作。但是，上述 async 和 defer 属性会启动类似的行为。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
</head>
<body>
  <!-- HTML code goes here -->
  <script src="myScript.js"></script>
</body>
</html>

<noscript> 元素

可能会发生用户出于安全或其他原因在其浏览器中禁用了 JS。或者，他们使用非常旧的浏览器，根本无法运行 JS。为了在这些情况下告知用户情况，存在 <noscript> 元素。它包含将在浏览器中显示的文本。该文本应该说明不会执行任何 JS 代码。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
  <script>
    alert("Hello World!");
  </script>
  <noscript>
    alert("Sorry, the JavaScript part of this page will not be executed because JavaScript is not running in your browser. Is JavaScript intentionally deactivated?");
  </noscript>
</head>
<body>
  <!-- HTML code goes here -->
</body>
</html>

XHTML 文件中的 JavaScript

XHTML 的语法比 HTML 更严格。这会导致一些细微的差异。

首先，对于 *内部 JavaScript*，需要使用以下示例所示的两行额外的代码来引入和结束脚本。

<script>
  // <![CDATA[
  alert("Hello World!");
  // ]]>
</script>

其次，对于 *外部 JavaScript*，需要使用 type 属性。

参考

↑ MDN: The script element
↑ WHATWG: The type attribute
↑ Yahoo: Best practices for speeding up your website

[1] MDN: The script element

[2] WHATWG: The type attribute

[3] Yahoo: Best practices for speeding up your website

[1]

[2]

[3]