前端 JavaScript 基础面试题, JavaScript 脚本延迟加载的方式有哪些?

Step 1

Q:: 面试题

A:: JavaScript 脚本延迟加载的方式有哪些？

Step 1

Q:: 答案

A:: JavaScript 脚本延迟加载的方式主要有以下几种：

1. 使用 defer 属性：在 HTML 中引入脚本时，可以添加 defer 属性，表示脚本在文档解析完毕后执行。

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

2. 使用 async 属性：async 属性表示脚本会异步执行，与页面的解析过程同时进行，但并不保证顺序。

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

3. 动态创建脚本标签：通过 JavaScript 动态创建并插入 script 标签，可以延迟脚本的加载和执行。

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

4. 使用加载库：使用如 RequireJS 这样的模块加载器，可以实现延迟加载和按需加载。

Step 2

Q:: 面试题

A:: 什么是 defer 和 async 属性？它们有什么区别？

Step 2

Q:: 答案

A:: defer 和 async 属性都是用于控制外部 JavaScript 文件加载和执行时机的属性。

- defer 属性表示脚本会在 HTML 解析完成后执行，并且按顺序执行所有带有 defer 的脚本。

- async 属性表示脚本会异步加载，并在加载完成后立即执行，不保证按顺序执行多个 async 脚本。

Step 3

Q:: 面试题

A:: 动态创建脚本标签的优缺点是什么？

Step 3

Q:: 答案

A:: 动态创建脚本标签的优点包括：

1. 可以按需加载脚本，减少初始加载时间。 2. 可以动态选择加载不同的脚本，灵活性高。

缺点包括：

1. 代码复杂度增加，需要手动管理脚本的加载和执行时机。 2. 可能引起执行顺序问题，尤其是在依赖关系复杂的情况下。