JavaScript 脚本的延迟加载可以通过以下几种方式实现：

defer 属性： 在<script>标签中添加defer属性，当浏览器遇到了defer时候它会异步加载脚本，但会延迟脚本的执行。浏览器会继续解析文档，同时并行下载带有 defer 属性的脚本。当文档解析完成后（即 DOMContentLoaded 事件触发之前），defer 脚本会按照它们在文档中出现的顺序依次执行。这样脚本将会在文档解析完成后执行，但在DOMContentLoaded事件之前执行。这样可以避免阻塞文档的解析和渲染。
async 属性： 给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
动态创建 DOM 方式： 动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。使用 JavaScript 动态创建 <script> 标签，并设置其 src 属性，然后将其添加到文档中。这样可以在需要的时候再加载脚本，而不会阻塞初始页面加载。

let script = document.createElement('script');
script.src = 'example.js';
document.head.appendChild(script);

JavaScript脚本延迟加载的方式有哪些，执行时机和执行顺序是什么？