2023-08-25 前端面试

前端面试分享

一、 实现垂直居中的几种方式

Flexbox布局：
使用Flexbox是实现垂直居中最简单和常用的方法之一。将容器设置为display: flex;，然后使用align-items: center;将项目在交叉轴上居中。

.container {
 display: flex;
 align-items: center; /* 垂直居中 */
}

绝对定位和负边距：
这种方法适用于已知高度的情况。将要垂直居中的元素设置为position: absolute;，然后使用top: 50%;将其移动到父容器的中间，再通过负边距将其向上移动自身高度的一半。

Copy code
.centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

表格布局：
使用display: table;和display: table-cell;可以实现垂直居中，类似于表格的布局。

.table-container {
  display: table;
  height: 100%; /* 父容器要有确定的高度 */
}

.table-cell {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

Grid布局：
类似于Flexbox，使用Grid布局也可以实现垂直居中。

Copy code
.container {
  display: grid;
  place-items: center; /* 垂直居中 */
}

使用line-height：
这适用于只有单行文本的情况。将line-height设置为和容器高度相等，使文本在容器中垂直居中。

Copy code
.container {
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 垂直居中 */
}

二、什么是重排，重绘

重排（Reflow）和重绘（Repaint）是与浏览器渲染流程相关的两个概念，它们在前端性能优化中非常重要。

重排（Reflow）：
重排指的是当DOM的变化影响了元素的几何属性（例如位置、尺寸）时，浏览器需要重新计算元素的几何属性，并重新布局页面。重排是一项昂贵的操作，因为它涉及到整个文档的重新布局和元素的重新计算。

重排可能发生在以下情况：

添加、删除、更新DOM元素。
修改元素的样式，如修改宽度、高度、字体大小等。
浏览器窗口尺寸变化。
重绘（Repaint）：
重绘指的是当元素的外观发生变化，但不影响布局时，浏览器会将新的样式绘制到屏幕上。重绘的开销相对较小，因为它不需要重新计算元素的几何属性。

重绘可能发生在以下情况：

修改元素的颜色、背景色、文本颜色等。
添加阴影、边框等。
因此，为了提高前端性能，应该尽量减少重排和重绘的次数。减少重排和重绘可以通过以下方式来实现：

使用CSS动画：使用transform和opacity等属性进行动画，它们不会引起重排。
批量修改样式：避免多次单独修改样式，可以将多个修改合并到一次操作中。
使用离线DOM操作：在修改DOM之前，将元素脱离文档流（例如使用display: none;），完成修改后再放回文档流，这样可以避免多次重排。
使用虚拟DOM：在框架（如React、Vue）中，使用虚拟DOM来最小化重排和重绘的次数。
理解重排和重绘的原理以及如何避免不必要的操作可以帮助你优化前端性能，提升用户体验。

三、说一下原型和原型链

在JavaScript中，原型（Prototype）和原型链（Prototype Chain）是理解对象和继承的核心概念
1. 原型（Prototype）：
在JavaScript中，每个对象都有一个原型。原型是一个对象，包含可共享的属性和方法。当你访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript引擎会在原型链上查找

2.原型链（Prototype Chain）：
原型链是一种机制，它定义了对象之间的继承关系。每个对象都有一个指向其原型的链接，从而构成了一个链条。当你访问一个对象的属性或方法时，如果对象本身没有，JavaScript会在原型链上一层一层地查找，直到找到对应的属性或方法，或者到达原型链的末尾（null）。

原型和原型链是JavaScript中实现继承和对象共享属性方法的基础。理解它们有助于你更好地组织代码，实现代码复用，并更深入地理解JavaScript中对象的工作原理。

四、EventLoop事件循环

事件循环（Event Loop）是一种在单线程环境下处理异步操作的机制。它在JavaScript中起着至关重要的作用，使得异步操作如定时器、网络请求、用户交互等能够以非阻塞的方式执行，从而不会阻碍代码的执行。

JavaScript是单线程的，这意味着它一次只能执行一个任务。但在现代的应用中，我们需要处理许多异步操作，如加载资源、处理用户输入等。这就是事件循环的作用，它允许JavaScript引擎在执行同步任务的同时，处理异步任务。

事件循环的工作原理如下：

1. 执行同步任务：JavaScript引擎首先执行主线程上的同步任务，即代码按顺序执行。

2. 执行微任务：在同步任务执行完成后，会检查是否有微任务（Microtask）需要执行。微任务是一个异步的任务队列，其中的任务会在当前任务执行完毕后立即执行。

3. 执行宏任务：如果在执行微任务时，产生了新的宏任务（Macrotask），那么会将新的宏任务推入到宏任务队列中，等待执行。宏任务包括定时器、I/O操作、事件监听等。

4. 循环：不断地重复上述过程，即执行同步任务、微任务，然后执行一个宏任务，再执行微任务，如此循环。

这个循环不断地进行，使得JavaScript能够处理多个异步操作，同时保持单线程的特性。微任务通常比宏任务优先级更高，这意味着微任务会在下一个宏任务执行之前得到处理。

以下是事件循环的简化示意图：

[同步任务] -> [微任务] -> [宏任务] -> [微任务] -> [宏任务] -> ...

• 事件循环机制是理解JavaScript异步编程的关键概念之一。深入了解它可以帮助你更好地编写高效、非阻塞的代码。

五、Vue 组件之间如何传值

1. Props（属性传递）：

使用Props（属性）来从父组件向子组件传递数据。父组件可以在子组件上使用属性绑定，子组件通过props属性接收传递的值。

父组件：

<template>
  <child-component :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2. $emit（自定义事件）：

使用$emit方法在子组件中触发一个自定义事件，并将数据传递给父组件。

子组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child');
    }
  }
};
</script>

