HTML 中的 JavaScript

前言

在上一篇文章"什么是JavaScript？"中我们说到js作为一门和页面交互的语言。那如何把网页的主导语言HTML和JavaScript关联起来呢？在js早期，网景公司创造出了<script>元素，用来讲JavaScript插入到HTML中。

<script>元素

博主在看“红宝书”的时候，看到script标签居然有足足8个属性。如下：

• async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
• charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
• crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
• defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在 IE7 及更早的版本中，对行内脚本也可以指定这个属性。
• integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
• language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
• src：可选。表示包含要执行的代码的外部文件
• type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了。JavaScript 文件的 MIME 类型通常是"application/x-javascript"，不过给type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。

博主今年5月入行前端，个人认为在现在这个前端框架盛行的时代，平时的业务也不会接触到这么多属性，掌握 src属性就足以。其他看过有点印象，可能以后维护前后端不分离的项目的时候能用到。并且再好的web开发实践中部分属性也是不推荐使用的。

使用方法

使用的两种方法，一种就是在直接在标签内部嵌入js代码，另一种就是在标签的src属性里输入外部文件的URL。

有一点是值得注意 在使用别人服务器上的js文件时，必须要确认来源是可靠的，稳定。不然别人把文件一换，项目就可能因此跑不起来。

在最佳实践中通常认为，使用外部文件时更好的选择。理由如下：

• 可维护性。如果js分散到一个个HTML页面中，这会导致维护困难。然而放到一个js文件中就会极大提升可维护性。
• 缓存。浏览器会根据特定的设置缓存所有外部链接的js文件。如果两个页面用到同一个js文件，则该文件只会下载一次，意味着页面加载更快了。
• 适应未来 。使用外部链接的方式，就不用去考虑XHTML文件中转义字符带来的问题。

执行顺序

在没有async和defer关键字的影响下，不管包含什么代码，浏览器会按照<script>标签在页面中出现的顺序来依次解释它们。

标签位置

过去，所有的<script>标签都是写在head里面的，这就意味着需要把head里面的所有的js都下载、解析和解释完成才会开始渲染页面，这就会导致页面在首次加载的时候会出现长时间的白屏。为了解决这个问题，现代web应用通常会把js放在body里的页面元素之后，这样就会在处理js之前把页面渲染完成，显著提升了用户体验，感觉页面加载变快了。

<noscript>元素

当浏览器不支持脚本语言或者脚本语言的支持被关闭的时候就会去渲染<noscript>标签内的内容。现在感觉基本上不会遇到这种业务场景。