首屏优化之：script 加载的三种方式首屏优化这个问题想必已经老生常谈了，在面试当中也是经常被提及到，例如，面试官：有

写在前面

首屏优化这个问题想必已经老生常谈了，在面试当中也是经常被提及到，例如，面试官：有没有做过首屏优化，首屏优化都有哪些方案？当然在首屏优化中并没有哪一套方案是一劳永逸的，可以直接照搬别人的优化，要根据具体网站首页的需求来进行优化，今天给大家分享的是首屏加载优化是关于 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，在解析 html 的同时加载 script，这很大程度的提高的首页的加载速度，有助于首屏加载速度的优化，但是需要注意这不适合立即执行的脚本。

使用 async

加载和执行顺序：
- 浏览器在解析 html 文档的同时异步下载带有 async 属性的脚本。一旦脚本下载完成，就会立即执行，不考虑 html 是否已经解析完成。
优点：
- 不阻塞 html 解析，提升首屏加载速度。
- 脚本尽早执行，适用于不依赖其他脚本、不要求严格执行顺序的脚本。
缺点：
- 脚本执行顺序无法保证，对于有依赖关系的脚本可能会导致问题。
适用场景：
- 独立的第三方脚本（如广告、分析工具）
- 不依赖于其他脚本或 DOM 的模块
- 可以在任何时候执行的非关键脚本
- 性能监控或错误跟踪脚本

总结

这三种方式各有优势，在首屏优化方面不能直接说哪一种就是最好的，可以结合起来进行使用，还要根据实际需求。

总结就是

直接使用 script 会阻塞 html 解析，严格按照书写顺序执行脚本，适用于少量必须即时执行的脚本，必要时也可以放到 body 最后去执行。
defer：异步下载脚本，不阻塞 html 解析，按顺序执行，适用于大部分需要等待 html 解析完成的脚本,脚本和html同时进行，可以优化首屏加载速度。
async：异步下载和执行脚本，不阻塞 html 解析，但无法保证执行顺序，适用于独立的或不依赖执行顺序的脚本。

使用场景

如果脚本需要在 DOM 准备好之前执行，使用直接加载。
如果脚本依赖于 DOM 或其他脚本，并且执行顺序很重要，使用 defer。
如果脚本是独立的，并且不依赖于其他脚本或 DOM，使用 async。