js延迟加载

JavaScript 中有多种延迟加载的方式。以下是其中的一些：

1.defer 属性：

将 defer 属性添加到 <script> 标签中，可以告诉浏览器延迟执行脚本，直到文档解析完成。这意味着脚本将在 DOMContentLoaded 事件之前执行，但在 load 事件之后执行。

 示例代码如下：

<script src="path/to/script.js" defer></script>

2.async 属性：

将 async 属性添加到 <script> 标签中，可以告诉浏览器异步加载脚本，不会阻塞文档解析。这意味着脚本将在下载完成后立即执行，而不管文档是否已经解析完成。

  示例代码如下：

<script src="path/to/script.js" async></script>

3.动态加载： 

使用 JavaScript 动态创建 <script> 标签，并将其添加到文档中。这样可以在需要时加载脚本，而不会阻塞文档解析。

示例代码如下：

const script = document.createElement('script');
script.src = 'path/to/script.js';
document.body.appendChild(script);

 延迟加载的好处:

 1. 加快页面加载速度：

延迟加载可以减少页面的初始加载时间，因为脚本不会阻塞文档解析。这意味着用户可以更快地看到页面的内容，并且更快地与页面进行交互。

2.减少带宽消耗：

延迟加载可以减少页面的带宽消耗，因为脚本不会在页面加载时立即下载。这意味着用户可以更快地访问页面，并且更少地使用他们的数据计划。

3. 提高性能：

延迟加载可以提高页面的性能，因为脚本不会阻塞页面的渲染和交互。这意味着用户可以更快地与页面进行交互，并且页面的响应速度更快。 

 延迟加载的缺点：

1. 可能会导致依赖问题：

如果脚本依赖于其他脚本或资源，延迟加载可能会导致依赖问题。例如，如果一个脚本依赖于 jQuery，但是 jQuery 脚本被延迟加载，那么该脚本可能会在 jQuery 加载之前执行，从而导致错误。 

2. 可能会影响 SEO：

如果页面的关键内容被延迟加载，搜索引擎可能无法正确地索引页面。这可能会影响页面的排名和可见性。