前端面试题刷（31-40）

menu
229 阅读18分钟

31. webpack的module、bundle、chunk分别指的是什么？

在Webpack中，module、bundle、chunk 这几个概念是构建过程中非常重要的组成部分，它们各自有着不同的含义：

  1. Module (模块)

    • Module 是Webpack中最基本的概念之一，它表示一个单独的文件或一组相关的文件。这个文件可以是JavaScript、CSS、图片、JSON或其他任何类型的资源文件。每个文件都是一个独立的模块，并且可以通过 import 或 require 等方式来引入其他模块。

  2. Chunk (代码块)

    • Chunk 是Webpack在构建过程中根据配置规则将多个模块组合在一起的结果。例如，当使用 entry 配置项指定一个或多个入口点时，Webpack会从这些入口开始递归地找出所有的依赖模块，并将它们组织成一个或多个 chunk。Chunk可以用来实现代码分割，比如动态导入 (import()) 就会产生新的chunks。

  3. Bundle (捆绑包)

    • Bundle 是Webpack输出的最终文件，它包含了经过加载、转换和打包的模块和代码块。通常情况下，一个Webpack配置会生成一个或多个Bundle文件，这些文件是最终部署到生产环境中供浏览器执行的代码。一个Bundle可能包含了一个或多个chunk，具体取决于你的配置。

总结来说，在Webpack构建流程中，首先识别出各个 module，然后根据配置将这些模块组合成 chunk，最后生成一个或多个 bundle 文件。这些概念帮助理解Webpack是如何处理和优化前端资源的。

32. 说一下 vite 的构建流程

Vite 的构建流程与传统的构建工具如 Webpack 有所不同，它采用了更加现代化和高效的技术。以下是 Vite 构建流程的主要步骤和特点：

1. 开发服务器启动

  • 快速启动：Vite 使用 ES 模块（ESM）直接运行 JavaScript 文件，而不是先编译和打包所有文件。这意味着开发服务器可以在几秒钟内启动。
  • 热模块替换（HMR） ：Vite 提供了高效的热模块替换功能，当文件发生变化时，只重新编译和替换受影响的部分，而不会重新加载整个页面。

2. 文件解析

  • 按需解析：Vite 在开发模式下按需解析文件，只有被请求的文件才会被解析和处理，这大大提高了开发效率。
  • 模块预编译：对于 CSS 和其他静态资源，Vite 会在首次请求时进行预编译，并缓存结果，后续请求可以直接使用缓存。

3. 构建过程

  • 构建命令：通过运行 vite build 命令来启动构建过程。

  • 文件扫描：Vite 扫描项目中的所有入口文件和其他依赖模块。

  • 模块图构建：构建一个完整的模块依赖图，记录每个模块之间的依赖关系。

  • 代码转换：对每个模块进行必要的转换，例如：

    • 将 ES 模块转换为 CommonJS 模块（如果目标环境不支持 ESM）。
    • 转换和压缩 CSS 和 JavaScript 代码。
    • 处理其他静态资源，如图片、字体等。

4. 输出文件

  • 代码分割：根据模块图进行代码分割，生成多个较小的文件，以提高加载速度。

  • 生成 Bundle：将转换后的代码和资源文件输出到指定目录，通常包括：

    • 主应用文件（如 index.html）。
    • JavaScript 和 CSS 文件。
    • 静态资源文件（如图片、字体）。

  • 优化：对生成的文件进行进一步优化，如压缩、树摇（Tree Shaking）等。

5. 部署

  • 静态文件：构建完成后，生成的所有静态文件可以直接部署到任何静态文件服务器上。

总结

Vite 的构建流程具有以下几个显著特点：

  • 快速启动：利用 ES 模块特性，快速启动开发服务器。
  • 按需编译：仅编译和处理实际需要的文件。
  • 高效 HMR：提供高效的热模块替换功能。
  • 代码分割：自动进行代码分割，生成更小的文件。
  • 优化输出：对输出文件进行进一步优化，提高性能。

