精通async、defer与动态加载js，成为前端开发达人

2024-02-16 03:14:46

异步加载与同步加载

在前端开发中，JavaScript代码的加载方式主要分为异步加载和同步加载。

同步加载 ：同步加载是指浏览器在加载HTML页面时，会按照HTML代码中出现的顺序逐个加载外部js文件。如果某个js文件加载失败或延迟加载，则后续的js文件也无法加载。
异步加载 ：异步加载是指浏览器在加载HTML页面时，会并行加载外部js文件。即使某个js文件加载失败或延迟加载，也不会影响其他js文件的加载。

async与defer

async和defer都是HTML5中引入的属性，用于控制外部js文件的加载行为。

async ：async属性表示该js文件可以异步加载，即浏览器在加载HTML页面时，会并行加载该js文件。在js文件加载完成后，浏览器会立即执行该js代码，而不会等待HTML页面加载完成。
defer ：defer属性表示该js文件可以延迟加载，即浏览器在加载HTML页面时，会并行加载该js文件。但是，浏览器只会等到HTML页面加载完成后，才会执行该js代码。

动态加载js是指在HTML页面加载完成后，再使用JavaScript代码动态加载外部js文件。动态加载js的常见方法有：

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

var script = document.createElement('script');
script.src = 'path/to/script.js';
document.head.appendChild(script);

在选择js文件的加载方式时，需要考虑以下因素：

js文件的依赖关系 ：如果js文件之间存在依赖关系，则需要确保依赖的js文件先加载，然后再加载被依赖的js文件。
js文件的执行时机 ：如果js文件需要在HTML页面加载完成后立即执行，则可以使用async属性。如果js文件不需要立即执行，则可以使用defer属性或动态加载js。
网站的性能要求 ：如果网站对性能要求较高，则可以使用异步加载或动态加载js，以减少页面加载时间。