面试题
不会的玩意:HashRouter HistoryRouter
1.cookie,sessionStorage,localStorage
2.js数据类型有哪些
3.闭包
4.promise
5.BFC
6.判断变量的方法
7.样式优先的规则
8.说一说CSS尺寸设置的单位
9.src和href的区别
10.如何比较-0和+0是否不相同,如何让NAN和NAN相等
11.双向绑定的原理
12.data为什么是一个函数而不是一个对象
13.如何让a==1&&a==2&&a==3成立
14.强制缓存和协商缓存
15.get和post区别
16.网络请求码
17.this的指向问题
18.vue的特点
19.v-model的实现
20.nextTick的个人理解
21.delete和Vue.delete删除数组的区别
22.SPA首屏加载缓慢应该如何解决
23.回流和重绘
24.display:none,visibility: hidden
25.http和https的区别
26.GIF,JPEG,PNG的区别
27.get,post,put的区别
28.如果比较两个对象相等
29.事件循环Event loop,宏任务与微任务
cookie,sessionStorage,localStorage的存储区别
1.共同点:他们都是存储在浏览器本地的。
2.不同点:cookie是由服务器写入的,他的生命周期是由服务器来确定好的;sessionStorage是由前端来写入的,他的生命周期会在页面关闭的那一瞬间消失,同时必须保证是同一个页面;localStorage也是由前端来写入的,他的生命周期可以是永久的,只要用户不手动删除,他就不会消失,他用来保存长久不变的东西。
3.应用场景:cookie用来存储登录用的token和SessionID(跟平时写的东西不一样);SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条的功能;
localStorage常用于存储不易变动的数据。
通过这个暂时并不了解sessionStorage和cookie的实战写法。
sessionStorage已经基本明白,cookie还在写当中。
js数据类型有哪些
- 基本数据类型:一共有7种,分别是undefined,null,number,boolean,string ,symbol ,bigInt
- 引用数据类型: 一共就一种,object。
- 存储方式的不同:基本数据类型存放在栈当中,引用数据类型存放在堆当中。
闭包
- 简单来说就是一个函数可以访问另一个函数里面的变量。
promise
- 他是一个异步的状态,为了解决回调地狱,同时他有三种状态,分别是pending,resolve,reject三种状态,正常状态就是pending,成功调用resolve,失败调用reject。同时还包括then和catch,成功调用then,失败调用catch,同时then既可以接受成功,也可以接受失败。如果想要解决一堆是否同时成功或者失败的话,可以使用all方法。
- 它可以解决一个回调地狱
1.首先封装一个promise对象的函数
function a1(str,time=2000){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(str)
},time)
})
}
a1('niu').then((res)=>{
console.log(res)
return a1('sxi')
}).then(res=>{
console.log(res);
})
2.然后进行函数调用的回调
BFC
BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签,同时自己也不会受别人影响。
- 解决了的问题:
1.脱离文档流:如果给子设置了浮动,会给父元素造成塌陷问题,可以使父元素成为BFC,独立的盒子,不受别人的影响。
2.Margin边距重叠:在给两个盒子都设置margin为10px的时候,最后会求最大值,而不是和,这时候,如果给一个元素设置BFC的话,那么就可以解决这个问题。
判断变量的方法
object.prototype.toString.call()、constructor没怎么用过。
- typeof(用于判断基本数据类型),instanceof(用于判断引用数据类型),object.prototype.toString.call()、constructor。
样式优先的规则
import 内联样式 id 类选择器 标签
CSS尺寸设置的单位
- 首先是px(像素大小的单位,常用);其次是em,这个是根据字体大小来设置的,例如10em,字体大小是16px,那么就会是160px;还有就是rem,移动端适配的常用;最后是vh和vw,他们是根据视口的大小来确定,视口最大为100,1%的话就是视口大小的百分之一。
src和href的区别
- 考虑这两个问题就可以去考虑两个标签,那么就是script和link标签,script通常引用js文件,link通常引用css文件。src引入文件的时候,会进行将其下载下来,而且会解析这个文件,就会打断别的内容,也就说这个是串行的,只有等这个解析完成才能继续下去。而href引入文件的时候,有的时候还是网络资源,是与其建立连接,这个是并行下载,并不会影响到别的内容。
如何比较-0和+0是否不相同,如何让NAN和NAN相等
- 我们平时比较方法可以用==(这个具有强制转换的功能),===(这个并没有强制转换的功能,不仅检查数值还检查数据类型)。
- 我们可以通过 object.js() 这个方法来进行比较-0和+0,通过这个方法就可以检测出来这俩个值不相等。
数据绑定的原理
- 通过数据劫持和发布和订阅者模式来进行数据双向绑定。
- 数据劫持就是通过object.defineProperty()来实现双向绑定。(缺点就是无法对对象成员进行劫持。)
- 数据发生变化的时候,就是给订阅者一个通知,触动某种回调。
data为什么是一个函数而不是对象
- 首先第一点就是对象是引用数据类型,如果多个引用这一个对象的时候,如果一个对象的值发生变化的话,那么就会影响别的数据,所以通过变成一个函数,那么每一个组件就存在一个独立的空间,那么就不会影响别人。
a==1&&a==2&&a==3
- 解决方法其实和obj修改的方法十分类似,对象这种引用数据类型可以通过特定的方法来解决,然后可以把a看成一种对象。
let a = {
n:1,
valueOf(){
return this.n++
}
}
if(a==1&&a==2&&a==3)
{
console.log(1)
}
强制缓存和协商缓存
- 强制缓存就是文件并没有过期,那么就可以缓存;协商缓存是文件发生了过期,然后和服务器进行沟通,服务器如果说过期了,那么就可以使用服务器重新返回的数据进行缓存,如果没有过期,那么继续缓存。
get和post
- get请求可以被缓存,而post请求不可以被缓存。
网络请求码
- 200代表着请求成功,404代表着请求资源不存在,400代表着错误请求,也就是请求的格式不正确,401代表着未授权(token问题?),403代表着禁止访问。
this的指向
并没有考虑箭头函数
1.总是指向函数的直接调用者。
2.如果new出来一个对象,指向这个创建出来的对象。
3.一个目标添加事件之后,this指向这个目标。
如果是箭头函数
1.就是谁创建了他,那么这个里面的this就指向创建这个的目标。
2.尤其是在定时器的地方,一定要写箭头函数,这样里面的this就可以不指向window。
vue的特点
1.轻量级
2.高性能
3.好上手
4.插件化
5.便于测试
6.运行速度更快
7视图,数据,结构分离
v-model的实现
这个是vue2数据绑定的原理
1.数据劫持、组合、发布订阅模式的方式来实现的
2.数据劫持是基于object.defineProperty()方法实现。
nextTick的个人理解
这个普遍用于插件的使用
1.简而言之就是修改了一个可以展现dom的值,
如果你需要修改之后立马获取这个dom,可以使用定时器或者这个。
delete和Vue.delete删除数组的区别
delete删完会变成undefined等,
然后Vue.$delete删除完之后会直接让这个键值消失。
SPA首屏加载缓慢应该如何解决
1.安装动态懒加载所需插件;使用CDN资源。
2.使用骨架屏。
回流和重绘
- 回流就是比如页面布局发生变化的时候,比如display:none的时候,就会产生回流。
- 重绘就是页面的某个元素的样式发生改变的时候,比如color等。
display:none,visibility: hidden
- display为none的时候是不会占用原先的位置的。
- 而visibility是还会占用原先的位置的。
http和https的区别
- http是基于tcp之上的,而https是基于ssl之上的,ssl又基于tcp之上的。
- 两者的端口号占用的也不同。
- https可以防止运营商劫持,更加安全。
http的层次
前两层也可以称为网络接口层
1.物理层
2.数据链路层
3.网络层
4.传输层
5.应用层
GIF,JPEG,PNG的区别
- GIF适合动画,无损压缩
- JPEG适合照片,有损压缩
- PNG适合背景,按钮等,文件小,允许透明度。
get,post,put的区别
- PUT请求:如果两个请求相同,后一个请求会把第一个请求覆盖掉。(所以PUT用来改资源)
- Post请求:后一个请求不会把第一个请求覆盖掉。(所以Post用来增资源)
- GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留
如果比较两个对象相等
let a = {
a:10,
b:20
}
let b = {
a:10,
b:20
}
console.log(JSON.stringify(a) === JSON.stringify(b))
事件循环Event loop,宏任务与微任务
- 首先js是单线程,他会依次执行,他会先执行主任务,执行完之后,开始执行微任务(包括promise等),最后再执行宏任务(包括定时器等)。