这些特点使得 Vite 成为了现代前端开发中的一个重要工具。

33. created 和 mounted 有什么区别？

在 Vue.js 中，created 和 mounted 是组件生命周期中的两个重要钩子函数，它们在组件的不同阶段被调用，各有其适用场景。

Created 钩子

  • 调用时机：当一个 Vue 实例被创建完成之后立即调用，此时数据已经绑定，但是 DOM 还没有生成，也就是说 $el 属性还没有挂载到实例上。
  • 用途：适合于初始化某些属性值，执行异步操作（如发起 AJAX 请求），或者设置事件监听器等。由于此时 DOM 尚未生成，因此不能在此阶段进行任何 DOM 操作。

Mounted 钩子

  • 调用时机：当 Vue 实例被挂载到 DOM 上后调用，此时 Vue 实例的 $el 已经存在于文档内，并且所有子组件也已经被创建完毕。
  • 用途：适合于需要访问或操作 DOM 的场景，比如初始化第三方库（如图表库），或者是基于 DOM 的库（如 jQuery）。在这个阶段，你可以安全地与 DOM 进行交互。

区别

  • DOM 可用性：created 钩子执行时 DOM 尚未生成，而 mounted 钩子执行时 DOM 已经可用。
  • 应用场景：created 更适合于数据初始化和异步操作，而 mounted 更适合于需要与 DOM 交互的操作。

示例

假设你需要在 Vue 组件中初始化一个图表，你可能会这样安排：

  • 在 created 钩子中，你可以发送 AJAX 请求获取数据。
  • 在 mounted 钩子中，你可以使用获取到的数据来初始化图表。

总结

选择在 created 或者 mounted 钩子中执行操作取决于该操作是否需要访问 DOM。如果你需要操作 DOM 或者依赖于 DOM 的存在，那么应该将代码放在 mounted 钩子中；否则，如果只是简单的数据初始化或者异步操作，可以放在 created 钩子中。

34. webpack 5 的主要升级点有哪些？

Webpack 5 相对于之前的版本有一些重要的改进和新特性，以下是一些主要的升级点：

  1. 持久化缓存（Persistent Caching）

    • Webpack 5 引入了持久化缓存机制，允许在多次构建之间重用缓存的数据，从而显著减少构建时间。这意味着即使在开发环境中，也可以享受更快的构建速度。

  2. 功能清除（Feature Removal）

    • Webpack 5 移除了对一些旧特性的支持，比如不再为 Node.js 模块自动引用 Polyfills。这有助于减少不必要的开销，并使 Webpack 更加精简。

  3. 优化的默认配置（Optimized Default Configuration）

    • 默认配置得到了优化，以更好地适应现代的开发实践。这意味着在大多数情况下，开发者不需要手动调整太多配置就可以获得良好的性能。

  4. Webpack CLI 改进

    • Webpack 5 对其命令行界面进行了改进，提供了更好的用户体验和更多的功能选项。

  5. 性能优化

    • Webpack 5 专注于构建性能的优化，通过各种内部改进减少了构建时间和资源消耗。

  6. 支持最新的 Web 平台特性

    • Webpack 5 支持了更多的现代 Web 技术和标准，确保了与最新浏览器特性的兼容性。

  7. Node.js 生态系统的改进

    • 随着 Node.js 生态系统的不断进步，Webpack 5 也对其支持进行了更新，确保了与最新版本的 Node.js 兼容。

  8. 构建优化

    • 通过一系列的内部优化措施，Webpack 5 提高了构建过程的效率，尤其是在大型项目中更为明显。

  9. 支持新的 Node.js 版本

    • Webpack 5 要求 Node.js 的最小版本为 10.13.0，这表明它放弃了对更老版本 Node.js 的支持，以便利用新版本提供的性能改进和新特性。

这些升级点共同作用，使得 Webpack 5 成为了一个更加强大、高效且易于使用的构建工具。对于开发者而言，这意味着可以享受到更快的构建速度、更简洁的配置以及对现代 Web 技术更好的支持。

