面试真题
笔者正在每天争分夺秒准备着前端的面试中,这个系列是笔者每天看牛客网总结出来的各个前端大厂面试真题(主要会涉及到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。
总结
以上就是今天要讲的内容,本文算是我自己的一个日常总结,也是希望能够帮助到更多的前端er。