Javascript 异步加载详解(浏览器在javascript的加载方式)

什么是异步加载

在JavaScript中，异步加载是指浏览器在加载JavaScript文件时，并不会等待文件完全加载完成后再去执行JavaScript文件内的代码。异步加载的好处在于页面不会因为JavaScript加载而被阻塞，同时也可以提高页面的加载速度和性能。

实现异步加载的方式

JavaScript中实现异步加载主要有以下几种方式：

1. defer属性

defer属性是HTML5中新增的属性，用于指示浏览器延迟执行脚本，直到文档解析完毕后再执行。defer属性只有在使用了src属性的script标签中才有效。使用defer属性可以避免页面阻塞，并且执行顺序与在页面中出现顺序一致。

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

2. async属性

async属性也是HTML5中新增的属性，用于指示浏览器异步加载脚本，并在加载完毕后立即执行，不会等待文档解析完毕。使用async属性可以加快页面加载速度，但脚本执行顺序不一定与在页面中出现顺序一致。在多个async标签同时存在时，执行的顺序也无法保证，应慎用。

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

3. 动态创建script标签

动态创建script标签是一种常用的异步加载方式，可以通过JavaScript代码动态创建script标签并插入到页面中，达到异步加载的效果。可以使用jQuery等框架或者原生JavaScript实现。

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

示例说明

下面以简单的两个示例说明异步加载的效果。

示例一

假设我们需要在页面中引入一个很大的JavaScript文件，如果使用同步加载，页面会在加载完毕前一直卡着，影响用户体验。我们可以尝试使用defer或async属性来实现异步加载。

<!-- 同步加载 -->
<script src="example.js"></script>

<!-- 异步加载 -->
<script src="example.js" defer></script>
<script src="example.js" async></script>

示例二

假设我们需要在引入一个外部JavaScript文件之后，再执行页面中的JavaScript代码，可以使用动态创建script标签的方式来实现异步加载。例如，当用户点击某个按钮时才需要执行某个JavaScript函数，而这个函数依赖于外部JavaScript文件的某些方法或变量：

<button onclick="loadScript()">点击加载JavaScript文件</button>

<script>
function loadScript() {
  var script = document.createElement('script');
  script.src = 'example.js';
  document.head.appendChild(script);

  // 需要等待example.js文件加载完成再执行的代码
  myFunction();
}
</script>