35. 虚拟dom渲染到页面的时候，框架会做哪些处理？

当虚拟DOM需要渲染到页面时，框架通常会执行以下步骤：

  1. 初始渲染

    • 框架会根据应用程序的状态构建一个表示整个页面结构的虚拟DOM树。这个树是由轻量级的JavaScript对象组成的，它们描述了页面上的元素、属性、事件处理程序等信息。

  2. Diff算法

    • 当状态改变导致需要重新渲染时，框架会创建一个新的虚拟DOM树来反映当前的状态。接着，框架会使用一种称为“Diff算法”的方法来比较新的虚拟DOM树与之前渲染的虚拟DOM树。
    • Diff算法的目标是找出这两个树之间的最小差异，从而确定哪些部分需要更新。这一过程避免了对整个页面的重新渲染，而是仅更新变化的部分，提高了渲染效率。

  3. 更新差异

    • 根据Diff算法找出的变化，框架会对真实DOM进行相应的更新操作。这可能包括插入新的DOM节点、删除旧的节点、更新现有节点的属性或样式等。
    • 为了进一步优化性能，框架可能会采用批量更新策略，将多个DOM操作合并成一次，或者使用异步更新的方式，将DOM操作推迟到下一帧进行。

  4. 触发生命周期钩子

    • 在完成DOM的更新之后，框架会触发生命周期钩子函数，让开发者有机会在特定的时间点执行自定义逻辑。例如，在Vue.js中，当组件被挂载到DOM上时，会触发放置在mounted钩子中的代码。

通过上述步骤，框架能够高效地将应用程序的状态变化反映到用户界面上，同时尽量减少对真实DOM的操作，从而提升用户体验和应用性能。

36. setTimeout 延时写成0，一般可以什么场景下使用？

将 setTimeout 的延时设置为 0 毫秒，在 JavaScript 的异步编程中可以用于以下几种场景：

  1. UI 渲染后的回调

    • 当需要在当前事件循环结束后，等待浏览器完成 UI 渲染后再执行回调函数时，可以使用 0 延时。这样可以确保回调在界面更新之后执行，以避免阻塞 UI 线程。

  2. 异步操作处理

    • 有时需要将某些操作推迟到下一个事件循环周期，以便让其他异步操作优先执行。通过将操作放置在 0 延时的 setTimeout 回调中，可以使其成为下一个事件循环周期的任务，并确保在其他异步操作之后执行。

  3. 性能优化

    • 在某些情况下，将操作延迟到下一个事件循环周期可以提高性能。这是因为浏览器在每次重绘（repaint）之前都会合并多个变更，如果将操作延迟到下一刻，可以减少不必要的重绘次数。

  4. 确保执行顺序

    • 如果需要确保某个函数在当前执行栈中的所有同步操作完成后才执行，但又不想等待一个实际的时间间隔，可以使用 setTimeout 设置为 0 毫秒。这可以用来控制代码的执行顺序，特别是在复杂的异步逻辑中。

  5. 模拟微任务

    • 虽然 setTimeout 本质上是一个宏任务，但是设置为 0 毫秒的 setTimeout 可以用来模拟在当前宏任务结束后的下一个宏任务开始前执行的行为，类似于微任务（如 Promise 的 .then 回调）的效果。

使用 setTimeout 设置为 0 毫秒的一个关键点在于，它不是立即执行，而是被安排在当前宏任务结束之后，下一个宏任务开始之前执行。这可以用来解决一些特定的异步编程问题，尤其是在需要精确控制执行顺序的情况下。

37. 编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能

1. 安装 Vue.js

确保你已经安装了 Vue.js。如果没有安装，可以使用以下命令安装 Vue CLI：

sh
npm install -g @vue/cli

2. 创建 Vue 项目

创建一个新的 Vue 项目：

sh
vue create my-project
cd my-project

3. 创建组件

在 src/components 目录下创建一个名为 Accordion.vue 的组件文件。

