加了删除线的优先级较低,不常问,但也有的问。
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);
console.log({} instanceof Object);
var a = Object.prototype.toString;
console.log(a.call("aaa"));
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不需要。
|