# 写在前面首屏优化这个问题想必已经老生常谈了，在面试当中也是经常被提及到，例如，面试官：有没有做过首屏优化，首屏优化都有哪些方案？当然在首屏优化中并没有哪一套方案是一劳永逸的，可以直接照搬别人的优化，要根据具体网站首页的需求来进行优化，今天给大家分享的是首屏加载优化是关于 script 标签的执行，大家可以了解一下，在面试以及自己实际工作操作中应该都可以起到一些作用。 # script 说起来 script 应该都不陌生吧？script 标签是 html 中用于嵌入或引用脚本的，我们先来看一下大名鼎鼎的掘金和 antd 的网站。 **掘金** ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/86f4f840da2c4d1ca491f5e0a6fbb0ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSmFja3NvbkNoZW4=:q75.awebp?rk3s=f64ab15b&x-expires=1767171777&x-signature=jcxfVsjmoS83M%2FvbZhtFX8d%2FJJI%3D) **antd** ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b8da39696464ac5a55555ceadafb95a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSmFja3NvbkNoZW4=:q75.awebp?rk3s=f64ab15b&x-expires=1767171777&x-signature=Af780LyyirR2yZjhZq4RLK8tnOU%3D) 可以看到他们都使用了不少的 script 来加载资源，但是注意到有的 script 上面有 defer，有的有 async，有的什么 defer/async 都没有，那为什么这么使用呢？以及这么使用的作用是什么，今天就来看一下吧。 # script 加载的三种方式我们都知道，在首屏优化中，js 的加载和执行策略对页面的初始加载时间有着至关重要的影响。那一般情况下主要有三种方式来引入 js 文件：直接使用 ` ``` ## 使用 defer ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bb5e632a4d3249f799509eeb2da21d04~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSmFja3NvbkNoZW4=:q75.awebp?rk3s=f64ab15b&x-expires=1767171777&x-signature=WDRNaVgdNHN0C4MgcIAZZ6vVH2s%3D) - 加载和执行顺序： - 浏览器在解析 html 文档的同时异步下载带有 `defer` 属性的脚本，但脚本会在 html 解析`完成之后执行`，且按照它们在文档中的顺序执行。也就是说 script 的解析和 html的解析是`同时进行`的，但是 script 的`执行`是在 html 解析完成之后。 - 优点： - 不阻塞 html 解析，提升首屏加载速度。 - 脚本按顺序执行，适合需要保证执行顺序的脚本。 - 缺点： - 脚本执行需要等待整个 html 文档解析完成，不适合需要立即执行的脚本。 - 适用场景： - 主应用程序代码 - 依赖于 DOM 结构的脚本 - 需要按特定顺序执行的多个相互依赖的脚本 - 不会立即执行但需要尽早开始下载的大型脚本可以看到掘金的首页用了很多的 defer 进行加载 script，在解析 html 的同时加载 script，这很大程度的提高的首页的加载速度，有助于首屏加载速度的优化，但是需要注意这不适合立即执行的脚本。 ## 使用 async ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2af10a0d641c423cbcdc9e0d7999c2d2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSmFja3NvbkNoZW4=:q75.awebp?rk3s=f64ab15b&x-expires=1767171777&x-signature=aEPtPQFwp1yvlRY9YsRoQrcsf9M%3D) - 加载和执行顺序： - 浏览器在解析 html 文档的同时异步下载带有 `async` 属性的脚本。一旦脚本下载完成，就会立即执行，不考虑 html 是否已经解析完成。 - 优点： - 不阻塞 html 解析，提升首屏加载速度。 - 脚本尽早执行，适用于不依赖其他脚本、不要求严格执行顺序的脚本。 - 缺点： - 脚本执行顺序无法保证，对于有依赖关系的脚本可能会导致问题。 - 适用场景： - 独立的第三方脚本（如广告、分析工具） - 不依赖于其他脚本或 DOM 的模块 - 可以在任何时候执行的非关键脚本 - 性能监控或错误跟踪脚本 # 总结这三种方式各有优势，在首屏优化方面不能直接说哪一种就是最好的，可以结合起来进行使用，还要根据实际需求。 **总结就是** - 直接使用 script 会阻塞 html 解析，严格按照书写顺序执行脚本，适用于少量必须即时执行的脚本，必要时也可以放到 body 最后去执行。 - defer：异步下载脚本，不阻塞 html 解析，按顺序执行，适用于大部分需要等待 html 解析完成的脚本,脚本和html同时进行，可以优化首屏加载速度。 - async：异步下载和执行脚本，不阻塞 html 解析，但无法保证执行顺序，适用于独立的或不依赖执行顺序的脚本。 **使用场景** - 如果脚本需要在 DOM 准备好之前执行，使用直接加载。 - 如果脚本依赖于 DOM 或其他脚本，并且执行顺序很重要，使用 `defer`。 - 如果脚本是独立的，并且不依赖于其他脚本或 DOM，使用 `async`。