script 加载的三种方式详解

news2024/9/22 13:45:30

首屏优化这个问题想必已经老生常谈了，在面试当中也是经常被提及到，例如，面试官：有没有做过首屏优化，首屏优化都有哪些方案？当然在首屏优化中并没有一套方案是一劳永逸的，要根据具体网站首页的需求来进行优化，今天给大家分享的是首屏加载优化过程中关于 script标签的执行，大家可以了解一下，在面试以及自己实际工作操作中应该都可以起到一些作用。

script

说起来 script 应该都不陌生吧？script 标签是 HTML 中用于嵌入或引用脚本的，我们先来看一下大名鼎鼎的掘金和 antd 的网站都用了哪些

掘金

antd

可以看到他们都使用了不少的 script 来加载资源，但是注意到有的 script 上面有 defer，有的有async，有的什么 defer/async 都没有，那为什么这么使用呢？以及这么使用的作用是什么，今天就来看一下吧。

script 三种方式

我们都知道，在首屏优化中，js 的加载和执行策略对页面的初始加载时间有着至关重要的影响。

那一般情况下主要有三种方式来引入 js 文件：直接使用 <script> 标签，使用 defer 和 async 属性。它们各自有不同的加载和执行时机，对页面性能的影响也不同，要根据实际情况进行选择，下面详细的说一下三者的区别以及作用。

直接使用script

例如这样什么也不加，直接使用script进行加载

加载和执行顺序：
- 浏览器在解析 HTML 文档时遇到 <script> 标签，会暂停解析并立即下载、执行 JS 代码，然后再继续解析 HTML 文档。

优点：

确保脚本按照页面中的顺序执行

缺点：

阻塞页面渲染，可能导致页面加载速度变慢
如果脚本较大或网络较慢，可能会明显延迟页面的呈现

适用场景：

需要立即执行且对页面加载至关重要的脚本
初始化关键功能或设置全局变量的脚本
在页面加载过程中需要执行的小型、快速的脚本

例如这个在antd网站里面有个弹窗功能，进入网站时会直接弹出来提示框，这个弹窗需要立即执行。

仔细查看script的代码如下，其实就是弹窗的实现

如果不想script阻塞html加载，写到body的最后面也可以，但是执行时机就会比html加载慢了

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script src="script.js"></script>
</body>
</html>

使用 `defer`

加载和执行顺序：
- 浏览器在解析 HTML 文档的同时异步下载带有 defer 属性的脚本，但脚本会在 HTML 解析完成之后执行，且按照它们在文档中的顺序执行。也就是说script的解析和html的解析是同时进行的，但是script的执行是在html解析完成之后。
优点：
- 不阻塞 HTML 解析，提升首屏加载速度。
- 脚本按顺序执行，适合需要保证执行顺序的脚本。
缺点：
- 脚本执行需要等待整个 HTML 文档解析完成，不适合需要立即执行的脚本。
适用场景

主应用程序代码

依赖于DOM结构的脚本

需要按特定顺序执行的多个相互依赖的脚本

不会立即执行但需要尽早开始下载的大型脚本

可以看到掘金的首页用了很多的 defer 进行加载script，在解析 htm l的同时加载 script，这页很大程度的提高的首页的加载速度，有助于首屏加载速度的优化，但是需要注意这不适合立即执行的脚本。

使用 async

加载和执行顺序：
- 浏览器在解析 HTML 文档的同时异步下载带有 async 属性的脚本。一旦脚本下载完成，就会立即执行，不考虑 HTML 是否已经解析完成。
优点：
- 不阻塞 HTML 解析，提升首屏加载速度。
- 脚本尽早执行，适用于不依赖其他脚本、不要求严格执行顺序的脚本。
缺点：
- 脚本执行顺序无法保证，对于有依赖关系的脚本可能会导致问题。
适用场景：