2024年最全前端八股文汇总(2)，35岁学习web前端开发

2401_84411433

已于 2024-05-07 11:20:49 修改

阅读量1.9k

点赞数 27

分类专栏：程序员文章标签：前端学习

于 2024-05-07 11:20:47 首次发布

本文链接：https://blog.csdn.net/2401_84411433/article/details/138525074

版权

程序员专栏收录该内容

217 篇文章

订阅专栏

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

5、对webpack的理解，以及性能优化的底层实现

**定义：Webpack**是一个现代化的前端构建工具，它主要用于将多个模块打包成一个或多个静态资源文件。它具有很多强大的功能，如代码分割、模块化管理、静态资源处理等，可以帮助开发者更高效地组织和管理前端代码。
性能优化的实现逻辑：
- 代码分割：Webpack支持将代码拆分成多个小模块，按需加载，从而减少初始加载的文件大小，提高页面的加载速度。通过使用import()函数或动态导入语法，Webpack可以根据需要异步加载模块。
- Tree Shaking：**Tree Shaking是指通过静态代码分析，识别并删除项目中未被使用的代码。Webpack**利用JavaScript的模块化特性，可以进行静态分析，找出未被引用的代码并且在打包过程中将其删除，从而减少最终打包文件的体积。
- 模块热替换（HMR）：**Webpack**内置了模块热替换功能，可以在开发过程中实现实时更新。HMR允许我们在不刷新整个页面的情况下，只更新修改的模块，提高开发效率。
- 缓存：**Webpack**会为每个生成的文件生成唯一的哈希值，这样可以保证文件内容发生变化时，文件名也会跟着变化。这种方式可以使浏览器缓存失效，确保用户获取到最新的资源。
- 代码压缩和优化：Webpack提供了压缩JavaScript、CSS文件的插件，如UglifyJSPlugin和OptimizeCSSAssetsPlugin，可以将代码进行混淆、删除无用代码、优化变量等，从而减小文件体积，提高加载速度。

6、除了loader、图片压缩还可通过什么实现webpack优化

代码分割(Code Splitting): 使用Webpack的代码分割功能，将代码分割成更小的块，以便在需要时按需加载。这可以减少初始加载时间并提高页面性能。
懒加载(Lazy Loading): 通过懒加载将一些模块延迟加载到需要时再加载，而不是在初始加载时一次性加载所有内容。这可以提高页面的初始加载速度，并降低资源的使用量。
Tree Shaking: 使用Webpack的Tree Shaking功能可以消除未使用的代码，减少打包后的文件大小。这可以通过配置Webpack来实现，通常与ES6模块和静态分析工具（如UglifyJS）一起使用。
代码压缩(Minification): 使用Webpack的压缩插件（如UglifyJSWebpackPlugin）来压缩和混淆JavaScript代码，以减小文件大小并提高加载速度。
缓存(Caching): 配置Webpack以生成带有内容哈希的文件名，以便在文件内容发生更改时进行缓存失效。这可以通过设置output.filename和output.chunkFilename来实现。
模块解析优化(Module Resolution Optimization): 优化Webpack的模块解析过程，以减少解析时间并提高构建性能。可以通过配置resolve选项来指定解析规则和解析模块的路径。
使用CDN: 将一些通用的库（如React、Vue等）以及一些公共资源（如字体、样式表等）托管在CDN上，以减轻服务器负载并加快资源加载速度。
Webpack性能分析(Webpack Bundle Analyzer): 使用Webpack Bundle Analyzer工具分析构建后的包，找出构建过程中存在的性能瓶颈，并根据分析结果进行优化。
并行构建(Parallel Building): 使用Webpack的并行构建功能（如thread-loader、parallel-webpack等）来加速构建过程，特别是在大型项目中可以显著提高构建速度。
持久化缓存(Persistent Caching): 使用持久化缓存来加速Webpack的构建过程，以便在多次构建时重用之前的缓存结果，从而减少重复工作。

7、实现一个Peomise.all

