文档阅读笔记

Appearance

HTML中的JavaScript ​

本章内容:

  • 使用<script>元素
  • 行内脚本与外部脚本的比较
  • 文档模式对 JavaScript 有什么影响
  • 确保 JavaScript 不可用时的用户体验

将JavaScript 引入网页，首先要解决它与网页的主导语言HTML的关系问题。在JavaScript早期，网景公司的工作人员希望在将JavaScript引入HTML页面的同时，不会导致页面在其他浏览器中渲染出问题。通过反复试验和讨论，他们最终达成了共识，即向网页中引入通用脚本能力。当初他们很多工作当初他们的很多工作得到了保留，并且最终形成了HTML规范。

2.1 <script>元素 ​

将 JavaScript 插入 HTML 的主要方法是使用<script>元素。<script>元素有下列8个属性。

  • async: 可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
  • charset: 可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
  • crossorigin：可选。配置相关请求的 CORS（跨源资源共享）设置。默认不使用 CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
  • defer: 可选。表示脚本应该在页面加载完成后执行。只对外部脚本文件有效。
  • integrity: 可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI）此属性允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network ）不会提供恶意内容。
  • language: 已废弃。最初用于表示代码块中的脚本语言，不过已经废弃。
  • 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关键字。

使用<script>元素的方式有两种：通过它直接在网页中嵌入JavaScript代码，或者通过它引用外部JavaScript文件。

  • 要嵌入行内JavaScript代码
html
<script>
  function sayHi() {
    console.log('Hi!')
  }
</script>

包含在<script>元素中的JavaScript代码会按照它们出现的顺序执行。在这些代码执行完毕之前,页面的其余内容不会被加载也不会被显示 。

需要注意,代码中不能出现<符号。 这是因为HTML解析器会将它解释为新元素的开始。如果希望使用<字符,则必须转义为&lt;。 也不能使用</script>字符串。 这是因为HTML解析器将</script>解释为<script>元素的结束。 如果希望使用 </script> 字符串,则必须转义为" <\/script>"。

  • 包含外部的 JavaScript 文件,需要使用 src 属性指定文件的 URL。
html
<script src="example.js"></script>
<script src="https://example.com/example.js"></script>

跟嵌入行内代码一样,外部脚本文件也会按照它们出现的顺序执行。页面也会被阻塞(阻塞时间也包含下载文件的时间)

另外,使用了src属性的<script>元素不应该包含其他脚本。如果两者都提供,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。

src属性可以是一个完整的URL,也可以是相对URL。如果是相对URL,则会相对于当前文档的URL来解析。如果是一个完整的 URL,这个URL可以与当前页面不在一个域中。

html
<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析这个资源时,会向指定的路径发送一个请求。这个请求不受浏览器同源策略限制,但返回的可执行代码则受限制.

来自外部域的代码会被当成加载它的页面的一部分来加载和解释。这个能力可以让我们通过不同的域分发JavaScript。不过，引用了放在别人服务器上的JavaScript文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一 个可信的来源。<script>标签的integrity属性是防范这种问题的一个武器，但这个属性也不是所有浏览器都支持。

不管包含的是什么代码，浏览器都会按照<script>在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。第二个<script>元素的代码必须在第一个<script>元素的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

2.1.1 标签的位置 ​

以前标签都放在页面的<head>元素中。不过，把<script>元素放在<head>元素中意味着必须等到全部的HTML都解析完成，才能开始执行脚本。如果脚本中包含操作DOM的代码，那么在脚本执行前，页面中的任何元素都不可见。所以现在通常将<script>标签放在<body>元素中页面内容的后面。

html
<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
    <!-- 这里是页面内容 -->
    <script src="example1.js"></script>
    <script src="example2.js"></script>
  </body>
</html>

2.1.2 推迟执行脚本 ​

defer属性表示脚本可以延迟到整个页面都解析完毕后再执行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

html
<script src="example1.js" defer></script>
<script src="example2.js" defer></script>

第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行。不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在 DOMContentLoaded 事件之前执行，因此最好只包含一个这样的脚本。

defer 属性只对外部脚本文件才有效。这是HTML5中明确规定的，因此支持HTML5的浏览器会忽略行内脚本的defer属性。

2.1.3 异步执行脚本 ​

async 属性表示应该立即开始下载脚本，但不应该妨碍其他页面的动作。不能保证脚本会按顺序执行，因此最好只包含一个这样的脚本。

html
<script src="example1.js" async></script>
<script src="example2.js" async></script>

在这个例子中，第二个脚本可能先于第一个脚本执行。因此，重点在于它们之间没有依赖关系。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。

异步脚本保证会在页面的load事件前执行，但可能会在 DOMContentLoaded之前或之后。

2.1.4 动态加载脚本 ​

通过JavaScript使用 DOM API 动态创建<script>元素，并插入到文档中，从而异步加载脚本。

javascript
let script = document.createElement('script')
script.src = 'gibberish.js'
document.head.appendChild(script)

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性。不过这样做可能会有问题，因为所有浏览器都支持createElement()方法，但不是所有浏览器都支持async属性。因此如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

js
let script = document.createElement('script')
script.src = 'gibberish.js'
script.async = false
document.head.appendChild(script)

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

html
<link rel="preload" href="gibberish.js" />

2.2 行内代码与外部文件 ​

通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。

  • 可维护性: JavaScript 代码如果分散到很多 HTML页面，会导致维护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的HTML页面来编辑代码。
  • 缓存: 如果多个页面使用同一个JavaScript文件，那么这个文件只需下载一次。当返回该页面时，由于文件被缓存了，就不必重新下载。这样可以加快页面加载的速度。
  • 适应未来: 通过外部文件，可以更方便地使用外部库。例如，如果想从另一个服务器加载 jQuery，只需更改一个文件路径，而不用在所有HTML页面中更改<script>元素。

2.3 文档模式 ​

<!DOCTYPE html> 声明帮助浏览器以标准模式渲染页面。

混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。这种约定并不合理，因为 混杂模式在不同浏览器中的差异非常大，不使用黑科技基本上就没有浏览器一致性可言。

2.4 <noscript>元素 ​

<noscript> 元素用于在浏览器不支持脚本时显示内容。 <noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。在下列两种 情况下，浏览器将显示包含在<noscript>中的内容：

  • 浏览器不支持脚本。
  • 浏览器支持脚本，但脚本被禁用。

任何一个条件被满足，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

html
<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
  </head>
  <body>
    <noscript>
      <p>This page requires a JavaScript-enabled browser.</p>
    </noscript>
  </body>
</html>

2.5 小结 ​

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到 HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可 以总结如下。

  • 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同 一台服务器上，也可以位于完全不同的域。
  • 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的 情况下，包含在<script>元素中的代码必须严格按次序解释。
  • 对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面 的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签 之前。
  • 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出 的次序执行。
  • 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异 步脚本不能保证按照它们在页面中出现的次序执行。
  • 通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启 用脚本，则<noscript>元素中的任何内容都不会被渲染。