JS文件加载方法

在网页开发中，合理地加载JavaScript（JS）文件对于提升页面性能和用户体验至关重要。以下将介绍几种常见的JS文件加载方法及其特点。

传统的script标签同步加载

最基本的方式是使用<script>标签在HTML文档中引入JS文件，例如：<script src="example.js"></script>。这种方式是同步加载，浏览器在解析到该标签时，会暂停HTML的解析，先去下载并执行JS文件，然后再继续解析HTML。优点是代码简单直观，适用于文件较小且需要在文档特定位置执行的脚本。但缺点也很明显，如果JS文件较大或者网络不佳，会导致页面渲染延迟，用户可能会看到白屏。

script标签异步加载

为了避免同步加载带来的阻塞问题，可以使用async属性。代码如下：<script async src="example.js"></script>。使用async后，浏览器会异步下载JS文件，在下载过程中继续解析HTML。当文件下载完成后，立即执行脚本。这种方式适用于脚本之间相互独立，且不依赖于文档解析顺序的情况，比如一些统计脚本。不过，由于脚本的执行顺序不确定，可能会出现某个脚本依赖另一个脚本先执行但却没有满足条件的问题。

script标签延迟加载

defer属性也是解决同步加载阻塞的一种方案，写法为：<script defer src="example.js"></script>。defer会让浏览器在解析HTML的同时异步下载JS文件，并且保证脚本在文档解析完成后、DOMContentLoaded事件触发之前按顺序执行。这就确保了脚本执行时，DOM已经完全构建好，适合那些需要操作DOM的脚本。

动态创建script标签加载

还可以通过JavaScript动态创建<script>标签来加载文件，代码示例：

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

这种方法灵活性高，可以根据条件动态决定是否加载某个脚本。而且同样是异步加载，不会阻塞文档解析。

在实际开发中，需要根据项目需求和脚本特点选择合适的加载方式，以优化页面性能，提升用户体验。