前端面试题

常用的伪元素有哪些？

::before 元素内容前插入新内容 ::after 元素内容之后插入新内容 ::first-letter 文本首字母。常用于对文本首字母设置样式 ::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。 ::selection 选中的内容。常用于文本。 ::placeholder 占位符。用于设置占位符的样式。

说说盒模型？

标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。 IE盒模型：元素的宽度和高度包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin） Content box: 这个区域是用来显示内容，大小可以通过设置  width  和  height 。 Padding box: 包围在内容区域外部的空白区域；大小通过  padding 相关属性设置。 Border box: 边框盒包裹内容和内边距。大小通过  border  相关属性设置。 Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过  margin 相关属性设置。

实现水平垂直居中的方式？

1: text-align:center，水平居中 2：margin: 0 auto，水平居中 3：line-height值，垂直居中 4：使用float属性，配合relative定位，实现水平居中 5：使用table布局，默认垂直居中 6: 仿table，display:table-cell。并使用vertical-align属性,实现垂直居中 7: 使用absolute绝对定位，配合margin使用，实现水平垂直居中 8: 使用absolute绝对定位，配合margin的负值 (negative margins)来实现水平垂直居中。

9.使用absolute绝对定位，配合translate 移动转换，实现水平垂直居中

移动端如何适配不同的设备？

1、媒体查询

2、百分比布局

3、弹性盒子布局

4、rem单位 + 动态的font-size

5、Viewport单位

css中的自适应单位有哪些？

使用px，结合Media Query进行阶梯式的适配； 使用%，按百分比自适应布局； 使用rem，结合html元素的font-size来根据屏幕宽度适配； 使用vw、vh，直接根据视口宽高适配。

本地储存有哪些，有什么区别？

cookie sessionStorage localStorage

存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

js的数据类型？如何判断数据类型？

其中基础类型包括：undefined，Null，Number，String，Boolean，Symbol，BigInt

引用类型：Object （其中Object又包括 Array，RegExp，Date，Math，Function）

为什么typeOf null是object？

在判断数据类型时，是根据机器码低位标识来判断的，而null的机器码标识为全0，而对象的机器码低位标识为000。所以typeof null的结果被误判为Object。

var，let，const的区别？

var的特点： 存在变量提升，一个变量可多次声明，后面的声明会覆盖前面的声明，在函数中使用var声明变量的时候，该变量是局部的，如果在函数内不使用var，该变量是全局的。

let的特点： 不存在变量提升，let声明变量前，该变量不能使用（暂时性死区），let命令所在的代码块内有效，let不允许在相同作用域中重复声明，注意是相同作用域，不同作用域有重复声明不会报错。

const的特点： const声明一个只读的变量，声明后，值就不能改变，const必须初始化，const并不是变量的值不能改动，而是变量指向的内存地址所保存的数据不得改动，let该有的特点const都有。

能用const的情况下尽量使用const，大多数情况使用let，避免使用var。

数组去重有哪些方法？

利用 ES6 Set 去重 利用 for 嵌套 for，然后 splice 去重 利用 indexOf 去重 利用递归去重

ES6新特性有哪些？

ES6新增了两个声明变量的关键字：let和const。 箭头函数 解构赋值　 Map和Set 对象的拓展运算符(...)三点 includes()方法 参数默认值 class（类） ES6使用关键字 import 导入模块 ES6 通过 export 和export default 导出模块 Promise

说一下防抖和节流？

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

如何实现深浅拷贝？

浅拷贝就是通过赋值的方式进行拷贝，赋值的方式只会把对象的表层赋值给一个新的对象，如果里面有属性值为数组或者对象的属性，那么就只会拷贝到该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。

深拷贝则不会出现上述问题，引用数据类型，地址跟数据都会拷贝出来。

闭包是什么，用它解决过什么问题？

一个是可以读取函数内部的变量；

另一个就是让这些变量的值始终保存在内存中。

Ajax 请求的成功回调，事件绑定的回调方法， setTimeout 的延时回调，或者函数内部返回另一个匿名函数，这些都是闭包