理论步骤：
- 创建一个自定义的myPromiseAll函数，接收一个包含多个Promise对象的数组作为参数。
- 内部创建一个新的Promise对象，用于返回最终的结果。
- 判断传入的参数是否为数组，如果不是，则直接返回一个被拒绝的Promise，并提示参数类型错误。
- 创建一个计数器count，用于记录已经完成的Promise数量。
- 创建一个结果数组results，用于存储每个Promise的执行结果。
- 遍历传入的Promise数组，对每个Promise对象进行处理：
  - 使用.then()方法注册一个回调函数，在Promise对象完成时将结果存入results数组，并将count加1。
  - 使用.catch()方法注册一个错误处理函数，在Promise对象被拒绝时，直接将整个myPromiseAll的Promise对象拒绝，并传递错误信息。
- 返回内部创建的Promise对象。
代码示例：

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      reject(new Error('参数应为一个Promise数组'));
    }
    
    const count = 0;
    const results = [];
    
    for (let i = 0; i < promises.length; i++) {
      promises[i]
        .then(result => {
          results[i] = result;
          count++;
          
          if (count === promises.length) {
            resolve(results);
          }
        })
        .catch(error => {
          reject(error);
        });
    }
  });
}
// 使用时，可以将多个Promise对象传入myPromiseAll函数，并使用.then()方法获取最终的结果：
const promise1 = new Promise(resolve => setTimeout(() => resolve('Promise 1'), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Promise 2'), 2000));
const promise3 = new Promise(resolve => setTimeout(() => resolve('Promise 3'), 3000));

myPromiseAll([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));

8、从 `new Vue()` 到页面挂载成功，Vue都执行了什么

创建 Vue 实例对象：通过 new Vue() 创建 Vue 实例对象，这将触发 Vue 的初始化过程。
初始化 Vue 实例：在初始化过程中，Vue 将会初始化其内部的状态、事件系统、生命周期钩子等。
合并配置：Vue 将用户提供的选项与内置选项进行合并，以确保所有配置都被正确应用。
调用 beforeCreate 生命周期钩子：在实例初始化之后，但在数据观测和事件配置之前调用。
初始化数据响应式：Vue 通过观察数据来建立数据的响应式，以便在数据变化时更新视图。
调用 created 生命周期钩子：在实例创建完成后调用。在这一阶段，Vue 实例已经完成了数据观测、属性和方法的运算，但尚未挂载到页面上。
编译模板：如果提供了 template 选项，Vue 将会编译模板成渲染函数。
挂载实例：通过调用 $mount() 方法，Vue 将实例挂载到 DOM 上。如果没有提供 el 选项，则挂载过程需要手动调用 $mount()。
调用 beforeMount 生命周期钩子：在挂载开始之前被调用。
创建 Vue 实例的渲染函数：Vue 将模板编译成渲染函数，用于渲染实例的视图。
调用 mounted 生命周期钩子：在实例被挂载后调用，这时实例已经挂载到 DOM 上并且可以进行 DOM 操作。
数据变化时更新视图：一旦实例挂载成功，当数据发生变化时，Vue 将会自动更新视图以反映数据的变化。

9、pinia底层原理

基于 Vue 的响应式系统： Pinia 的核心是建立在 Vue 的响应式系统之上的。Vue 的响应式系统使得数据的变化能够自动地反映到视图上，这是通过 Object.defineProperty 或 Proxy 实现的。Pinia 利用了 Vue 的响应式系统来实现状态的管理和变化的监听。
Store 实例：在 Pinia 中，状态被组织成一个个的 Store 实例。每个 Store 实例都包含了状态数据、用于修改状态的方法以及用于监听状态变化的方法。Store 实例可以被认为是应用程序中的一个模块，它负责管理一部分的状态。
插件机制： Pinia 提供了插件机制，可以用于扩展其功能。插件可以用于实现持久化存储、状态的快照、状态的变化追踪等功能。通过插件机制，可以很容易地定制 Pinia，以满足应用程序的特定需求。
状态的分模块管理：在大型应用程序中，状态通常会被划分成多个模块进行管理。Pinia 允许开发者将状态分散到不同的 Store 中，每个 Store 负责管理一部分状态。这样做的好处是可以更好地组织代码，并且可以减少状态之间的耦合。
提供了一套简单的 API： Pinia 提供了一套简单而强大的 API，用于定义 Store、访问 Store 中的状态以及修改状态。这些 API 包括 defineStore()、useStore()、store.state、store.getters、store.actions 等。
基于 Vue 3 Composition API： Pinia 是基于 Vue 3 的 Composition API 构建的。Composition API 提供了一种更灵活、更易于组织代码的方式，可以让开发者更容易地管理和复用状态逻辑。

10、vuex status怎么做模块化

创建模块文件：在你的 Vuex 应用中，创建一个或多个文件来存放模块相关的代码。你可以按照功能、领域或者其他逻辑来组织这些模块文件。
定义模块状态：在模块文件中，定义该模块的状态（state）。状态可以是任何 JavaScript 数据类型，如对象、数组等。
定义 mutations、actions、getters：在模块文件中，定义用于修改状态的 mutations、用于异步操作的 actions，以及用于获取状态的 getters。这些函数应该在模块作用域内定义，而不是全局定义。
导出模块定义：将模块中定义的状态、mutations、actions、getters 等导出，以便在根模块或其他模块中导入和注册。
在根模块中注册子模块：在根模块中使用 Vuex 的 modules 选项来注册子模块。这样做可以确保子模块的状态和方法能够在整个应用中被访问和使用。

11、全局分页组件，利用mixin进行管理，你会怎么降低分页组件的代码耦合

要想降低代码耦合提升性能首先要搞懂什么叫降低代码耦合：降低代码耦合是指通过设计和编写代码的方式，减少不同部分之间的依赖程度和联系，从而使得各个模块之间相互独立、易于维护和修改。代码耦合的降低可以通过使用接口、抽象类、设计模式等方法来实现，这样可以提高代码的灵活性和可重用性，降低修改一个模块对其他模块造成的影响，从而提高整个系统的稳定性和可维护性。

抽象通用逻辑到 mixin：将分页组件中的通用逻辑（如分页数据的计算、页码的生成、跳转到指定页等）抽象到 mixin 中。这样可以确保不同的分页组件共享相同的逻辑，减少重复代码。
参数化配置：使用 mixin 中的参数来配置分页组件的行为。例如，可以将每页显示条目数、当前页码、总页数等作为 mixin 的选项进行配置，以适应不同场景的需求。
事件处理函数：将分页组件中的事件处理函数（如点击页码、上一页、下一页等）抽象到 mixin 中，并通过参数化配置来指定具体的行为。这样可以使得分页组件更具灵活性，便于定制。
提供钩子函数：在 mixin 中提供钩子函数，允许开发者自定义分页组件的行为。例如，在跳转到指定页之前、每次页面变化后等时机提供钩子函数，以便开发者进行自定义处理。
封装接口：使用 mixin 封装分页组件的接口，只暴露必要的接口给外部使用。这样可以减少对分页组件内部实现的依赖，降低耦合度。
提供默认配置：在 mixin 中提供默认的配置选项，以便开发者可以快速地开始使用分页组件，并且可以根据需要进行定制。

12、Vue项目提升首屏加载速度以及页面切换流畅度

懒加载：
- 使用 Vue 路由的懒加载特性，按需加载组件，减少首屏加载所需的代码量。
- 使用 webpack 的代码拆分功能，将应用程序拆分为更小的代码块，并在需要时动态加载它们。
图片和资源优化：
- 压缩和优化图片，使用适当的格式（如 WebP）。
- 使用 CDN 加速静态资源加载。
- 使用字体子集，仅包含项目中实际用到的字符。
Vue 组件性能优化：
- 避免不必要的重渲染：合理使用 shouldComponentUpdate、v-once 等指令。
- 对长列表使用虚拟滚动技术，仅渲染可见区域内的元素。
缓存和预取：
- 使用适当的缓存策略，如使用浏览器缓存或者服务端缓存。
- 对于可能的下一个导航页面，提前进行资源预取，以缩短加载时间。
优化网络请求：合理使用**localStorage、sessionStorage**等浏览器缓存策略，尽量减少 HTTP 请求的数量。
**服务端渲染 (SSR)：**使用 Vue 的服务器端渲染 (SSR) 技术，将页面的初始 HTML 内容在服务器上生成，从而加快首屏加载速度。