前端 JavaScript 基础面试题, JavaScript 脚本异步加载如何实现?各有什么区别?

QA

Step 1

Q:: JavaScript 脚本异步加载如何实现？各有什么区别？

A:: JavaScript 脚本异步加载主要有两种方式：使用 async 属性和 defer 属性。 1. async 属性：当使用 async 属性时，脚本会被异步加载和执行，这意味着脚本的加载不会阻塞 HTML 文档的解析。当脚本加载完成后，立即执行。适用于独立的脚本。 2. defer 属性：当使用 defer 属性时，脚本会被异步加载，但执行会被延迟到整个 HTML 文档解析完成之后。适用于依赖于 DOM 的脚本，确保所有的 DOM 元素都已经加载完成。

Step 2

Q:: 为什么需要异步加载 JavaScript？

A:: 异步加载 JavaScript 可以防止阻塞页面的渲染。同步加载脚本会阻塞 HTML 的解析和渲染，从而导致页面加载速度变慢，影响用户体验。通过异步加载，脚本可以与页面的其他部分并行加载，提升页面的加载速度和响应速度。

Step 3

Q:: async 和 defer 在实际使用中的区别是什么？

A:: 1. async 适用于无需等待 DOM 加载完成的独立脚本，比如分析工具或广告脚本。它们会在下载完成后立即执行，可能在 DOM 完全解析之前执行。 2. defer 适用于需要 DOM 元素的脚本，比如初始化脚本或依赖于 DOM 的库。它们会在文档完全解析和加载完成后按顺序执行，确保所有 DOM 元素都可用。

用途

面试这个内容是因为在实际的生产环境中，前端开发人员需要优化页面的加载速度和用户体验。异步加载 JavaScript 是一种常见的优化方法，可以显著减少页面的加载时间，特别是在复杂的网页中，脚本的加载和执行顺序对用户体验至关重要。了解 async 和 defer 的区别和使用场景，能够帮助开发人员更好地管理脚本加载，提升页面性能。\n

相关问题

🦆

如何通过 JavaScript 检测脚本加载完成?▷

可以通过 script 标签的 onload 事件来检测脚本加载完成。例如：

 
<script src='example.js' onload='scriptLoaded()'></script>
<script>
function scriptLoaded() {
  console.log('Script loaded successfully');
}
</script>

🦆

使用动态脚本加载方式是什么?▷

动态脚本加载可以使用 JavaScript 创建 script 元素并将其添加到 DOM 中。示例代码如下：

 
var script = document.createElement('script');
script.src = 'example.js';
document.head.appendChild(script);
script.onload = function() {
  console.log('Script loaded successfully');
};

🦆

在 HTML5 中,为什么推荐将 script 标签放在 body 底部?▷

在 HTML5 中，将 script 标签放在 body 底部可以确保页面的 HTML 内容先加载并渲染，然后再加载和执行脚本。这可以防止脚本加载阻塞页面的渲染，提升页面的加载速度和用户体验。

🦆

什么是模块化 JavaScript?如何实现?▷

模块化 JavaScript 允许将代码分割成独立且可重用的模块。可以通过 ES6 的 export 和 import 关键字实现模块化。例如：

 
// module.js
export function greet() {
  console.log('Hello, world!');
}
 
// main.js
import { greet } from './module.js';
greet();

🦆

使用模块化加载脚本的好处是什么?▷

模块化加载脚本的好处包括：代码更易于维护和重用、避免命名冲突、按需加载减少初始加载时间，以及提高代码的可测试性和可读性。

JavaScript 中 null 和 undefined 的区别是什么 JavaScript 中常用的正则表达式有哪些