script 的三种加载模式：默认加载、defer、

script 的三种加载模式：默认加载、defer、async

家好，我是前端西瓜哥。今天我们来了解一下 script 脚本的三种加载方式。

默认加载

一般的 script 写法为：

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

这种写法有一个问题：它会 阻塞 HTML 的 DOM 构建。

假如我们在 head 元素中使用了 script 脚本，它就会阻止后面元素的渲染，包括 body 元素，此时执行document.querySeletor('body') 拿到的是 null。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 拿到 null
   console.log(document.querySeletor('body'));
  </script>
</head>
<body></body>
</html>

此外，当脚本足够大，加载执行足够久时，会导致页面长时间没能渲染出完整页面。

这也是我们将业务代码脚本放到 body 最下边的原因，这样能确保脚本能够访问一个完整的 DOM 树，也不会阻止页面的渲染。

缺点是，HTML 很长的时候，解析到脚本就会花上一点时间，然后才会请求对应的脚本资源。

不过通常来说，HTML 内容都比较简单，二者感受不到太大区别，除非你网很卡。

defer 加载

<script defer src="app.js"></script>

defer，“延迟” 之意。这里的延迟，指的是延迟执行脚本，下载则不会被阻塞。

需要注意的是， defer 属性对内嵌脚本无效。毕竟脚本内容就在 HTML 里了，完全不需要请求资源了好吧。

给 script 标签添加了 defer 属性后，脚本不会阻塞 DOM 树的构建，会先下载资源，然后等待到在 DOMContentLoaded 事件前执行。

DOMContentLoaded 事件的触发时机为初始 HTML 被构建完成时，此时 CSS、图片等资源不需要加载完，但我们的脚本要执行完。

如果多个 script 设置了 defer 属性，这几个 script 的执行顺序和声明顺序相同，即最前面的脚本先执行。并不是谁先下载谁先执行。

实际开发中，我们可以将业务代码脚本加上 defer 属性，放到更上层的 head 标签下。

这也是最新版 HtmlWebpackPlugin 插件的默认引入打包脚本的方式。

async 加载

<script async src="app.js"></script>

async，“异步” 之意。同样对内嵌脚本无效。

设置 async 后，脚本一旦被下载好了就会执行，不管什么时机。

适合与执行顺序无关的脚本，比如广告、网站流量分析脚本。

比如插入 Google 分析脚本：

<script async src="//www.google-analytics.com/analytics.js"></script>

动态加载

还有一种用脚本加载脚本的特殊情况，这里也说一说。

<script>
  const script=document.createElement('script');
  script.src='app-a.js';
  document.body.appendChild(script);
</script>

脚本里创建一个 script 元素，设置好 src，然后加载到 DOM 树上，接着脚本就会下载和执行了。

创建的 script 元素默认会给 async 设置为 true，即一旦下载好就立即执行。

如果你要加载有依赖关系的多个脚本，就需要将 async 设置为 false。

<script>
  const script=document.createElement('script');
  // 取消 async 加载方式
  script.async=false;
  script.src='app-a.js';
  document.body.appendChild(script);

  const script2=document.createElement('script');
  script2.async=false;
  script2.src='app-b.js';
  document.body.appendChild(script2);
</script>
<script>console.log('我还是所有脚本中最先执行的')</script>

这样写，就能保证先执行 app-a.js，再执行 app-b.js

但 它无法做到比 HTML 中其他非动态加载的 script 脚本更早执行，这点需要注意。

结尾

script 有三种常见加载模式：

默认加载：会阻塞 DOM 构建
defer 加载：下载照旧，但执行延后
async：下载完就立即执行，适合没有依赖的脚本

此外还有动态加载的脚本的情况，这种脚本默认为 async 加载形式，可通过将 async 属性设置为 false 来解除，让脚本顺序执行。

我是前端西瓜哥，欢迎关注我。

前端开发中，我们经常需要知道网页的DOM（文档对象模型）是否已经加载完毕。对于初学者来说，这可能听起来有些复杂，但其实我们可以通过简单的JavaScript代码来实现这一目标，而不需要依赖任何框架或库。本文将带你一步步了解如何实现这一点。

什么是DOM？

在讲具体方法之前，我们先来了解一下什么是DOM。DOM（文档对象模型）是网页的结构化表示，它将HTML文档表示为一个树形结构。浏览器会解析HTML并生成DOM树，我们可以使用JavaScript对这个DOM树进行操作，从而改变网页的内容和样式。

检查DOM是否准备好的方法

要检查DOM是否准备好，我们主要使用两个事件：DOMContentLoaded和load。它们的区别在于：

DOMContentLoaded事件在初始的HTML被完全加载和解析完成后触发，但不等待样式表、图片等资源加载。
load事件在页面所有资源（包括样式表、图片等）加载完成后触发。

我们可以使用这两个事件来确定页面的加载状态，并结合document.readyState属性来判断DOM是否已准备好。

具体代码实现

下面是具体的代码示例：

window.addEventListener("DOMContentLoaded", ()=> {
  if (document.readyState==="complete") {
    console.log('DOM已完全加载');
  } else if (document.readyState==="interactive") {
    console.log('DOM已准备好，但资源仍在加载');
  }
});

window.addEventListener("load", ()=> {
  if (document.readyState==="complete") {
    console.log('所有资源已加载完成');
  } else if (document.readyState==="interactive") {
    console.log('DOM已准备好，但资源仍在加载');
  }
});

在这段代码中，我们使用了window.addEventListener来监听DOMContentLoaded和load事件。当这些事件触发时，会执行相应的回调函数。在回调函数中，我们检查document.readyState属性的值：

如果值是'complete'，表示DOM已经完全加载，所有资源也已经加载完成。
如果值是'interactive'，表示DOM已准备好，但一些资源（如图片、框架等）仍在加载中。

为什么要这样做？

了解DOM的加载状态对于前端开发非常重要。例如，如果你想在DOM完全加载后执行一些初始化操作，就需要确保这些操作不会在DOM未准备好的情况下执行。通过监听这些事件，你可以确保在合适的时机执行相应的代码，提高代码的稳定性和性能。

结束

在不使用任何JavaScript框架或库的情况下，我们可以通过监听DOMContentLoaded和load事件，以及检查document.readyState属性的值，来确定DOM是否已准备好。这种方法简单高效，非常适合初学者学习和使用。

题：构建卓越的用户体验：Vue 3中的全面首屏加载优化策略

在当今Web应用的竞争激烈的环境下，首屏加载速度成为吸引用户和提升用户满意度的关键。Vue 3作为一款现代化的前端框架，提供了多种全面的首屏加载优化策略，以确保您的应用快速响应、高效加载。本文将详细探讨Vue 3中的全面首屏加载优化策略，从不同角度为您展示如何提升用户体验和性能。

1. 异步组件与路由懒加载

按需加载：

在线咨询

上一篇：一起学习HTML&CSS（001）-
下一篇：「前端面试」前端面试题300道~~熬夜吐血整理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商