前端面试题梳理

Posted 前端纸飞机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题梳理相关的知识,希望对你有一定的参考价值。

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

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不需要。

以上是关于前端面试题梳理的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题梳理

前端面试题梳理

前端芝士树Vue.js面试题整理 / 知识点梳理

帮你梳理清楚,另附有前端面试551道题

React高频面试题梳理,看看面试怎么答?(上)

前端基础需要学什么?这篇文章帮你梳理清楚,另附有前端面试551道题