js延迟加载的6种方式实例总结

首先我们需要了解什么是js延迟加载。js延迟加载是指在网页中，等到网页加载完成后再加载js文件，以此提高网页加载速度和用户体验。

接下来，我们详细讲解一下js延迟加载的6种方式：

1. defer属性

defer属性是script标签的一个属性，它告诉浏览器下载js文件的时候不会阻塞页面渲染过程，而是会等到页面渲染完成后再执行js文件。示例如下：

<script src="test.js" defer></script>

1. async属性

async属性也是script标签的一个属性，它告诉浏览器下载js文件的时候不会阻塞页面渲染过程，但是会与页面渲染同时进行，下载完成后立即执行js文件。示例如下：

<script src="test.js" async></script>

1. 动态创建script标签

通过JavaScript动态创建script标签，将需要延迟加载的js文件插入到DOM中，从而实现js延迟加载。示例如下：

var script = document.createElement('script');
script.src = 'test.js';
document.body.appendChild(script);

1. 使用deferred脚本

deferred脚本是一个js文件，用于管理其他js文件的加载和执行顺序，通过deferred脚本控制需要延迟加载的js文件的加载时间和执行顺序。示例如下：

<script src="deferred.js" defer></script>
<script src="test1.js" deferscript="true"></script>
<script src="test2.js" deferscript="true"></script>

1. 懒加载

懒加载指的是在用户需要的时候才加载js文件，可以通过监听事件或者滚动条滚动来触发js文件的加载。示例如下：

function lazyLoad() {
  var script = document.createElement('script');
  script.src = 'test.js';
  document.body.appendChild(script);
}
element.addEventListener('click', lazyLoad);

1. 预加载

预加载指的是在页面加载完成后，提前加载需要使用的js文件，以此减少真正需要使用时的加载时间。示例如下：

<link rel="preload" href="test.js" as="script">

以上就是js延迟加载的6种方式，可以根据实际需求选择合适的方式来实现。具体可以参考若干示例来进行理解和实践。