前端面试（争取日更版）（三）

前端菜柒

已于 2024-04-27 09:50:19 修改

阅读量574

点赞数 29

文章标签：前端面试职场和发展

于 2024-04-27 09:35:26 首次发布

本文链接：https://blog.csdn.net/a6666aa777/article/details/138239372

版权

面试真题

笔者正在每天争分夺秒准备着前端的面试中，这个系列是笔者每天看牛客网总结出来的各个前端大厂面试真题（主要会涉及到html，css，js，vue，计算机网络等前端必备知识）

一、前端如何实现数据缓存（5条）

1.LocalStorage 和 SessionStorage：

使用 localStorage 和 sessionStorage API 可以在浏览器中存储键值对数据。

localStorage 中存储的数据在关闭浏览器后仍然保留，而 sessionStorage 中存储的数据在会话结束（即关闭标签页或浏览器）后会被清除

2.Cookies：

Cookies 是一种在客户端存储数据的方式，但是其存储容量有限且每次请求都会携带在 HTTP 头中，可能会影响性能。

Cookies 主要用于存储较小的数据，如用户身份认证信息等。

3.内存缓存：

在 JavaScript 中，可以使用变量或对象来进行内存级别的数据缓存。

这种方式的优势是速度快，但是缺点是数据会在页面刷新或关闭时丢失。

4.Service Worker 缓存：

Service Worker 是一种在浏览器后台运行的脚本，可以拦截和处理网络请求。

可以使用 Service Worker 来缓存网络请求的响应数据，从而实现离线访问和提升应用性能的目的。

5.缓存框架和库：

有一些前端框架和库提供了专门的数据缓存解决方案，如 Vue.js 的 Vuex、React 的 Redux 等。

这些框架和库提供了统一的状态管理机制，可以方便地进行数据的存储、更新和访问。

选择合适的数据缓存方案需要考虑到数据量、数据类型、对实时性的要求以及应用的具体需求等因素。

二、Vuex

Vuex 是 Vue.js 应用程序的状态管理模式和库，它集中式地管理 Vue 应用中的所有组件的状态。通过 Vuex，您可以在一个全局的 store 中存储应用的所有组件共享的状态，并通过一些规定的方式修改这些状态，以确保状态的可追踪性和一致性。

Vuex 主要由以下几个核心概念组成：

State（状态）： Vuex 中的状态类似于 Vue 组件中的 data，但是它是全局的，所有组件共享的。State 通过 store 对象进行访问。
Mutation（突变）： Mutation 是 Vuex 中唯一允许修改状态的方式。每个 Mutation 都有一个字符串的类型和一个回调函数，用于修改 State 中的数据。（有点vue2中watch属性的味道）
Action（动作）： Action 类似于 Mutation，但是它提交的是 Mutation 而不是直接修改 State。Action 用于处理异步操作，可以包含任意异步操作。
Getter（获取器）： Getter 用于从 State 中派生出一些状态，类似于计算属性。Getter 可以接受其他 Getter 作为第二个参数。（有点vue2中computed属性的味道，都具备响应式依赖的特性）
Module（模块）： Vuex 允许将 Store 分割成模块，每个模块都可以有自己的 State、Mutation、Action、Getter 等。

通过这些核心概念，Vuex 提供了一种集中式管理应用状态的方式，使得状态的变化更加可控和可追踪，从而更容易维护大型的 Vue.js 应用程序。

三、vue的双向数据绑定是如何实现

Vue 的双向数据绑定是通过 v-model 指令实现的。这个指令在表单元素上创建了双向数据绑定。当用户在表单元素上输入内容时，数据会自动更新到 Vue 实例中，同时，如果在 Vue 实例中的数据发生变化，也会反映到相关的表单元素上。

主要通过数据劫持和发布-订阅者的模式来实现。

四、BFC

BFC 指的是块级格式化上下文（Block Formatting Context）。它是 CSS 中的一个概念，用于描述在页面上的一个独立的渲染区域，其中的元素按照特定的规则进行布局。

BFC 主要有以下特性：

内部的 Box 会在垂直方向上一个接一个放置：在同一个 BFC 中的两个相邻的 Box 的垂直距离由 margin 决定。也就是说，属于同一个 BFC 的两个相邻的块级元素的上下 margin 会发生重叠。

每个元素的左外边缘（margin-left）会触碰到包含块的左边缘（即 BFC 的左边缘），而不会与 BFC 中的元素发生重叠。

BFC 区域不会与浮动元素发生重叠：BFC 区域会包含浮动的子元素。

BFC 可以阻止元素被浮动元素覆盖：BFC 区域会将它内部的所有内容包裹起来，即使是浮动的元素，也会被包含在 BFC 区域

BFC 可以包含浮动的子元素：BFC 会包含浮动的子元素，因此可以清除浮动。

BFC 区域内部的元素不会与外部的浮动元素发生重叠

BFC 的形成条件包括：

1.根元素或包含根元素的元素
2.浮动（元素的 float 不是 none）
3.绝对定位元素（元素的 position 为 absolute 或 fixed）
4.行内块（元素的 display 为 inline-block）
5.表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为 BFC）
6.表格标题（元素的 display 为 table-caption）
7.包含了 overflow 为 hidden、scroll、auto 的元素

通过创建 BFC，可以避免一些布局问题，比如浮动元素导致的高度塌陷、margin 重叠等。

五、js的原型链和原型链的顶端

avaScript 中的原型链是一种用于实现继承和属性查找的机制。每个 JavaScript 对象都有一个指向另一个对象的链接，这个链接被称为原型。当试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript 引擎就会沿着这个原型链向上查找，直到找到该属性或者到达原型链的顶端为止。

原型链的顶端是 Object.prototype，它是所有 JavaScript 对象的原型链的终点。Object.prototype 是 JavaScript 中的基础对象，其他所有对象都直接或间接地继承自 Object.prototype。因此，当 JavaScript 引擎在原型链上查找属性时，如果找不到属性，就会到达 Object.prototype，如果还找不到，就会返回 undefined。

简而言之，JavaScript 中的原型链就是对象之间通过原型链相互关联起来的一种机制，而原型链的顶端是 Object.prototype。