Wepress

Appearance

script 预加载方式有哪些，这些加载方式有何区别？ ​

参考答案： ​

在网页中，<script> 标签有几种预加载方式可以用来优化脚本的加载和执行。不同的预加载方式具有不同的特性和应用场景，以下是主要的预加载方式及其区别：

1. <script> 标签的默认行为 ​

html
<script src="script.js"></script>
  • 行为：默认情况下，<script> 标签会在 HTML 文档解析时同步加载和执行脚本。这会阻塞文档的渲染，直到脚本下载并执行完毕。

2. defer 属性 ​

html
<script src="script.js" defer></script>
  • 行为：defer 属性表示脚本将在文档解析完成后（即 DOMContentLoaded 事件之前）异步执行。这种方式不会阻塞 HTML 文档的解析，脚本会按顺序执行。
  • 特点：
    • 适用于 <head> 部分的脚本。
    • 保证脚本执行顺序与在文档中的顺序一致。
    • 有效避免了脚本加载对页面渲染的阻塞。

3. async 属性 ​

html
<script src="script.js" async></script>
  • 行为：async 属性表示脚本将异步加载并立即执行（不管 HTML 是否解析完毕）。一旦脚本下载完成，它将立即执行，而不会等待其他脚本或 HTML 解析完成。
  • 特点：
    • 适用于不依赖于其他脚本的脚本（如分析脚本、广告脚本等）。
    • 脚本的执行顺序与在文档中的顺序不一定一致，取决于哪个脚本最早加载完成。
    • 有可能会影响页面的渲染顺序和依赖脚本的执行顺序。

4. preload 和 prefetch ​

html
<link rel="preload" href="script.js" as="script">
<link rel="prefetch" href="script.js" as="script">
  • 行为：
    • preload：在页面加载过程中提前加载资源，以便资源在需要时能更快地使用。通常用于确保关键资源在页面渲染前已加载完成。
    • prefetch：指示浏览器预先加载可能在将来页面中使用的资源，以提高未来页面的加载速度。通常用于优化用户可能接下来的操作。
  • 特点：
    • preload 用于当前页面中即将需要的资源，加载优先级较高。
    • prefetch 用于未来可能需要的资源，加载优先级较低。
    • preload 和 prefetch 可以提高资源的加载速度，但它们的使用场景和效果有所不同。

5. module 类型脚本 ​

html
<script type="module" src="script.js"></script>
  • 行为：type="module" 指定脚本为 ECMAScript 模块，支持模块化导入和导出。模块脚本会被延迟加载并在 HTML 文档解析完成后执行。
  • 特点：
    • 支持 import 和 export 语法，允许模块化开发。
    • 默认具有 defer 行为，保证模块脚本在 DOMContentLoaded 事件触发之前执行。

题目要点： ​

  • <script>：默认同步加载，阻塞文档渲染。
  • defer：异步加载，但在 DOMContentLoaded 事件之前按顺序执行。适合 <head> 部分的脚本。
  • async：异步加载，立即执行，不保证执行顺序。适合独立的脚本。
  • preload：提前加载资源，适合当前页面所需的关键资源。
  • prefetch：预先加载可能会在未来页面中使用的资源，适合优化未来的页面加载。
  • module：模块化脚本，延迟加载，支持 ES6 模块特性。

每种预加载方式都有其适用的场景和特点，通过合理选择和使用这些方式，可以优化网页性能和资源加载效率。