script标签以及defer和async属性

news2024/9/23 3:25:28

1. `<script>`标签

将JavaScript代码嵌入到HTML中主要方式是使用<script>元素。
使用<script>的方式有两种：
（1）直接在网页中嵌入JavaScript代码：

<script>
  function sayHi() {
    console.log("Hi");
  }
</script>

包含在<script>中的代码会被从上到下执行，在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载也不会被显示。

（2）引入外部文件中的代码，使用src属性，该属性的值是一个URL,指向包含js代码的文件。

<script src="example.js"></script>

与解释行内的js代码一样，在解释外部的js文件时，页面也会阻塞，阻塞的时间也包含下载文件的时间（不使用defer和async的情况下）。

如果使用了src属性，就不应该在<script>和</script>之间再包含其他js代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

在没有使用defer或async属性时，浏览器会按照<script>在页面中出现的顺序依次解释它们。第二个<script>元素的代码必须在第一个<script>元素的代码解释完毕才能开始解释，依次类推。

2. `<script>`标签位置

浏览器的渲染引擎与js引擎是互斥的，当HTML解析器遇到一个script标签时，它就会暂停渲染过程，将控制权交给js引擎。js引擎对内联的js代码会直接执行，对外部的js文件要先获取，再执行。等js引擎运行完毕，浏览器又会把控制权还给渲染引擎，继续DOM和CSSOM的构建。

过去，所有的script标签都被放在页面的<head>标签内，如下：

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="example1.js"></script>
    <script src="example2.js"></script>
</head>

这种做法的主要目的是将外部CSS和JavaScript文件集中在一起。然后所有的JS文件都放在<head>内，意味着所有的JavaScript代码都下载、解析和解释完毕后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。如果引入的脚本过多，会导致页面的渲染明显延迟，浏览器窗口完全空白。
为了解决这个问题，现在通常将所有JavaScript的引用放在<body>元素中的页面内容后面：

  <body>
    ......
    <script src="example1.js"></script>
    <script src="example2.js"></script>
  </body>

这样会在处理js代码之前完全的渲染页面，用户会感觉页面加载更快了。

可以发现，没有加defer和async属性的脚本，在遇到<script>标签时，首先开始下载脚本，从脚本开始下载到脚本完成执行，整个过程中，HTML的解析都是停止的。当脚本解析完成后，HTML解析继续。

3. `<script>`标签的defer属性

defer属性只对外部的脚本文件有效，给<script>标签添加defer属性，可以推迟脚本的执行。在遇到脚本时，还是会立即下载，但是会延迟执行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./scripts/a.js" defer></script>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
    </ul>
  </body>
</html>

上面的<script>标签虽然包含在<head>中，由于加上了defer属性，它们会在浏览器解析到结束的</html>标签后才会执行。
HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在DOMContentLoaded事件之前执行。但是在实际情况下，推迟执行的脚本不一定总会按顺序执行，或者在DOMContentLoaded事件之前执行。因此最好只包含一个这样的脚本。