跳到主要内容

请说出 JavaScript无阻塞加载的具体方式？

参考答案：

JavaScript无阻塞加载的主要目的是确保网页内容可以尽快地呈现给用户，而不必等待所有的JavaScript文件都加载完毕。这可以通过几种方式实现：

  1. 异步加载：在<script>标签中，使用async属性可以让浏览器异步地加载和执行JavaScript。这意味着浏览器在下载脚本的同时，会继续解析HTML。但是，需要注意的是，由于脚本的执行顺序与它们在HTML中出现的顺序有关，因此，使用async可能会导致一些难以预见的问题。
<script async src="script.js"></script>
  1. 延迟加载：使用defer属性可以让浏览器在HTML解析完成后才执行脚本。这样，用户就可以更快地看到页面内容，因为浏览器不需要等待脚本下载完成就可以开始渲染页面。与async不同，defer会确保脚本按照它们在HTML中出现的顺序执行。
<script defer src="script.js"></script>
  1. 动态创建脚本元素：通过JavaScript动态地创建<script>元素，可以实现更精细的控制。例如，你可以将脚本的加载和执行推迟到文档加载完成（DOMContentLoaded事件触发）或者窗口加载完成（load事件触发）的时候。
document.addEventListener('DOMContentLoaded', (event) => {
  const script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
});
  1. 使用模块加载器或打包工具：例如Webpack，Rollup等，它们可以将多个JavaScript文件打包成一个或多个文件，然后通过异步或延迟加载的方式引入。这种方式通常用于大型项目，可以大大提高网页的加载速度。
  2. 使用CDN：将JavaScript文件托管在CDN（内容分发网络）上，可以加快文件的加载速度，因为CDN通常会在全球多个地方部署服务器，用户可以从离自己最近的服务器下载文件。

以上就是一些常见的JavaScript无阻塞加载的方式。你可以根据项目的具体需求和场景，选择合适的方式来提高网页的加载速度。