关于script标签

本文最后更新于：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标签内容的最后；