说出你知道的数组方法？

1.shift 删除数组中的第一个元素

2.pop 删除数组中的最后一个元素

3.unshift 增加元素在数组的前面

4.push 增加元素在数组的后面

5.map 循环，并且返回新的数组

6.forEach 循环，遍历

7.filter 过滤，筛选出数组中的满足条件的，并且返回新的数组

8.concnt 合并数组

9.find 查找出第一个符合条件中的数组元素

10.findIndex 查找出第一个符合条件中的数组元素，所在的索引位置

11.flat 将多维数组转为一维数组

12.join将数组转为字符串

13.reverse 颠倒数组中的顺序

14.every检测数组中元素是否都是符合条件 === bollean

15.some检测数组中元素是否有满足条件的元素 === bollean

16.splice(start,n,添加元素) 开始位置 删除个数，添加元素

17.sort 排序

18.slice(start,end) 选中[start.end)之间的元素

19.indexOf 查找值所在的位置

20.includes 查看数组中是否存在此元素

哪些遍历方法会改变原数组？

sort(): sort() 方法会改变原数组，按照指定的排序方式对数组进行排序。

splice(): splice() 方法会改变原数组，通过删除或替换现有元素或者添加新元素来修改数组。

push() / pop() / shift() / unshift(): 这些方法在改变原数组的同时添加或删除元素。

说说this指向？

在全局作用域下直接调用函数，this指向window 对象函数调用，哪个对象调用就指向哪个对象 使用 new 实例化对象，在构造函数中的this指向实例化对象。 使用call或apply改变this的指向

改变this指向的方法，有什么区别？

1、call，apply会调用函数，且改变函数内部this指向

2、call，apply传递参数不一样，apply必须以数组形式

3、bind不会调用函数，但会改变函数内部this指向

什么是跨域？如何解决？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 2.JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。 2.CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。 3.反向代理

js引入为什么放在底部？

因为浏览器加载完 JS 文件就会去执行，这时候如果 JS 里面有对 DOM 的操作的话，DOM 可能还未加载完，可能就会出错。
因为浏览器渲染HTML文件是从上往下渲染的。

mvc和mvvm的理解？

MVC思想 ：Controller负责将Model的数据用View显示出来。

MVVM由Model，View，ViewModel三部分构成。

Model 和 View 并无直接关联，而是通过 ViewModel 来进行交互的（即双向数据绑定）

Model 和 ViewModel之间有着双向数据绑定的联系。
View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

vue的双向绑定原理？

vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。

Vue 数据双向绑定原理是通过 数据劫持 + 发布者-订阅者模式 的方式来实现的，首先是通过Object.defineProperty() 方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。

vue的生命周期有哪些，每个阶段做什么？

beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created（）被创建 data 和 methods都已经被初始化好了，可以调用了

beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

v-if和v-show的区别？

当使用v-if时，元素是否渲染到DOM取决于表达式的值是否为真。如果表达式为假，元素将不会被渲染到DOM中。

当使用v-show时，元素始终会渲染到DOM中，但是通过CSS的display属性来控制元素的显示与隐藏。如果表达式为假，元素会被隐藏，但仍然占据着DOM空间。

vue2中data为什么是一个函数？

是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象。

vue常用的指令有哪些？

v-if：根据表达式的值条件地渲染元素。 v-for：基于数据源循环渲染元素。 v-bind：动态地绑定一个或多个属性。 v-on：绑定事件监听器。 v-model：在表单输入元素上创建双向数据绑定。 v-show：根据表达式的值显示或隐藏元素。 v-text：更新元素的文本内容。 v-html：更新元素的 innerHTML。

v-for为什么需要key？

因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。 key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。

vuex有几个属性，作用是什么？

state：用于存储应用的状态数据 getters：用于获取state中的数据，并进行一些计算或处理 mutations：用于修改state中的数据，是唯一可以修改state的方式 actions：用于触发mutations来修改state，可以包含异步操作

