本章内容
- 使用<script>元素
- 行内脚本与外部脚本的比较
- 文档模式对JavaScript有什么影响
- 确保JavaScript不可用时的用户体验
<script>元素
将JavaScript引入HTML主要方法是使用<script>元素,有下列8个属性
- async:可选。脚本下载与HTML解析并行,一旦脚本加载完成,就会中断HTML解析,同时执行脚本
- defer: 可选。脚本下载与HTML解析并行,等HTML解析完成后脚本按顺序执行
- async 和 defer 异同之处
- async 和 defer 都是并行下载的,主要区别就是下载后何时执行
- async 和 defer 都只适用于外部脚本文件(defer 在IE7及更早的版本中,对行内脚本也可使用该属性)
- 每一个 async 属性的脚本都在它下载结束后立刻执行,有可能出现脚本执行顺序被打乱的情况
- 每一个 defer 属性的脚本会在HTML解析完成后,按照顺序执行
- async 和 defer 异同之处
- charset:可选。可指定代码字符集。这个属性很少使用,因为大多数浏览器不在乎它的值;
- crossorigin:可选。属性可以是 anonymous(不必配置凭据) 、use-credentials(设置凭据)。如果没有属性值,默认为 anonymous
- crossorigin 会让浏览器启动CORS访问检查,检查http响应头的 Access-Control-Allow-Origin
- integrity:可选。允许为 script 提供一个 hash,用于检验JavaScript是否完整
- integrity 的作用有
- 减少由【托管在CDN的资源被篡改】而引入的XSS 风险
- 减少通信过程资源被篡改而引入的XSS风险(同时使用https会更保险)
- 可以通过一些技术手段,不执行有脏数据的CDN资源,同时去源站下载对应资源
- 注意:启用 SRI 策略后,浏览器会对资源进行 CORS 校验,这就要求被请求的资源必须同域,或者配置了 Access-Control-Allow-Origin 响应头
- integrity 的作用有
- src:可选。表示要执行的外部文件
- language:废弃。为了显示脚本使用的语言
- type:可选。表示代码块中脚本语言的内容类型
- language 和 type
- 都可声明<script>标签中的脚本类型
- JS 一统天下,不需要 language 声明
- 浏览器优先识别 type 属性内的脚本类型
- language 和 type
标签位置
<body>元素中页面内容的后面,DOM解析完成后再下载js文件,用户会以为加载速度变快了
推迟执行脚本
若想 css 和 JavaScript 文件都集中放在一起,可定义 defer 属性
异步执行脚本
可定义 async 属性,无法保证执行顺序,若有依赖关系会出现一些bug,不被推荐使用
动态加载脚本
let script = document.createElement('script');
script.src = 'a.js';
document.head.appendChild(script)
会有人使用这个方法?????
XHTML中的变化
<script>
function compare(a, b) {
if(a < b) {
console.log('A 小于 B')
} else if(a > b) {
console.log('A 大于 B')
} else {
console.log('A 等于 B')
}
}
</script>
XHTML 中的小于号会被解析成一个标签的开始
XHTML 需要把小于号替换成转义符 <
<script>
function compare(a, b) {
if(a < b) {
console.log('A 小于 B')
} else if(a > b) {
console.log('A 大于 B')
} else {
console.log('A 等于 B')
}
}
</script>
第二种包含在CDATA块中
<script><![CDATA[
function compare(a, b) {
if(a < b) {
console.log('A 小于 B')
} else if(a > b) {
console.log('A 大于 B')
} else {
console.log('A 等于 B')
}
}
]]</script>
行内代码与外部文件
推荐使用外部文件,理由如下
- 可维护性:每项功能做一个单独 js 文件,出现bug的时候可快速定位
- 缓存:两个页面用到同一个 js 文件,则该文件只需要下载一次,页面加载更快
- 适应未来:HTML 和 XHTML 外部JavaScript 文件的语法一样
文档模式
- 混杂模式:省略文档开头 doctype声明开关。使用浏览器自己的方式解析执行代码,基本上没有兼容性可言
- 标准模式:使用W3C标准解析执行代码,不能使用已废弃的标签
- 准标准模式:遵循标准模式的基础上兼容部分非标准代码,比如一些已废弃的标签
- 标准模式和准标准模式非常接近,很少进行区分
<noscript>元素
下列两种情况下,浏览器将显示<noscript>的内容
- 浏览器不支持JavaScript
- 浏览器对脚本的支持被关闭