博客
zyzcos.gitee.io
第二章：HTML中的JavaScript
2.1 script 元素
用于将JavaScript插入到网页中。
- async:可选属性。表示立即开始下载脚本，但不会组织其他页面动作。【
异步】【支队外部脚本文件有效】 - charset:可选属性。指定代码字符集，很少使用，因为浏览器不在乎他的值
- crossorigin:可选属性。配置相关请求的CORS（跨源资源共享）
- defer:可选属性。表示脚本可以延迟到文档完全被解析后再执行【只对外部脚本文件有效】
- integerity:可选属性。允许对比接收到的资源和指定的加密签名以验证字子元完整性。可以用于确保内容的分发网络不会提供恶意内容
- language:废弃属性。
- src:可选属性。表示包含要执行的代码的外部文件
- type:可选属性。一般值为
text/javascript，当值为module时，代码中可以出现import``export关键字
-
当没有使用
async``defer时，浏览器都会按照script标签出现的顺序依次解析。 -
script标签一般放置在后面，因为这样可以先加载页面静态内容，再加载JS，用户会感觉
页面加载更快
defer属性，表示脚本在执行的时候不会改变页面结构，就是说脚本被延迟到整个页面都解析完毕后才运行。
【相当于告诉浏览器，立即下载，延迟执行】而浏览器会按照script的顺序执行脚本
async属性，与defer相似，但是其目的是：告诉浏览器,不必等待脚本下载和执行完之后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本.【所以不能再异步脚本中，操作DOM，不然会混乱】
可以使用DOM API动态添加script元素，实现动态加载:
let script = document.createElement('script');
script.src = 'index.js';
document.body.appendChild(script);
于此同时，这种动态加载也是异步的。
显然这种加载方法对浏览器预加载器是不可见的，会严重影响资源获取队列中的优先级。从而严重影响性能.
但是可以在采用<link rel='preload' href='index.js'>，来告诉预加载器。
2.2 推荐使用外部代码
在script标签中，添加src属性指向指定的URL。【单独的.js文件存储代码】
原因如下：
- 可维护性
- 缓存：当两个页面用到同一个js文件的时候，只需要
下载一次，就可以多次使用。
2.3 noscript元素
当浏览器不支持脚本或脚本支持被关闭的时候，显示其中的内容。
<html>
<head>
<title>welcome</title>
</head>
<body>
<noscript>
"该浏览器不支持脚本，请开放支持功能或更换更版本的浏览器"
</noscript>
</body>
</html>
2.4 总结：
- 包含外部JavaScript脚本，必须指定URL，可以在同一个服务器下，也可以在不同域中。
- 在不使用
defer``async时，所有script元素都会被依次执行。 async表示不需要等待其他脚本，同时也不阻塞文档渲染。但不能保证script的执行顺序
