curTain

一、<script> 元素

<script> 元素由网景公司创造出来,并在网景浏览器2中实现,<script> 元素有以下 8 个属性

属性名 填写 说明
async 选填 表示立即下载该脚本,但不阻止其他页面操作,比如下载资源或等待掐他脚本加载
charset 可选 使用 src 属性指定的代码字符集,很少使用
corssorigin 可选 配置相关请求的CORS设置,默认不使用 CORS
defer 可选 立即下载脚本,不阻止页面其他操作,在文档解析完成后再执行脚本
integrity 可选 允许对比接收到的资源和指定的加密签名以验证资源的完整性,如果接收到的资源的签名与这个属性指定的签名不匹配,页面会报错,脚本不执行
language 废弃 用来标识代码块中的脚本语言,如 VBJS
src 可选 包含要执行代码的外部文件
type 可选 代替language,表示代码块中脚本语言的内容类型,一般是text/javascript,如果这个值是 module ,则代码会被当成 ES6 模块,而且只有这时候代码中才能出现 importexport 关键字

注意: 使用了 src 属性的 <script> 元素不应该再在元素中包含其他 javascript 代码,如果两者都提供的话,则浏览器只会下载并执行脚本,从而忽略行内代码

<script> 标签位置

由于 script 标签会打断 DOM 的解析,所以将脚本放置在文档首部会阻塞 DOM 的解析,导致页面加载变慢,所以一般将 script 标签放在 body 元素中的内容后面,页面会在处理 js 代码之前完成渲染页面

推迟脚本执行

HTML4.0.1 为 script 标签定义了 defer 属性,这个属性表示脚本在整个页面解析完成之后再运行,HTML5 规范要求脚本要求脚本按照他们出现的顺序执行,因此第一个推迟的脚本会在第二个推迟的脚本之前运行(defer脚本按顺序执行),并且两者都会在 DOMContentLoaded 事件之前执行

异步执行脚本

HTML5 为 script 元素定义了 async 属性,async 与 defer 类似,脚本的加载不会阻塞 DOM 的解析,但是 async 脚本加载完成会立即执行,如果此时还在进行 ODM 的解析,会打断 DOM 解析,被标记为 async 的脚本不能保证按照他们出现的顺序执行,异步脚本会在页面的 load 事件前执行

动态加载脚本

除了 script 标签,还有其他方式加载脚本,

  1. 使用 js 创建 script 标签
  2. 在文档头部预加载:<link rel="preload" href="a.js">

<noscript> 元素

针对早期浏览器不支持 javascript 的问题,需要一个页面优雅降级的处理方案,<noscript> 元素出现,对不支持 javascript 的浏览器提供替代内容,与 <canvas> 元素中添加内容的目的一样,用于提示用户不支持相关操作

小结

  1. 使用外部 javascript 文件时,必须将 src 属性设置为包含文件的 URL
  2. 对于不推迟执行的脚本,通常会把 <script> 元素放到页面尾部,介于主内容尾部和</body>标签之前
  3. 使用 defer 属性会把脚本推迟到文档渲染完毕之后执行,推迟的脚本总是按照他们被列出的次序执行
  4. 使用 async 属性异步加载脚本,让脚本加载完成立马执行
  5. 通过使用 <noscript> 元素指定浏览器不支持脚本时显示的内容

 评论