HTML 中的 JavaScript

一、 script 标签

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

async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载，只对外部脚本有效。
charset：可选。使用 src 属性指定的代码字符集，很少使用，大多数浏览器不在乎它的值。
crossorigin：可选。配置相关请求的 CORS（跨域资源共享）设置。默认不使用 CORS 。crossorigin=“anonymous” 配置文件请求不必设置是凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出战请求会包含凭据。
defer：可选。表示脚本延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源的完整性（SRI）。如果接受到的资源的签名与这个属性指定的签名不匹配，则页面报错，脚本不会执行。这个属性可以确保内容分发网络（CDN）不会提供恶意内容。
src：可选。表示包含要执行的代码的外部文件。
language：可选。不常用。
type：表示代码块中脚本语言的内容类型（也叫MIME类型）。按照惯例，这个值始终都是"text/javascript"，尽管这个写法已经废弃。

1. 嵌入行类文件，直接放在<script>元素中就行。

<script>
   function sayHi () {
     console.log('Hi!')
   }
</script>

包含在标签内的代码会被从上到下解释。在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。

2. 要包含外部的JavaScript，就必须使用 src 属性。这个属性的值就是一个 URL ，只想包含的JavaScript 代码的文件。

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

与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。（阻塞时间也包含下载文件的时间）

另外，使用了 src 属性的 <scirpt>元素不应该再在标签内在包含其他的JavaScript代码。如果两者都有的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

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

3. 标签位置

过去，所有的<script>元素都被放在页面的<head>标签内。这种做法的主要目的就是把外部的 CSS 和 JavaScript 文件都集中在一起。不过，把所有JavaScript文件都放在<head>里，也就意味着必须把所有的JavaScript代码都下载，解析和解释完成之后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为了解决这个问题，通常将所有的JavaScript引用放在<body>元素中的页面内容后面。

这样一来，页面会在处理JavaScript代码之前完成渲染。用户会感觉页面加载更快了。

4. 推迟执行脚本

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

若添加 defer 属性，脚本会被延迟到整个页面都解析完毕之后再执行，且第一个延迟的脚本会在第二个被延迟的脚本之前执行。

defer 属性只对外部脚本文件才有效，浏览器会自动忽略行内脚本的 defer 属性。要延迟的脚本放在页面底部比较好。

5. 异步执行脚本

async属性与 defer类似。两者都只适用于外部脚本，都会告诉浏览器立即开始下载。不过与 defer 不同的是，标记为 async 的脚本不保证能按照他们出现的次序执行。

二、行内代码与外部文件

尽可能的将JavaScript文件放在外部文件中。

可维护性高
缓存：浏览器会根据特定的设置缓存外部链接的JavaScript文件，这意味着如果两个页面用到一个文件，则该文件只需要下载一次。这意味着页面加载会更快。

三、 `<noscript>` 元素

<noscript>元素可以包含任何出现在 body 中的 HTML元素，<script> 除外。在下列两种情况下，浏览器将先hi包含在<noscript> 中的内容：

浏览器不支持脚本
浏览器对脚本的支持被关闭

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

四、总结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript代码嵌入到 HTML 页面中，也可以用于引用保存在外部文件中的JavaScript。

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

JS读书笔记

HTML 中的 JavaScript

一、 script 标签

二、 行内代码与外部文件

三、 <noscript> 元素

四、 总结

二、行内代码与外部文件

三、 `<noscript>` 元素

四、总结