父组件：

<template>
  <child-component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出 'Hello from child'
    }
  }
};
</script>

3. Vuex（状态管理库）：

对于大型应用程序，你可以使用Vuex来在多个组件之间共享状态。Vuex将状态存储在中央存储中，允许不同组件之间实时同步数据。

Provide/Inject：
使用provide在父组件中提供数据，并使用inject在子组件中注入数据。这在跨层级组件传递数据时非常有用，但要注意不要过度使用，以保持组件的独立性。

父组件：

<template>
  <child-component />
</template>

<script>
export default {
  provide: {
    message: 'Hello from parent'
  }
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

• 以上是一些常见的Vue组件之间传递数据的方法。你可以根据应用的需要选择最适合的方式。

六、说一下VueX 和 pinia

Vuex 和 Pinia 都是 Vue.js 状态管理库，用于管理应用程序的状态（数据）并实现组件之间的通信。尽管它们的目标相同，但在实现方式和使用上存在一些区别。

Vuex：

官方状态管理库：Vuex 是 Vue.js 官方提供的状态管理库，被广泛用于 Vue.js 应用中。

中心化存储：Vuex 使用单一的全局状态树来存储应用的所有状态。状态存储在一个对象中，组件通过 getters 和 mutations 来读取和修改状态。

模块化：Vuex 允许将状态划分为多个模块，每个模块可以拥有自己的 state、getters、mutations、actions 等。

Actions 和 Mutations：在 Vuex 中，actions 用于处理异步操作，而 mutations 用于同步地修改状态。通常，异步操作应该在 actions 中处理，然后再调用 mutations 来修改状态。

插件和工具支持：Vuex 支持插件和开发者工具，使你可以更好地进行调试和监测状态变化。

Pinia：

去中心化存储：Pinia 的设计理念是去中心化存储，每个组件拥有自己的状态，不再需要全局的状态树。每个组件都有自己的 store 实例。

类型安全：Pinia 借助 TypeScript 的支持，提供了类型安全的状态管理。它使用类型来确保在 store 中的数据和方法调用时的正确性。

Composition API 集成：Pinia 在 Vue 3 的 Composition API 上构建，使得它与 Vue 3 中的开发方式更加契合。

轻量级：Pinia 的核心库相对较小，只包含了最基本的功能，但它支持插件扩展来增加更多功能。

插件和工具支持：虽然 Pinia 在插件和工具方面没有像 Vuex 那样成熟的生态，但正在逐渐发展中。

总之，Vuex 是 Vue.js 生态系统中的经典状态管理库，适用于大多数应用。而 Pinia 则是基于 Vue 3 Composition API 构建的新一代状态管理库，强调去中心化存储和类型安全。你可以根据你的项目需求和偏好来选择适合的库。

七、Vue 2 和 Vue 3 有什么区别

Vue 3 是 Vue.js 的下一个主要版本，带来了许多改进和新特性。以下是 Vue 2 和 Vue 3 之间的一些重要区别：

Composition API（组合式API）：
Vue 3 引入了 Composition API，这是一个新的 API 风格，允许开发者更灵活地组织组件的逻辑。相比 Vue 2 中的选项分离，Composition API 更强调逻辑的组合，使代码更具可读性和维护性。

更好的响应性系统：
Vue 3 的响应性系统使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，这带来了更好的性能和更精确的响应性追踪。

更快的渲染性能：
Vue 3 使用了虚拟 DOM 的优化算法，减少了不必要的重渲染和 DOM 操作，从而提升了渲染性能。

更小的包体积：
Vue 3 的包体积相对较小，通过 tree-shaking 和按需引入，可以进一步减小应用的包大小。

Teleport 和 Suspense：
Vue 3 引入了 Teleport 组件，用于在 DOM 中的任何位置渲染组件，以及 Suspense 组件，用于更好地管理异步组件和数据加载状态。

全局 API 的变化：
Vue 3 中一些全局 API 发生了变化，比如 Vue.component 变为 app.component，Vue.directive 变为 app.directive，等等。

自定义渲染器：
Vue 3 允许开发者创建自定义渲染器，以便将 Vue 渲染到非 DOM 的目标，比如 Canvas、WebGL 等。

更好的 TypeScript 支持：
Vue 3 的代码库进行了重构，使得 TypeScript 支持更为完善，并且提供了更好的类型推断。

更多的优化和改进：
Vue 3 进行了多项优化和改进，包括更好的编译器、更丰富的错误提示、更灵活的插件系统等。

尽管 Vue 3 带来了许多改进，但由于 API 的变化，从 Vue 2 迁移到 Vue 3 可能需要进行一些调整。因此，在迁移之前，建议查阅 Vue 3 的文档和迁移指南，以便更好地理解和适应这些变化。

八、什么情况下是 undefined 什么情况下是 null

九、项目中有遇到什么困难的吗 （我回答的是 性能优化）

性能优化确实是前端开发中常遇到的一个重要困难之一。在大型应用中，随着页面变得更加复杂，性能问题可能会变得更加明显。以下是一些可能遇到的性能优化困难以及如何解决它们的方法：

1. 慢加载时间：页面加载时间过长可能会导致用户体验不佳。

解决方法：

使用懒加载：将页面分割成多个模块，按需加载。
压缩资源：压缩 JavaScript、CSS 和图片等资源以减小文件大小。
使用 CDN：将静态资源部署在内容分发网络上，加速加载速度。
使用浏览器缓存：使用缓存策略来减少不必要的网络请求。

2. 渲染性能问题：频繁的重渲染可能导致页面响应变慢。

解决方法：

使用虚拟 DOM：使用虚拟 DOM 减少真实 DOM 操作，提升渲染性能。
避免不必要的重渲染：使用 shouldComponentUpdate 或 PureComponent 优化组件更新。
使用 CSS 动画：使用 CSS 动画来取代 JavaScript 动画，提高动画性能。

3.内存泄漏：长时间运行的应用可能会出现内存泄漏，导致性能下降。

解决方法：

定期进行内存分析：使用浏览器开发者工具或专业工具来分析内存使用情况。
清理无用数据：手动清理无用的对象、事件监听等，防止无法回收的内存。

4.数据传递与状态管理：在大型应用中，数据传递和状态管理可能变得复杂。

解决方法：

使用合适的状态管理库：如 Vuex、Redux 或 Mobx，来管理全局状态。
使用局部状态：组件之间的状态可以尽量保持局部，避免过度使用全局状态。

5.异步操作：频繁的异步操作可能导致性能问题和代码难以维护。

解决方法：

使用节流和防抖：对于频繁触发的事件，使用节流和防抖来限制操作次数。
异步优化：使用 Web Workers 处理耗时操作，避免阻塞主线程。

6.移动端适配：在移动设备上，性能问题更为突出，需要特别关注。

解决方法：

使用响应式设计：使用 CSS 媒体查询和弹性布局来适配不同屏幕尺寸。
图片优化：使用适当尺寸和格式的图片，以减少移动设备上的加载时间。

这些只是性能优化中的一些常见困难和解决方法。优化是一个持续的过程，需要不断的监测和改进。通过合理的优化策略，可以显著提升应用的性能和用户体验。

十、箭头函数可以是构造函数吗

箭头函数在语法上是一种特殊类型的函数，它具有与普通函数（也称为常规函数或标准函数）不同的行为和特性。箭头函数不适用于所有用例，而且不能被用作构造函数。

主要区别如下：

1. 没有自己的this：
最大的区别是箭头函数没有自己的this上下文。它继承了其所在上下文中的this。这意味着在箭头函数内部，无法通过this来访问调用它的对象。而在普通函数中，this会根据调用方式动态变化。

2. 不能用作构造函数：
由于箭头函数没有自己的this，也没有prototype属性，它们不能被用作构造函数来创建对象。普通函数可以通过new关键字创建实例，但箭头函数不能。

3. 没有arguments对象：
箭头函数也没有自己的arguments对象。如果你需要使用函数参数，应该使用剩余参数语法（...args）。

因此，由于箭头函数的特殊行为，它们不适合作为构造函数。如果你需要在函数内部使用this，并且希望能够通过new关键字创建对象，应该使用普通函数。

// 普通函数，可以用作构造函数
function RegularFunction() {
  this.property = 'Value';
}
// 箭头函数，不能用作构造函数
const ArrowFunction = () => {
  // 无法使用this
};

const instance1 = new RegularFunction(); // 正常
const instance2 = new ArrowFunction(); // 报错：ArrowFunction is not a constructor

总之，箭头函数主要用于简化函数表达式，以及在需要较短的函数体时使用。如果你需要在函数内部使用this，或者希望将函数用作构造函数创建对象，应该使用普通函数。