一上来就从第二章讲起，是因为第一章讲的js历史发展，网上有很多。这是一个记录学习笔记的专栏，争取在Q4结束之前，能把整本书学完。像我这种学到后边忘记前边的人，还是烂笔头好用些。

本章学习内容

1.使用<script>标签
2.行内脚本与外部脚本的比较
3.文档模式对JavaScript有什么影响
4.确保JavaScript不可用时的用户体验

`<script>` 标签

常用的方法如下，一般情况下我会把script标签放到body的最后，解释器这样不会影响页面的渲染，也可以选择放在<head>标签中，但是多少都会影响页面的渲染，严重情况下会出现白屏。因项目而议吧。

注：浏览器解析到''标签才开始渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" >
        function sayHi (){
            console.log('hi World~')
        }
    </script>
    <script src="test.js"></script>
</body>
</html>

1.`<script>`标签属性

async：可选。表示立即下载该脚本，但不阻止其他脚本，只对脚本外部脚本有效。

<script src="test.js" acync="asyc" /> //表示该外部注入的js异步加载

charset：可选。指定src脚本的代码字符集

<script src="test.js" charset="utf-8" />

crossorigin：可选。配置相关请求的跨域设置。服务器要允许跨站获取文件,即access-control-allow-origin: *

<script crossorigin='anonymous'src='https://xxxx.com/test.js' />
//anonymous——配置文件请求不需要设置凭据标志（token等等） 服务器返回需要加上Access-Control-Allow-Origin
<script crossorigin src='https://xxxx.com/test.js' />//设置一个空的值，如 `crossorigin` 或 `crossorigin=""`，和设置 `anonymous` 的效果一样。
<script crossorigin='use-credentials' src='https://xxxx.com/test.js' /> //use-credentials-需要设置凭据标志（token等等）

defer：可选。表示延迟到文档全部解析完成后在执行该脚本。只对外部脚本有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="test.js" defer></script>  //当控制台打印出 ‘hi World’ 后执行这个脚本
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" >
        function sayHi (){
            console.log('hi World~')
        };
        sayHi()
    </script>
   
</body>
</html>

integrity：可选。允许比对接收到的资源和指定的加密签名，验证子资源的完整性。如果接收到的资源签名不匹配，页面报错该脚本也不在执行。该属性可以确保内容分发网络不会提供恶意内容。

首先服务器需要开启内容安全策略，即 Content-Security-Policy

Content-Security-Policy: require-sri-for script;
//加载script时需要进行校验

<script src="https://www.xxxx.com/xxx.js" 
   integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/g7cqj81W2McEMx5CKOszxdb8jg" crossorigin="anonymous"></script>
//integrity的值为src文件进行base64编码的值,可网上搜索在线转换器即可

动态加载脚本

let script = document.createElement('script');
script.src = 'test.js';
script.async = false; //如果不设置async这种方式加载脚本会默认为异步加载，而且不是所有浏览器都支持async属性，如果需要用这种方式加载，可以明确设置async = false
document.head.appenChild(script)

行内代码与外部文件

外部文件的有点：

1.可维护性：js代码不必分散在各个角落，难以维护。

2.缓存：浏览器会根据特定的设置缓存所有外链的js文件，如果两个页面都用到同一文件，则该文件只会下载一次。

3.适应未来：通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中，预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。比如，第一个页面包含如下脚本：

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

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

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

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

...

后续页面可能包含如下脚本：

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

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

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

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

...

在初次请求时，如果浏览器支持 SPDY/HTTP2，就可以从同一个地方取得一批文件，并将它们逐个放到浏览器缓存中。从浏览器角度看，通过 SPDY/HTTP2 获取所有这些独立的资源与获取一个大 JavaScript 文件的延迟差不多。在第二个页面请求时，由于你已经把应用程序切割成了轻量可缓存的文件，第二个页面也依赖的某些组件此时已经存在于浏览器缓存中了。当然，这里假设浏览器支持 SPDY/HTTP2，只有比较新的浏览器才满足。如果你还想支持那些比较老的浏览器，可能还是用一个大文件更合适。

文档模式

混杂模式：所有浏览器都一样省略文档开头的doctype作为开关。

标准模式：可以通过一下几种方式声明

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

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

<!-- HTML5 -->
<!DOCTYPE html>

准标准模式：

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

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

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

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

文档模式不同，主要的影响就是样式不同，js也有些关联影响或称为副作用。

总结：

JavaScript是可以通过<script>标签混入到html代码中，也可以通过src属性引用外部文件，在不使用defer和async属性的情况下，浏览器会严格的一次按照顺序进行解释，且将解释到的<script>标签时，会把里边的代码或文件解释完毕，才继续进行。

第二章 HTML中的JavaScript

本章学习内容

<script> 标签

1.<script>标签属性

动态加载脚本

行内代码与外部文件

文档模式

总结：

`<script>` 标签

1.`<script>`标签属性