最近公司项目打开系统比较慢 经过排查后是因为https://cdn.bootcdn.net引入的外链导致的
所以对这个外链进行了一些修改来达到不阻止HTML加载和渲染 确保页面的正常展示
可以用到script标签的defer 或 anync属性
<script defer src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script><script async src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>两者是有去别的
defer
特性
- 当使用
defer属性时，浏览器会异步加载JavaScript文件，不会阻塞HTML的解析。 - 所有带有
defer属性的脚本会按它们在文档中的出现顺序执行。 - 这些脚本会在HTML解析完成后执行，但在
DOMContentLoaded事件触发之前。
优点
- 适用于需要确保脚本按顺序执行的情况。
- 不会阻塞HTML解析，从而提升页面的加载性能和用户体验。
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>async
特性
- 当使用
async属性时，浏览器也会异步加载JavaScript文件，不会阻塞HTML的解析。 - 一旦脚本文件下载完成，就会立即执行，这可能发生在HTML解析完成之前。
- 脚本的执行顺序不一定按照它们在文档中的出现顺序。
优点
- 适用于不依赖于其他脚本和DOM结构的独立脚本。
- 加快页面的初始加载速度，因为脚本可以在HTML解析过程中加载。
缺点
- 脚本的执行顺序无法保证，因此对于依赖顺序执行的脚本可能不适用。
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Example</title>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>总结
defer：脚本异步加载且按顺序执行，保证在HTML解析完成后执行，不会阻塞HTML解析。async：脚本异步加载并尽快执行，可能在HTML解析完成前执行，不保证顺序，不会阻塞HTML解析。选择使用
defer还是async取决于脚本的用途和对执行顺序的要求。如果脚本需要与DOM交互并依赖于特定的加载顺序，defer是更好的选择。如果脚本独立且不依赖于其他脚本或DOM结构，async则可以提供更快的加载速度。