Accordion.vue

vue
<template>
  <div class="accordion">
    <div v-for="(item, index) in items" :key="index" @click="toggleItem(index)">
      <div class="header" :class="{ active: item.expanded }">
        <slot name="header" :item="item">{{ item.header }}</slot>
      </div>
      <div class="content" v-if="item.expanded">
        <slot :item="item">{{ item.content }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      items: this.modelValue || []
    };
  },
  watch: {
    modelValue(newVal) {
      this.items = newVal;
    }
  },
  methods: {
    toggleItem(index) {
      this.items[index].expanded = !this.items[index].expanded;
      this.$emit('update:modelValue', this.items);
    }
  }
};
</script>

<style scoped>
.accordion {
  margin: 1rem;
}

.header {
  cursor: pointer;
  padding: 0.5rem;
  background-color: #f0f0f0;
}

.header.active {
  background-color: #e0e0e0;
}
</style>

4. 使用组件

在 src/App.vue 中使用这个组件。

App.vue

vue
<template>
  <div id="app">
    <Accordion v-model="items">
      <template v-slot:header="{ item }">
        {{ item.header }}
      </template>
      <template v-slot="{ item }">
        {{ item.content }}
      </template>
    </Accordion>
  </div>
</template>

<script>
import Accordion from './components/Accordion.vue';

export default {
  components: {
    Accordion
  },
  data() {
    return {
      items: [
        { header: '标题 1', content: '这是内容 1', expanded: false },
        { header: '标题 2', content: '这是内容 2', expanded: false },
        { header: '标题 3', content: '这是内容 3', expanded: false }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释

  1. Accordion.vue

    • 组件接收 modelValue 属性，用于双向绑定。
    • 使用 v-for 循环渲染每个项目，并添加点击事件来切换展开状态。
    • 使用 @click 事件来触发 toggleItem 方法，更新项目的展开状态。
    • 使用插槽来接收外部内容，包括标题和内容。

  2. App.vue

    • 在父组件中定义 items 数组，并将其传递给 Accordion 组件。
    • 使用 v-slot 插槽来传递标题和内容。

这样就实现了一个可折叠展开的组件，并且支持 v-model 双向绑定和插槽内容传递。 下面是示例代码：

<template>
  <div>
    <button @click="toggleCollapse">
      {{ collapsed ? '展开' : '折叠' }}
    </button>
    <div v-show="!collapsed">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'collapsed',
    event: 'toggle',
  },
  props: {
    collapsed: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    toggleCollapse() {
      this.$emit('toggle', !this.collapsed);
    },
  },
};
</script>

此组件包含一个按钮，根据collapsed属性的值显示"折叠"或"展开"文本。在按钮的click事件中，调用toggleCollapse方法来切换collapsed的状态，并通过自定义事件toggle将新的状态传递给父组件。

组件内部有一个v-show指令，根据collapsed属性的值决定是否显示插槽内容。当collapsed为true时，插槽内容将被隐藏；当collapsed为false时，插槽内容将显示出来。

在使用该组件时，可以使用v-model来进行双向绑定：


<template>
  <div>
    <collapse-panel v-model="isCollapsed">
      <!-- 插入要折叠展开的内容 -->
      <p>这是要折叠展开的内容</p>
    </collapse-panel>
  </div>
</template>

<script>
import CollapsePanel from '@/components/CollapsePanel.vue';

export default {
  components: {
    CollapsePanel,
  },
  data() {
    return {
      isCollapsed: true,
    };
  },
};
</script>

此外，将isCollapsed属性绑定到v-model指令上，以实现双向绑定。通过控制isCollapsed的值，可以折叠或展开插槽内的内容。

38. Vue是怎么把template模版编译成render函数的？

Vue.js 将模板编译成 render 函数的过程涉及多个步骤。这个过程通常被称为“模板编译”或“虚拟 DOM 编译”。以下是详细的步骤：

1. 模板解析

当 Vue.js 应用启动时，它会解析模板字符串，并将其转换成抽象语法树（Abstract Syntax Tree, AST）。

2. 生成渲染函数

接下来，Vue.js 会遍历 AST，并生成对应的渲染函数（render function）。

3. 优化

在生成渲染函数的过程中，Vue.js 还会对模板进行优化，例如去除不必要的计算、合并相邻的文本节点等。

详细步骤

1. 模板解析

Vue.js 使用一个解析器将模板字符串解析成 AST。AST 是一个表示模板结构的树形结构，其中每个节点代表一个 HTML 元素、指令或表达式。

2. AST 转换

Vue.js 会遍历 AST，并生成对应的渲染函数代码。这个过程涉及到以下步骤：

  • 生成元素节点：将每个 HTML 元素转换成对应的虚拟 DOM 节点。
  • 处理指令：将模板中的指令（如 v-if, v-for, v-bind, v-on 等）转换成对应的 JavaScript 代码。
  • 处理表达式：将模板中的表达式（如 {{ message }}）转换成对应的 JavaScript 表达式。

3. 生成渲染函数

最终，Vue.js 会生成一个渲染函数，该函数返回一个虚拟 DOM 节点（VNode）。

示例

假设我们有一个简单的模板：

html
<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="showParagraph">这是一个段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      showParagraph: true
    };
  }
};
</script>