keep-alive是什么？

keep-alive  是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

在组件切换过程中将状态保留在内存中 ，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

vue的计算属性和监听属性有什么区别？

Vue中的计算属性和监听属性都可以用来监听数据的变化并做出相应的响应。它们的区别在于计算属性是根据依赖的数据动态计算得出的值，而监听属性是在数据变化时执行特定的回调函数。

vue中组件通讯有哪些方式？

1.props和events：父组件通过props向子组件传递数据，子组件通过events向父组件发送消息。

2.自定义事件

3.vuex

4.本地储存

5.事件总线

eventBus是什么?

在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

vue2和3的区别？

多根节点

组合式API

Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子

Vue3 响应式原理基础是 Proxy

TypeScript支持

打包优化

首屏加载优化有什么方法？

压缩和合并资源

图片优化懒加载

尽量减少CSS文件的大小 代码压缩、去除不必要的注释和空格等方式来减小JavaScript文件的大小。

服务端渲染（SSR）

CDN加速

请求跨域中，服务器代理是什么原理？

代理前：客户端 -> 服务器

代理后：客户端 -> 代理服务器 -> 服务器

跨域只是浏览器和服务器之间存在，而服务器之间不存在跨域。

导入样式时，link和@import的区别？

link属于html标签。@import在css中使用表示导入外部样式表； 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; link方式的样式的权重 高于@import的权重； link 支持使用javascript改变样式 （document.styleSheets），后者不可

vue中$nextTick的作用？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

当数据更新了，在dom中渲染后，自动执行该函数，

vue的优点和缺点？

Vue的优点包括：

1. 简单易学
2. 响应式数据绑定
3. 组件化开发
4. 轻量级

Vue的缺点包括：

1. 生态系统相对较小：相比于Angular和React，Vue的生态系统相对较小，可能会缺少一些插件和工具支持。
2. 社区支持不如React：虽然Vue在国内有很好的社区支持，但在国际上还不如React那么活跃。
3. 某些功能相对不完善：Vue在某些功能上可能不如React或Angular完善，需要开发者自行扩展或寻找第三方插件支持。

vuex保存的数据页面刷新会丢失怎么解决？

1.使用vuex-along

2.使用localStorage或者sessionStroage

vue中组件和插件的区别？

• 组件：组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在 Vue 中每一个 .vue 结尾的文件都可以视为一个组件
• 插件：插件通常用来为 Vue 构造函数添加全局功能，比如 vue-router、VueX 都是插件

vue中常用的修饰符有哪些？

1. .prevent：阻止默认行为
2. .stop：阻止事件冒泡
3. .once：只触发一次
4. .capture：使用事件捕获模式
5. .self：只有事件是由自身触发时才触发事件处理程序
6. .passive：告诉浏览器不要阻止事件的默认行为

小程序打包超出2M怎么解决？

1. 检查项目中是否有未使用的资源文件，将其删除或者优化。

2. 使用小程序的分包功能，将部分功能或资源文件放入分包中，减少主包的大小。

3. 压缩图片和视频等资源文件，减小文件体积。

4. 使用代码压缩工具对代码进行压缩，减小代码体积。

5. 使用懒加载或按需加载的方式加载资源文件，减少首次加载时的压力。

（以上面试题来自网络收集）

现在面试问的越来越趋向于项目经验，就问你之前的项目经历，解决过什么难点，不知道大家有没有感觉... 雪天前端

10个内容

把在线网址打包APP(一看就会系列)2024-02-04
把网页打包成app(简单)2024-01-31
前端CSS魔法2024-01-28
Vue新手引导插件2024-01-27
Vue3优秀的UI组件库(高颜值)2024-01-19
下载量超高的vscode AI插件2024-01-14
github 中文排行榜2024-01-12
来检测下你的vue水平2024-01-05
好用的截图工具2023-12-21
github访问不了？2023-12-19

如有帮助，求个在看，愿道友龙年财源滚滚，大吉大利，步步高升，龙腾万里！