在前端开发中，JavaScript是必不可少的一部分。但是JavaScript文件过大或者过多时，可能会导致网页加载速度变慢，影响用户的体验。为了避免这种情况，在加载JavaScript文件时可以使用无阻塞加载技术，其中最常用的是defer和async属性。
无阻塞加载
无阻塞加载就是指浏览器在下载JavaScript文件时不会阻塞HTML文档的渲染和其他资源的加载。实现无阻塞加载有以下几种方式：
异步脚本
使用script标签的async属性可以让浏览器异步地下载并执行JavaScript文件。下面是一个例子：
--------- ----- ------ ------ ----- ---------------- ---------------------- ------- ----- ---------------------- ------- ------ --------- ----------- ------- -------
上述代码中，浏览器会立即下载app.js文件，并且不会影响页面的呈现。然后在下载完成后，立即执行该文件，而不管其他资源是否已经加载完毕。
延迟脚本
使用script标签的defer属性可以让浏览器延迟执行JavaScript文件，直到所有的DOM元素都被解析完成。下面是一个例子：
--------- ----- ------ ------ ----- ---------------- ---------------------- ------- ----- ---------------------- ------- ------ --------- ----------- ------- -------
上述代码中，浏览器会立即下载app.js文件，但是不会立即执行。直到整个文档被解析完成后才会执行该文件。
动态加载脚本
使用JavaScript动态地创建script标签并添加到HTML文档中可以实现异步加载JavaScript文件。下面是一个例子：
--------- -----
------
------
----- ----------------
---------------------
-------
------
--------- -----------
--------
--- ------ - ---------------------------------
---------- - ---------
----------------------------------
---------
-------
-------上述代码中，使用JavaScript动态地创建了一个script标签，并将src属性设置为要加载的JavaScript文件的URL。然后将该标签添加到了页面的头部，就可以实现异步加载。
defer和async的区别
虽然defer和async都可以实现无阻塞加载，但是它们之间还是有一些区别的。
- defer属性是HTML5新增的属性，在HTML4中是不存在的。而async属性在HTML4中已经存在。
- 当浏览器遇到带有defer属性的script标签时，它会先下载该文件，但是不会立即执行。而如果是带有async属性的script标签，浏览器会在下载完成后立即执行该文件，而不管其他资源是否已经加载完毕。
- 当有多个带有defer属性的script标签时，它们会按照在页面中出现的顺序依次执行。而带有async属性的script标签则无法保证执行的顺序。
总结
JavaScript无阻塞加载是前端优化中的一个重要部分，可以提高网页的加载速度，改善用户的体验。在实现无阻塞加载时，应该根据实际情况选择合适的方法。在使用defer和async属性时要注意它们之间的区别，以免产生意想不到的影响。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/1741