前端面试题梳理

Posted 2023-02-24 前端纸飞机

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

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的区别？
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 有哪些数据类型？
number，string，boolean，null，undefined，array，object，function，symboll（es6），bigint（es10）
检测：typeof（nul/和Array结果都为object），instanceof（只能检测Array、object、function），Object.prototype.toString.call（全能）
检测实例：

console.log(typeof true); //boolean
console.log( instanceof Object);//true

var a = Object.prototype.toString; 
console.log(a.call("aaa"));//[object String]

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适配方案
10.js几种常见排序的实现
sort，冒泡排序，快速排序，选择排序
手写冒泡

 function bubbleSort(arr)
      for(var i=0;i<arr.length-1;i++)
          for(var j=0;j<arr.length-i-1;j++)
              if(arr[j]>arr[j+1])
                  var temp=arr[j];
                  arr[j]=arr[j+1];
                  arr[j+1]=temp;
              
          
      
      return arr;
  
 console.log(bubbleSort([6,1,2,4,3,5]))

11.es6新特性
let和const，解构赋值，promise，箭头函数，类class，函数参数默认值等
12.面向对象的三个特征
面向对象编程就是以类的方式组织代码，以对象的形式封装数据。把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
封装、继承、多态

11.常用设计模式
9种
https://root181.blog.csdn.net/article/details/119757216
面试的时候说两三种，例如观察者模式（发布订阅），原型模式，装饰器模式
观察者模式：多对一的关系，即对个观察者观察一个目标或主题对象，当这个对象发生变化时就会通知或者广播给所有观察着，观察者就根据变化做出相应的改变
原型模式：
装饰器模式：为对象添加新功能，不改变其原有的结构和功能

12.原型链，什么是原型链？
原型链通俗易懂的理解就是可以把它想象成一个链条，互相连接构成一整串链子！
而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，这个prototype属性就是我们的原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针(proto)指向他的构造函数的原型对象！这样构造函数和实例对象之间就通过( proto )连接在一起形成了一条链子。

VUE相关面试题

1.active-class是哪个组件的属性？嵌套路由怎么定义？
router-link
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/

12.Vue.js双向数据原理
Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库，API 简洁，很容易上手。

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。（注意：据悉vue3.0将采用Proxy替代Object.defineProperty）

13.说说你认识的vuex
是vue的状态管理工具
怎么使用：src下建立store目录，在建立index.js 或者拆分模块（index.js,actions.js.getters.js等），再在.main.js里引入store即全局使用vuex，然后组件内可以通过mapActions,mapGetters来使用
使用场景：项目状态较多，需要多个地方使用时，以及需要使用重要信息时
vuex有哪几种属性？
state 状态
actions 异步动作
mutations 同步修改state
getters 获取数据的
stores state的存储者

commit同步
dispatch异步

13.插槽和作用域插槽
渲染的作用域不同，普通插槽是父组件，作用域插槽是子组件

项目经验相关面试题

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协议/tcp连接，长连接，服务端和客户端相互推送数据
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协议的安全版。
先验证ssl证书通过非对称加密的方式，再传输数据，通过对称加密。

工作流程：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

6.http和https的区别
1、https的端口是443，而http的端口是80，且两者的连接方式不同；
2、http传输是明文的，而https是用ssl进行加密的，https的安全性更高；
3、https是需要申请证书的，而http不需要。