前端面试题梳理

Posted 2022-05-30 前端纸飞机

加了删除线的优先级较低，不常问，但也有的问。

html相关面试题

1.HTML5 有哪些新特性？
canvas，
语义话标签（header，footer等），
媒体播放（audio，video），
增强表单控件form（calendar、date、time、email、url、search），
iframe，
本地存储（localStorage，sessionStorage），
html5拖拽（drag），

2.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
3.内元素有哪些？块级元素有哪些？空(void)元素有哪些？内元 素和块级元素有什么区别？
4.简述下src与href的区别？
5.cookies,sessionStorage,localStorage 的区别？
6.如何实现浏览器内多个标签页之间的通信？

CSS相关面试题

1.请你讲一讲 CSS 的权重和优先级
2.介绍 Flex 布局，flex 是什么属性的缩写：
3.CSS 怎么画一个大小为父元素宽度一半的正方形？
4.CSS实现自适应正方形、等宽高比矩形
5.实现两栏布局的方式
6.实现三列布局的方式

JS相关面试题

1.问：0.1 + 0.2 === 0.3 嘛？为什么？
2.JS 有哪些数据类型？
3.JS 整数是怎么表示的？
4.Number() 的存储空间是多大？如果后台发送了一个超过最大自己的数字怎么办
5.写代码：实现函数能够深度克隆基本类型
6.什么是浅拷贝和深拷贝（回答分类回答加分）
对基本类型变量，浅拷贝是对值的拷贝，没有深拷贝的概念。
对引用类型来说，浅拷贝是对对象地址的拷贝，并没有开辟新的栈，复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，另外一个对象的属性也会改变， 而深拷贝则是开辟新的栈。
https://blog.csdn.net/qq_32442973/article/details/118584594
7.null和undefined的区别
null: Null类型,代表一个空值,也代表一个空对象指针,表示将来可能被指向某一个对象,使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined: Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。（未定义）
8.你了解promise吗？
是做什么的：promise是用来处理异步的一种解决方案，它来自es6。
参数状态：通过new Promise使用，他有三个状态，pending（初始化），fulfilled（成功），rejected（失败）。成功就调用resolve()来变成fulfilled状态，失败则调用rejected()来变成rejected状态。
有哪些api：.then() .catch() .all() .race()
成功走.then 异常走catch，.then可以链式调用；
.all和.race的区别？
.all 代表 所有的都为成功状态则走.then，否则就是catch
.race一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢
9.移动端适配方案
1.媒体查询 @media
2.flex布局
3.rem单位，rpx
4.百分比布局 + vh + vw
5.viewport适配方案

VUE相关面试题

1.active-class是哪个组件的属性？嵌套路由怎么定义？
2.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
3.vue-router有哪几种导航钩子？
4.scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
4.说说对MVVM的理解？
由model、view、viewmodel 三部分组成，由MVC衍生。
Model： 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View： 代表UI 组件（视图），它负责将数据模型转化成UI 展现出来。
ViewModel： 是一个同步View 和 Model的对象（连接view和model的桥梁）。

view和model之间没有直接关联，而是通过ViewModel进行交互的。
viewmodel通过数据双向绑定将view和model连接起来的，这个过程是自动的，所以我们只需要关注业务逻辑，不需要操作dom。

5.什么是nextTick？（nextTick的作用是什么？）
在dom更新后延迟回调；（在dom更新后使用nextTick，就能拿到更新后的dom）

6.nextTick实现原理？
nextTick主要是使用了宏任务和微任务，定义了一个异步方法。多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列，所以nextTick就是异步方法。
7.watch和computed的区别？
watch：监听，有两个参数，支持异步，没有缓存
computed：计算属性，要return出去，不支持异步，有缓存
8.什么是diff算法？
1、先同级比较，再比较儿子节点
2、先判断一方有儿子一方没儿子的情况
3、比较都有儿子的情况
4、递归比较子节点

9.vue组件通信

10.怎么封装组件的？
两个点，一个组件的封装，一个组件的使用。

