2022【前端面试】前端面试题【含答案】最全面试题
1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
这里主要是靠flex布局实现的，这个是重点
display:flex;
justify-content:center;
align-items:center;
上下左右居中
css
div{
width:500px;
height:500px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}-----------------------------------------------------------------------------------------------------------------------------
2，阐述清楚浮动的几种方式（常见问题）
这个问题很常见，经常问到务必记住！！！
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2.父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
4. 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
-----------------------------------------------------------------------------------------------------------------------------
3. 解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片，提高了性能
-----------------------------------------------------------------------------------------------------------------------------
4.请描述一下 cookies sessionStorage和localstorage区别
他们的相同点：都存储在客户端
他们的不同点：
1.存储大小
这里需要区分：
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
-------------------------------------------------------------------------------------------------------------------------------
5，数组去重（机试容易考）
编写一个方法去掉数组里面 重复的内容 var arr=[1,1,3,4,5,1,2,3]
这是打印的内容，利用indexof和push可以达到去重效果
---------------------------------------------------------------------------------------------------------------------------------
6，js有几种数据类型，其中基本数据类型有哪些
五种基本类型: Undefined、Null、Boolean、Number和String。
1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。
Object、Array和Function，Data则属于引用类型
---------------------------------------------------------------------------------------------------------------------------------
7，undefined 和 null 区别
根据6题联想到undefined 和 null 区别他们有什么区别呢？
1、首先看一个判断题：null和undefined 是否相等？比较容易理解
console.log(null==undefined)//true
console.log(null===undefined)//false观察可以发现：null和undefined 两者相等，但是当两者做全等比较时，两者又不等。
原因：null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值
undefined：
ed类型，当一个声明了一个变量未初始化时，得到的就是undefined。
--------------------------------------------------------------------------------------------------------------------------------
8，http 和 https 有何区别？如何灵活使用？
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份
---------------------------------------------------------------------------------------------------------------------------------
9，如何进行网站性能优化（常见问题）
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更 为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
优化途径有：
1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议：使用 service workers + 流
13. 图片编码优化
---------------------------------------------------------------------------------------------------------------------------------
10，什么是mvvm mvc是什么区别 原理（常见问题）
一、MVC
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
二、MVVM（Model-View-ViewModel）
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。
---------------------------------------------------------------------------------------------------------------------------------
11，px和em的区别
px表示像素 ，是绝对单位，不会因为其他元素的尺寸变化而变化；简单点就是根据屏幕分辨率来的。
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值
---------------------------------------------------------------------------------------------------------------------------------
12，JS哪些操作会造成内存泄露（常见问题）
内存泄漏：就是没有使用,或已经使用完的变量,没有及时回收
1，闭包引起的内存泄露
2，没有清理的DOM元素引用
3,意外的全局变量 (1)初始化未经声明的变量,
4,由this创建的全局变量
---------------------------------------------------------------------------------------------------------------------------------
13,浏览器缓存有哪些，通常缓存有哪几种（常见问题）
一、http缓存
二、websql
cookie
localstorage
sessionstorage
flash缓存
---------------------------------------------------------------------------------------------------------------------------------
14，什么是闭包，如何使用它，为什么要使用它？
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点：
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
---------------------------------------------------------------------------------------------------------------------------------
15，项目中的鉴权是如何实现的（常见问题）
客户端使用用户名跟密码请求登录
服务端收到请求，去验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
总的来说就是客户端在首次登陆以后，服务端再次接收http请求的时候，就只认token了，请求只要每次把token带上就行了，服务器端会拦截所有的请求，然后校验token的合法性，合法就放行，不合法就返回401（鉴权失败）。
最常用的鉴权是 JWT方案（JSON WEB TOKEN）
JWT是什么？
JWT是Auth0提出的通过对JSON进行加密签名来实现授权验证的方案。就是登陆成功后将相关信息组成json对象，然后对这个对象进行某中方式的加密，返回给客户端，客户端在下次请求时带上这个token，服务端再收到请求时校验token合法性，其实也就是在校验请求的合法性。
JWT对象通常由三部分构成：
Headers： 包括类别（typ）、加密算法（alg）
---------------------------------------------------------------------------------------------------------------------------------
16.vue2和vue3的区别（常见问题）
1、vue2使用Object.defineProperty方法实现响应式数据，vue3使用proxy实现响应式数据
Object.defineProperty的缺点：
无法检测到对象属性的动态添加和删除
无法检测到数组的下标和length属性的变更
解决方法：
vue2提供Vue.$set动态给对象添加属性
Vue.$delete动态删除对象属性
重写数组的方法，检测数组变更
proxy的缺点：
es6的proxy不支持低版本浏览器（IE11）
会针对IE11出一个特殊版本进行支持
proxy的有点：
可以坚持到代理对象属性的动态新增和删除
可以监测到数组的下标和length属性的变化
2、vue3新特性：
①：数据响应重新实现（ES6的proxy代替ES5的Object.defineProperty）
②：源码使用ts重写，更好的类型推导
③：虚拟DOM新算法（更快、更小）
④：提供了composition api，为更好的逻辑复用与代码组织
⑤：自定义渲染器（app、小程序、游戏开发）
⑥：Fragment，模板可以有多个根元素
---------------------------------------------------------------------------------------------------------------------------------
17，说说对比包的理解和闭包的作用？
使用闭包就是为了设置私有变量和方法。
闭包的好处：能够实现封装和缓存；
闭包的坏处：就是内存消耗，使用不当可能会造成内存溢出的问题。
---------------------------------------------------------------------------------------------------------------------------------
18，说说this对象的理解？
this总是指向直接调用者；
如果有new关键字，则指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，在IE中的attachEvent中的this总是指向全局对象 window。
---------------------------------------------------------------------------------------------------------------------------------
19.说说堆和栈的区别？（常见问题）
栈内存：存储的都是局部变量，后进先出，栈内存的更新速度很快，因为局部变量的声明周期都很短。
堆内存：存储的都是数组和对象，堆里面的实体不会被释放，但是会被当成垃圾，java有垃圾回收机制不定时地收取。
---------------------------------------------------------------------------------------------------------------------------------
20，JS数组和对象的遍历方式，以及几种方式的比较。
for循环——循环每进行一次，就要检查一下数组的长度，速度比较慢；
for in 循环——需要分析出array的每一个属性，这个操作性能开销很大。
forEach循环——不能遍历对象，不可以使用continue、break跳出循环，且使用return是跳出本次循环。
---------------------------------------------------------------------------------------------------------------------------------
21，说说箭头函数与普通函数的区别？
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；
不可以当作构造函数，也就是说不能使用new关键在，否者会抛出一个错误；
不可以使用arguments对象，该对象在函数体内不存在。如果要使用，可以用Rest参数代替；
不可以使用yield命令，因此箭头函数不能当作Generator函数。
---------------------------------------------------------------------------------------------------------------------------------
22，
待更新--------------------------------------------------------------------