（36-第二章20220219+a0816

`<script>`标签

“script”标签元素有八个属性：

async：表示立即开始下载脚本，但是但是不会阻止其他页面动作，只对外部脚本有效。[可省略]
charset：规定代码的字符集，但是几乎没有浏览器在乎它的值。[可省略]
crossorigin：配置相关请求的CORS（跨资源共享）设置，有两个值：
- 当设置为crossorigin=“anonymous”时，配置文件请求不必设置凭据标志。
- 当设置为crossorigin=“use-credentials”时，设置凭据标志，意味着出战请求会包含凭据。[可省略]
defer：等页面文档被解析完了并且显示出来之后，再解析脚本，只对外部脚本文件有效。（IE7以前，对网页中的代码也可以生效）[可省略]
integrity：用于比对签名的一个属性，比对失败则脚本不执行。[可省略]
language：浏览器都不用了，我懒得写了。
src：引入外部文件[可省略]
type：表示代码块中脚本语言的内容类型（也叫它MIME类型）。当出现type=“module“，就会把当前代码当为ES6模块，这个时候代码中才能使用import和export关键字！[可省略]

”script“标签就俩用：要么在网页里写代码；要么就引入外部js文件。

出现了第一段代码->是在网页（.html文件）里面写个js函数；

 <script>
        function SayHi(){
            console.log("Hi");
            console.log("<\/script>");//这里不能直接写script结束标签，需要在斜杠之前写个转义字符
        }
        SayHi()
    </script>

不能直接写script结束标签，会报错，解析器会提前结束script代码，需要加个\转义字符。

第二段代码->在网页中引入外部js文件。

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

解释外部文件也会消耗一定的时间。

原文用的阻塞时间：阻塞时间包括下载外部js的时间+解释外部js文件代码的时间；

在XHTML文件里可以不用写结束标签。

懒，自己看注意事项。

值得一提的是：如果script标签如果用了src属性，则标签内代码会被忽略；

script的src可以引用外部域的JS文件，所以src文件内容可以是以一个完整URL。URL指向的资源可以和HTML页面不在同一个域中如：

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

解析过程：

首先会想url发送get请求
如果是js文件，则刚开始的请求不受浏览器同源策略的限制
但是返回被执行的JS会受限制。
该请求依旧会受父页面HTTP/HTTPS协议的限制。

引入外部域代码会被当成自己页面的一部分来加载和解释；所以就可以引入不同域分发的JS。但是注意外域js文件是别人的，所以别人可以替换掉文件。所以前面的integrity属性就有用了，虽然这个属性不是所有浏览器支持。

如果script标签没有defer和async属性。则会逐行解释。

标签位置

就是讲了个：把script标签放body标签结束位置就行了。

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

推迟执行脚本

当script标签定义了defer属性。这时候：

浏览器会先下载文件
然后接着解析并加载页面
当页面被加载和解析完了，再回来执行js代码。

设置了defer虽然会在页面加载后再读取js文件代码，但他们也会在事件DOMContentLoaded事件之前执行，只适用于外部脚本。

异步脚本

当script标签定义了async属性，async与defer类似：

都会立即开始下载

但是不同的是ansync的脚本并不能保证按次序执行。异步脚本保证会在页面的load事件前执行。其他不保证……

动态加载脚本

通过DOM API，向DOM中动态添加script 然后通过dom操作实现加载脚本：

首先创建script元素，然后将它添加到DOM里

  <script>
        let script = document.createElement('script');
         script.src = './example.js';
        document.head.appendChild(script); 
    </script>

默认情况下，以上代码创建的script标签是以异步方式加载的，就像加了个async属性。所以可以这样写：

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

这样可以统一动态脚本的加载行为。

XHTML中的变化

可扩展超文本标记语言（XHTML，Extensible HyperText Markup Language）是将 HTML 作为 XML的应用重新包装的结果。

与 HTML 不同，在 XHTML 中使用 JavaScript 必须指定 type 属性且值为text/javascript，HTML 中则可以没有这个属性。

（因为不是重点，略。其实主要因为我懒，不想总结。）

废弃的语法

我也将它废弃了，又不用了。学它干嘛？

行内代码与外部文件

先讲了使用外部js文件的好处：

可维护性：一个窗口专门写HTML另一个窗口专门写JS不香嘛？而且写完JS还能应用到多个HTML文件里。
缓存：如果俩页面引用一个js文件，浏览器就利用缓存少加载一次文件，这不更快了？起飞!
适应未来：也没啥，我这个小白看了纯属扯淡。

具体讲了个SPDY/HTTP2的好处与实现，首先了解一下SPDY:

然后书讲到SPDY这个东西，会将可能会加载到的js文件都放入到浏览器的缓存内。这样会提高加载速度。

文档模式

IE5.5产生了文档模式的概念，使用doctype可以切换文档模式；

开始文档模式分两种：

混杂模式（quirks mode）

混杂模式可以让IE像IE5一样不标准。

标准模式（standards mode）

标准模式可以让IE有兼容标准的行为

但是主要区别在于CSS渲染方面，JS只是有一些关联的副作用。

开启混杂模式：不写<DOCTYPE>就开了。

开启标准模式：

在HTML文件开头加下列代码开启HTML4.0标准模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

在XHTML文件开头加下列代码开启XHTML标准模式：

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在HTML文件开头加下列代码开启HTML5标准模式：
```
<!DOCTYPE html> 
```

还有个准标准模式，因为没看见HTML5的代码。懒得搬运了。可以当作只有混杂模式和标准模式两种。

`<noscript>`元素

首先它解释的是：这个标签被用于不支持JavaScript的浏览器提供代替内容。

然后现在的情况是：所有浏览器都100%支持JavaScript。

懂吧……

测试代码（可以在chrome浏览器关闭javascript脚本实现）

<!DOCTYPE html>
<html>
 <head>
 <title>Example HTML Page</title>
 </head>
 <body>
 <noscript>
 <p>This page requires a JavaScript-enabled browser.</p>
 </noscript>
 </body>
</html>

好了这一小章节纯粹浪费时间……靠呗啦！

小结

JavaScript要么用<script>标签要么写个js文件然后用<script src="">引入js文件。

本章总结如下（开始搬运）

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