关于script标签

本文最后更新于:2020年11月1日 凌晨

<Script>标签

如下列举出script标签中的属性以及对应的值:

  • src: 可选, 表示要执行的代码的外部文件地址;
  • type:可选,代替了language,表示了脚本语言中的内容类型(也叫做MIME类型),按照惯例这个值始终都是“text/javascript”;如果这个值是“module”,则代表了代码会当成ES6模块,可以使用 import,export等关键字;
    • XHTML中必须指定 type 属性, 并且只能是 text/javascript,
  • async(翻译: 异步):可选,只对外部脚本有效(src),表示立即开始下载脚本,但是不阻止页面其他动作,比如下载资源或者等其他脚本加载;
  • defer(翻译: 推迟): 可选,只对外部脚本有效(src),表示脚本可以延迟到文档背完全解析完成之后再执行;
  • crossorigin:可选, 配置相关的CROS(跨资源共享),默认不设置CORS,
    • crossorigin = “anonymous”,配置文件请求不必设置凭据标志;
    • crossorigin = “use-credentials”, 设置凭据标志,意味着出站请求会包含凭据;
  • integrity(翻译: 完整): 可选, 允许比对接收到资源和指定的加密签名以及验证子资源的完整性;如果不匹配那么页面要报错,脚本也不会执行;可以确保网页不会提供恶意内容;

执行方式

  1. 通过页面内部嵌入的javascript代码;

  2. 通过网页中包含的外部javascript代码;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 如果在外部引入代码中间还写入了行内代码,那么会忽略其中的代码,只使用外部代码
    // 当使用完整的URL指向外部代码,浏览器解析会使用 GET 请求获取资源
    // 在不使用 defer 或者 async 属性时候,代码会从上向下一次解释,上一个解释完才会解释下一个

    // 内部的代码
    <script>
    function sayHi() {
    console.log("HI!")
    }
    </script>

    // 引用外部代码, 使用外部代码也会阻塞
    <script src="./index.js"></script>

包含在script中的代码会从上倒下依次解释,在script中的代码背解释完成之前,页面的其他内容不会被加载也不会被显示;

Script标签的位置

  1. 可以放在 head 标签内部,但是这样子,会等下载完成所有的资源才开始加载页面;

  2. 现代一般会把script标签放在body标签的内容后面:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    <div>
    ...内容
    </div>

    <script>
    function sayHi() {
    console.log("HI!")
    }
    </script>
    <script src="./index.js"></script>
    </body>

延迟执行脚本

defer属性:

  1. 脚本会延迟到等页面解析完成后再执行;可写在head中;最好还是写在页面底部;
  2. 虽然按照规定,多个defer脚本也要按照顺序执行,但是并不总是这样子的,因此最好只有一个这样的脚本;
  3. defer属性只对外部文件生效;

异步执行脚本

async属性:

  1. async属性只对外部文件生效;告诉浏览器立即执行;
  2. async属性的脚本一样不能按照他们出现的次序执行;
  3. 告诉浏览器不必等待脚本下载完成再加载页面;
  4. 同样也不用等待上一个脚本下载完成和执行之后再加载其他脚本;
  5. 异步脚本会保证再页面Load事件之前执行;

动态加载脚本

1
2
3
4
5
let script = document.createElement("script");
script.src = "index.js";
// 因为动态添加的脚本默认是async,但不是所有的浏览器都支持async,所以设置成同步
script.async = false;
document.head.appendChild(script);

如果在代码中直接添加以上代码,那么会直接影响到脚本加载的顺序,我们最好应该先告诉浏览器的预加载器我们有一个动态脚本

1
2
<!-- 除此之外,我们还可以告诉它动态脚本是什么类型,添加属性as = “style”, 或者as = “script” -->
<link rel="preload" href="index.js">

行内代码与外部代码

尽可能的使用外部代码:

  1. 可维护性;
  2. 缓存:两个页面使用同一个外部脚本文件,只需要下载一次;
  3. 适应未来;如果未来不适应了,也不用注释过多的内容;

noscript元素

使用方式:

  1. 浏览器不支持脚本;
  2. 浏览器对脚本的支持关闭;

当出现上述两种情况的时候,那么noscript中的内容就会出现;同样写在了body标签内容的最后;


关于script标签
http://www.clearluv.com/2020/11/01/关于script标签/
发布于
2020年11月1日
许可协议