网站加载速度优化-减少白屏时间

亲测有用，值得学习了解

MDN script 标签 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

方案

把首屏用不到的 js 库 script 标签 加上 async

我把mermaid.min.js插件增加了async减少了 160 毫秒白屏时间

script 标签 的 async 和 defer 的区别

这段话来自于 阮一峰 es6 书的内容 https://es6.ruanyifeng.com/#docs/module-loader#传统方法

defer 与 async 的区别是：

1. defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
2. async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer 是“渲染完再执行”，async 是“下载完就执行”。
3. 另外，如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的。

---

默认不加 async 和 defer

浏览器会立即加载并执行相应的脚本。

加了 async

异步下载 js，下载完成后立即执行 js。不会堵塞页面展示。

加了 defer

异步下载 js，等待其他 js 加载和执行完，DOMContentLoaded 之前执行 js。会堵塞页面展示。

参考链接

Script 标签上使用 defer 和 async 的区别（前端面试） https://blog.csdn.net/weixin_46544034/article/details/123146915

Scripts: async, defer https://javascript.info/script-async-defer

最后

欢迎大佬纠错

---