跳到主要内容

脚本✅

请解释 <script>、<script async> 和 <script defer> 的区别​

答案

defer 和 async 是用于控制脚本加载和执行的 HTML <script> 标签属性。

defer 和 async 的主要区别在于它们对脚本的加载和执行的影响。

  • defer 属性告诉浏览器立即下载脚本，但延迟执行，等到文档加载完成后再按照它们在页面中出现的顺序依次执行。这意味着脚本不会阻止文档的解析和渲染，并且它们也不会阻止其他脚本的执行。如果多个脚本都使用 defer 属性，则它们将按照它们在页面中出现的顺序依次执行。

  • async 属性告诉浏览器立即下载脚本，但它们不一定按照它们在页面中出现的顺序执行。它们将在下载完成后立即执行。这意味着脚本不会阻止文档的解析和渲染，但可能会阻止其他脚本的执行。如果多个脚本都使用 async 属性，则它们将按照它们下载完成的顺序依次执行。

需要注意的是，当使用 defer 和 async 属性时，浏览器的支持情况可能不同。一些较旧的浏览器可能不支持这些属性，或者仅支持 defer 而不支持 async。因此，为了确保脚本的兼容性，建议在使用 defer 和 async 属性时，同时提供一个备用脚本，并考虑使用特性检测来检查浏览器是否支持这些属性。

在浏览器中，可以通过预加载 JavaScript 脚本来提高性能和用户体验。预加载是指在浏览器解析完当前页面之前，提前加载并解析相关资源（例如 JavaScript 文件、CSS 文件等）。这样可以在用户请求访问其他页面时，减少资源加载的时间和延迟，从而提高页面加载速度和用户体验。

以下是两种预加载 JavaScript 脚本的方法：

  1. defer 属性

<script> 标签的 defer 属性可以告诉浏览器，让 JavaScript 文件在页面文档解析完成之后再执行。这种方式可以保证页面不会因为脚本加载和执行而被阻塞，同时又能够保证脚本能够按照正确的顺序执行（即按照在 HTML 中出现的顺序，因为 defer 属性会按照这个顺序依次加载和执行）。

<!DOCTYPE html>
<html>
 <head>
 <title>My Page</title>
 <script src="script1.js" defer></script>
 <script src="script2.js" defer></script>
 </head>
 <body>
 ...
 </body>
</html>
  1. prefetch 和 preload

预加载的另一种方法是使用 Link 标签的 prefetch 或 preload 属性。这种方法可以在不影响当前页面加载的情况下，预先加载需要后续页面需要的 JavaScript 文件和其他资源。

其中，prefetch 属性指示浏览器预先加载并缓存 JavaScript 文件，但不会立即执行文件。而 preload 属性则会在浏览器空闲时立即加载文件，并且可以指定文件的类型、优先级等属性。

<head>
 <title>My Page</title>
 <link rel="prefetch" href="script1.js" />
 <link rel="preload" href="script2.js" as="script" />
</head>

需要注意的是，使用 prefetch 和 preload 属性时，应该避免将其用于太多的资源文件，否则可能会引发网络瓶颈和性能问题。可以在需要优化的资源文件上使用这些属性，并通过测试和性能分析来调整其预加载的优先级和时机，以达到最优化的预加载效果。

async:

  • 异步加载
  • 加载完立即执行
  • 不保证执行顺序

defer:

  • 异步加载
  • DOM 解析完成后执行
  • 按照顺序执行

在HTML中，<script>标签用于引入或嵌入JavaScript代码。<script>标签可以使用以下属性来调整脚本的行为：

常用属性

  1. src：指定要引入的外部JavaScript文件的URL。例如：<script src="script.js"></script>。通过这个属性，浏览器会下载并执行指定的外部脚本文件。

  2. async：可选属性，用于指示浏览器异步加载脚本。这意味着脚本会在下载的同时继续解析HTML文档，不会阻塞其他资源的加载。例如：<script src="script.js" async></script>。

  3. defer：可选属性，用于指示浏览器延迟执行脚本，直到文档解析完成。这样可以确保脚本在文档完全呈现之前不会执行。例如：<script src="script.js" defer></script>。

  4. type：指定脚本语言的MIME类型。通常是text/JavaScript或者module（用于ES6模块）。如果未指定该属性，浏览器默认将其视为JavaScript类型。例如：<script type="text/JavaScript">...</script>。

  5. charset：指定外部脚本文件的字符编码。例如：<script src="script.js" charset="UTF-8"></script>。

  6. integrity：用于指定外部脚本文件的Subresource Integrity（SRI）。SRI可以确保浏览器在加载脚本时验证其完整性，防止通过恶意更改文件来执行潜在的攻击。例如：<script src="script.js" integrity="sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng="></script>。

不常用属性

  1. crossorigin：正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本。要允许对静态媒体使用独立域名的网站进行错误记录，请使用此属性。参见 CORS 设置属性。

  2. fetchpriority：提供一个指示，说明在获取外部脚本时要使用的相对优先级。

  3. nomodule： 这个布尔属性被设置来标明这个脚本不应该在支持 ES 模块的浏览器中执行。实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。

  4. nonce: 在 script-src Content-Security-Policy (en-US) 中允许脚本的一个一次性加密随机数（nonce）。服务器每次传输策略时都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 是至关重要。

  5. referrerpolicy: 表示在获取脚本或脚本获取资源时，要发送哪个 referrer。

可以参考文档：资料

48%