模板解析

Vue.js 会将这个模板解析成如下 AST 结构：

javascript
{
  tag: 'div',
  children: [
    {
      tag: 'h1',
      children: [
        {
          type: 3,
          text: 'Hello, Vue!'
        }
      ]
    },
    {
      tag: 'p',
      children: [
        {
          type: 3,
          text: '这是一个段落。'
        }
      ],
      directives: [
        {
          name: 'if',
          value: 'showParagraph'
        }
      ]
    }
  ]
}

生成渲染函数

Vue.js 会将 AST 转换成对应的渲染函数代码：

javascript
export default {
  render(createElement) {
    return createElement(
      'div',
      [
        createElement('h1', [this.message]),
        this.showParagraph ? createElement('p', ['这是一个段落。']) : null
      ]
    );
  }
};

详细解释

  1. createElement 函数

    • createElement 是 Vue.js 内置的函数，用于创建虚拟 DOM 节点。
    • 第一个参数是标签名。
    • 第二个参数是子节点数组。

  2. 处理表达式

    • 模板中的表达式 {{ message }} 被转换成 this.message。

  3. 处理指令

    • 指令 v-if 被转换成条件判断语句 this.showParagraph ? ... : null。

总结

Vue.js 的模板编译过程主要包括以下几步：

  1. 模板解析：将模板字符串解析成 AST。
  2. AST 转换：遍历 AST 并生成对应的渲染函数代码。
  3. 生成渲染函数：最终生成一个 render 函数，该函数返回一个虚拟 DOM 节点。

通过这种方式，Vue.js 能够高效地将模板转换成可执行的 JavaScript 代码，并在需要时动态生成虚拟 DOM，从而实现高效的渲染和更新。

39. 有些框架不用虚拟dom，但是他们的性能也不错是为什么？

这主要是因为它们采用了不同的技术和策略来优化 DOM 操作。以下是一些可能的原因：

  1. 直接操作 DOM

    • 这些框架可能直接对真实的 DOM 进行操作，而不是通过虚拟 DOM 中间层来进行抽象。直接操作 DOM 可以减少一些虚拟 DOM 的计算和比较开销。

  2. 精细的变更追踪

    • 框架可能采用更精细的变更追踪机制，只更新需要变更的部分，而不是重新渲染整个组件。通过避免不必要的 DOM 操作，可以提高性能。

  3. 异步渲染

    • 一些框架可能使用异步渲染技术，将多个 DOM 操作合并到一次更新中，从而减少浏览器的重排和重绘。例如，利用 requestAnimationFrame 或 MutationObserver 等机制延迟渲染，以便在下一个绘制周期内进行批量更新。

  4. 性能优化策略

    • 框架可能包含一些性能优化策略，如组件缓存、懒加载、异步加载等，以提高初始加载和后续渲染的执行效率。

  5. 针对特定用例的优化

    • 某些框架可能专注于解决特定的问题或场景，并进行了相应的优化。这些优化可以包括针对数据量较小或操作频率较低的应用进行的特定优化。