11.vue的路由守卫
作用：导航守卫可以监听路由变化情况
分类：全局导航守卫，路由独享守卫，组件内守卫

• 全局导航守卫(放置在main.js文件里)：
  全局前置守卫 router.beforeEach(fn)，
  全局的解析守卫router.beforeResolve，
  全局的后置守卫router.afterEach
• 路由独享守卫(在index.js的路由表中写)： beforeEnter
• 组件内守卫（写组件里）：
  组件内的前置守卫 beforeRouteEnter((to,from,next)=>)
  组件内的后置守卫beforeRouteLeave
  组件内的更新守卫（ 路由传参和路由的接参
  ）beforeRouteUpdate

前置：跳转前的意思
后置：跳转后的意思

http://www.root181.com/2019/04/28/vue-js%e4%b8%ad%e7%9a%84%e8%b7%af%e7%94%b1%e8%bf%9b%e9%98%b6%e5%af%bc%e8%88%aa%e5%ae%88%e5%8d%ab%ef%bc%88-%e8%b7%af%e7%94%b1%e5%ae%88%e5%8d%ab/

项目经验相关面试题

1.后端一次给你10万条数据，如何优雅展示?
题意为数据量大时，如何取渲染？
https://www.vue-js.com/topic/61e56bd4cbbfd1003b11fa09
setTimeout分页渲染（过零点几秒就渲染一部分），
点击按钮分页（例如elementui里的分页组件），
数据懒加载（分片加载），
requestAnimationFrame替代setTimeout（可减少重排），
虚拟列表（虚拟滚动启用后只会渲染指定范围内的可视区数据，其他的数据将被卷去收起，当滚动到可视区时才被渲染出来）

虚拟滚动表格解决方案：https://vxetable.cn/#/table/scroll/scroll

2.为什么要用setTimeout来模拟setInterval的行为？

http相关面试题

1.HTTP 常用的状态码及使用场景
200:请求成功
400: 客户端请求数据不对
401:未登录（无权限）
403:服务端拒绝了客户端的请求
404:资源不存在
301:重定向（3开头都重定向）
500:内部服务器错误
完整：https://www.runoob.com/http/http-status-codes.html

2.WebSocket与Ajax的区别
websocket：wss协议//cp连接，长连接，服务端喝客户端相互推送数据
ajax：http/https协议，短连接，客户端向服务端发起请求

完整：https://blog.csdn.net/qq_40190624/article/details/86605563

3.HTTP 常用的请求方式，区别和用途？

GET: 发送请求，获取服务器数据
POST：向URL指定的资源提交数据
PUT：向服务器提交数据，以修改数据
DELETE：删除服务器上的某些资源
HEAD:请求页面的首部，获取资源的元信息
CONNECT：建立连接隧道，用于代理服务器；
OPTIONS：列出可对资源实行的请求方法，常用于跨域
TRACE：追踪请求-响应的传输路径

4.HTTPS 是什么？具体流程
HTTPS是在HTTP上建立SSL加密层，并对传输数据进行加密，是HTTP协议的安全版。

工作流程：https://zhuanlan.zhihu.com/p/454405396

5.三次握手和四次挥手

三次握手：客户端向服务端发起请求，服务端收到请求并返回一段ack报文给客户端，客户端收到报文并告诉服务端我收到了你的报文，即连接成功。

四次挥手：
1.客户端向服务端发起断开连接的请求
2.服务端收到客户端发来的请求，然后给客户端返回一段ack报文（此时处于半断开连接状态，客户端无法向服务端发送数据，但服务端可以向客户端发送数据）
3.服务端将最后数据(比如50个字节)发送完毕后就向客户端发出连接释放报文
4.客户端收到服务端发的FIN报文后，向服务端发出确认报文。注意客户端发出确认报文后不是立马释放TCP连接，而是要经过2MSL(最长报文段寿命的2倍时长)后才释放TCP连接。而服务端一旦收到客户端发出的确认报文就会立马释放TCP连接，所以服务端结束TCP连接的时间要比客户端早一些。

完整：https://baijiahao.baidu.com/s?id=1709872840052170461&wfr=spider&for=pc