举一个具体的例子，Angular 在 Angular Ivy 渲染器中采用了增量 DOM 的思想，即只更新那些确实发生了变化的部分，而不是像 React 那样完全重建虚拟 DOM 树并进行 diff。增量 DOM 的方法可以减少内存使用和计算开销，从而在某些情况下提供更好的性能。

另一个例子是 Vue.js 3，虽然它仍然使用虚拟 DOM，但它引入了更高效的 Fragment 概念和更精细的依赖追踪机制，使得渲染过程更加高效。

总的来说，不同的框架根据它们的设计理念和技术栈，采取了不同的策略来优化渲染性能。虚拟 DOM 不是唯一的选择，也不是在所有情况下都是最优解。选择哪种方案取决于具体的应用需求和性能要求。

40. 描述下列代码的执行结果

foo(typeof a);
function foo(p) {
  console.log(this);
  console.log(p);
  console.log(typeof b);
  let b = 0;
}

这段代码的执行结果可能会引发一些意外行为，因为它涉及到了变量的作用域和提升（hoisting）机制。让我们逐步分析这段代码的执行过程。

代码分析

javascript
foo(typeof a);

function foo(p) {
  console.log(this);
  console.log(p);
  console.log(typeof b);
  let b = 0;
}

步骤 1: 执行 foo(typeof a)

  1. 调用 foo 函数：

    javascript
foo(typeof a);

  2. 变量 a 未声明：

    • typeof a 会抛出一个 ReferenceError，因为 a 在全局作用域中未声明。

步骤 2: foo 函数体

假设我们忽略第一步中的错误，继续分析 foo 函数内部的行为：

  1. 打印 this：

    javascript
console.log(this);
    • 在非严格模式下，this 在全局作用域中指向全局对象（通常是 window 或 global）。
    • 在严格模式下，this 指向 undefined。

  2. 打印 p：

    javascript
console.log(p);
    • p 是函数参数，传入的是 typeof a 的结果。但由于 a 未声明，这里会抛出 ReferenceError。

  3. 打印 typeof b：

    javascript
console.log(typeof b);
    • 在 let b = 0; 之前，b 会被提升（hoisted），但不会被初始化。因此，typeof b 的结果是 "undefined"。

  4. 声明并赋值 b：

    javascript
let b = 0;
    • 这里声明并初始化了变量 b。

执行结果

  1. 第一步中的错误：

    • typeof a 会抛出 ReferenceError，因为 a 未声明。
    • 这意味着 foo(typeof a) 无法正常执行。

  2. 假设忽略第一步错误：

    • 如果忽略第一步中的错误，foo 函数内部的行为如下：

      • console.log(this) 输出全局对象（非严格模式）或 undefined（严格模式）。
      • console.log(p) 由于 a 未声明，这里会抛出 ReferenceError。
      • console.log(typeof b) 输出 "undefined"。
      • let b = 0 声明并初始化 b。

实际执行结果

由于 typeof a 会抛出 ReferenceError，因此实际的执行结果应该是：

plaintext
Uncaught ReferenceError: a is not defined

总结

  1. 错误抛出：

    • typeof a 会抛出 ReferenceError，因为 a 未声明。
    • 因此，foo(typeof a) 无法正常执行。

  2. 忽略错误的情况：

    • 如果忽略第一步中的错误，foo 函数内部的行为如下：

      • 输出全局对象或 undefined。
      • 抛出 ReferenceError。
      • 输出 "undefined"。
      • 声明并初始化 b。

因此，实际的执行结果是：

plaintext
Uncaught ReferenceError: a is not defined
avatar
文章
阅读
粉丝