文章详细介绍了HTTP与HTTPS的区别，TCP的三次握手和四次挥手，以及跨域解决方案。在前端领域，讲解了Cookie、SessionStorage、LocalStorage的区别，Websocket的使用，以及FetchAPI。在JavaScript部分，涵盖了数据类型、闭包、异步处理、DOM和BOM相关知识。在Vue.js部分，解释了双向数据绑定、生命周期、组件通信等核心概念。
目录
8、几个很实用的 BOM 属性对象方法（什么是 Bom? Bom 是浏览器对象）
11、Cookie、sessionStorage、localStorage 的区别
10、BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）
19、JS中的arguments类数组(用来存放函数参数的对象)
25、JS中如何判断一个属性是属于实例对象还是继承于构造函数
26、JS中bind和call和apply的作用以及他们的区别
12、请说出vue.cli项目中src目录每个文件夹和文件的用法？
19、vue的路由传参方式 （params和query模式）
-
http部分
1、说一下 http 和 https,http1.0和http2.0
http超文本传输协议，https=http+ssl
http2.0采用多路复用，二进制格式
http1.0有序并阻塞
2、tcp 三次握手，一句话概括
客户端发送请求连接信息到服务端
服务端收到后返回ack确认信息
客户端把收到的ack信息发给服务端建立连接
3、tcp四次挥手
客户端发送fin请求
服务端收到fin请求返回ack，
服务端发送fin请求到客户端
客户端返回ack，连接断开
4、什么是跨域，跨越的解决办法
根据同源策略，协议、域名、端口号有一个不一样就为跨域
解决跨域的方法：jsonp，cors、nginx反向代理、webpack本地代理（vue常用proxy）
5、TCP 和 UDP 的区别
tcp面向连接，udp不连接，容易出现差错和丢失，但其处理速度快，占用资源少，常用于视 频、音频，例如QQ聊天
6、websocket
实时通信，用于数据的实时更新，常用属性（open打开，message接受消息，errorc错误触发，close关闭）
7、HTTP 请求的方式，HEAD 方式
类似get请求，但响应数据无具体内容，可用来查看服务器性能
8、几个很实用的 BOM 属性对象方法（什么是 Bom? Bom 是浏览器对象）
location.href-- 返回或设置当前文档的 URL
9、状态码
1XX（信息性状态码）表示接收的请求正在处理
2XX（成功状态码）表示请求正常处理完毕
3XX（重定向状态码）表示需要进行附加操作以完成请求
4XX（客户端错误状态码）表示服务器无法处理请求
5XX（服务器错误状态码）表示服务器处理请求出错
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自
上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。
10、fetch
fetch是window下的一个方法，被称为下一代Ajax技术,采用Promise方式来处理数据
11、Cookie、sessionStorage、localStorage 的区别
12、为什么将token放在cookie中，
因为：cookie采用同源策略，只有相同域名的网页才能获取域名对应的token,token别人通过其他域名不能获取你的cookie，更不会获取到token。 如果不设置过期时间，cookie保存在内存中，生命周期随浏览器的关闭而结束，如果设置了过期时间，cookie保存在硬盘中，关闭浏览器，cookie数据直到过期时间而消失；cookie是服务器发给客户端的特殊信息，cookie是以文本的形式保存在客户端，每次请求都会带上它（cookie会存储起来，并不是每次登录都会重新生成一个、会重新调用存储的
13、doctype
用于声明文档
14、Cookie 如何防范 XSS 。csrf攻击
XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些
攻击，需要在 HTTP 头部配上，set-cookie：
httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。
csrf（跨站请求伪造）解决办法使用验证码，使用tooken
15、Cookie 和 session 的区别
cookie存在客户端，session在服务端
16、http请求方式有：
get post delete HEAD, OPTIONS, PUT
17、浏览器缓存
浏览器缓存主要有两类：协商缓存：Last-modified ，Etag 和强缓存：cache-control，Expires。
强缓存：不需要发送 HTTP 请求；
协商缓存：需要发送HTTP请求；
发送 HTTP 请求之前，浏览器会先检查强缓存，如果命中直接使用，否则就进入协商缓存。状态码304，就说明命中，本地有缓存可以直接使用
18、浏览器在生成页面的时候，会生成那两颗树？
DOM CSSOM规则树
19、HTML5和CSS3新特性
html5：header\footer\aside\nav\音频\视频
css3:选择器、阴影、形状转换（2D <-> 3D）、变形、动画（过渡动画、帧动画）、边框等等
-
css部分
1、position的属性
relative，相对定位，参照自身之前位置进行偏移，之前的位置仍然占用空间
absolute，绝对定位， 参照body或者父容器进行偏离 脱离文档流，不占用位置
fixed， 固定定位 可定位于相对于浏览器窗口的指定坐标 脱离文档流，不占用位
static，默认定位
| static | relative | absolute | fixed | |
| 定位名称 | 默认定位 | 相对定位 | 绝对定位 | 固定定位 |
| 定位对象 | 无定位 | 自身之前位置 | body或者父容器 | 浏览器窗口 |
| 位置占用 | 占用 | 占用 | 脱离文档流，不占用 | 脱离文档流，不占用 |
2、visibility和display区别
visibilty和display都是控制元素显示和隐藏的，不同点是，visility隐藏之后元素位置空间还在，而display位置空间不在
3、常见的盒子垂直居中的方法有哪些请举例3种？
flex，定位
4、Css优先级
！import ，行内，id，class
5、如何解决盒子塌陷
父盒子设置边距，overflow：hidden
6、清楚浮动的方法
父盒子设置高度
父盒子末尾添加空盒子，添加属性clear:both;
overflow:hidden
7、居中
水平居中：1、text-align：center
2、父级设置成块级，再text-align：center
3、都是块级元素,margin:0 auto
4、flex布局实现
垂直居中：1、flex布局
2、定位
3、设置与父级同高
4、使用给父元素设置display:table-cell;和vertical-align: middle;属即可
水平垂直居中：
1、flex布局
2、定位
3、已知固定宽高，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
8、盒子模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。分为两种：IE盒子模型、W3C盒子模型，W3C的宽不包含padding、border
9、css新增伪类
：nth-child(n)选中第几个
：nth-last-child 选中最后一个
：nth-first-firstchild 选中第一个
10、BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）
块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器，子元素不会影响到外面
计算 BFC 的高度时，浮动元素也会参与计算
那些元素会生成 BFC：
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为 visible 的元素
11、css预处理有
less 、sass
优点：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性
缺点：调试更麻烦；容易造成后代选择器的滥用
12、动画animation
animation: myfirst 5s linear 2s infinite alternate;
myfirst ：规定 @keyframes 动画的名称。
5s ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
linear： 规定动画的速度曲线。默认是 "ease"。
2s: 规定动画何时开始。默认是 0。
infinite ： 规定动画被播放的次数。默认是 1。
alternate ；规定动画是否在下一周期逆向地播放。默认是 "normal"。
13、单行文本不换行出现省略号
- 固定宽度
- 设置不允许换行 white-space：nowrap
- 超出隐藏 overflow ：hidden;
- 超出文本用省略号代替 text-overflow:ellipsis;
-
JS部分
1、javaScript数据类型：
①、基本数据类型：string\number\boolean\null\undefind\symbol
②、引用数据类型：object\array
区别：
1、声明变量时的存储分配
基本数据类型放在栈里
引用数据类型放在堆里
2、访问机制不同
基本数据直接访问
引用数据类型访问引用地址
3、赋值变量时不同
基本类型将原始值的副本赋值最新变量
引用数据类型，将引用地址赋值给新的变量
2、什么是闭包？闭包有哪些优缺点？
闭包：能够调用其他函数作用域内变量的函数
优点：变量保存
缺点：内存泄漏
应用：防抖、节流
3、什么是高阶函数
高阶函数：返回值或者参数是一个函数就叫做高阶函数（例如定时器）
4、函数防抖：
函数防抖指的是在多次触发同一个函数时，只执行最后一次
5、函数节流：
同一函数被多次触发时，在一段时间内只执行一次
6、作用域和作用域连：
①、作用域：
作用域就是变量的可用性的代码范围，就叫做这个变量的作用域。（全局作用域、块级作用域、局部作用域）
②、作用域链：
当你要访问一个变量时，首先会在当前作用域下查找，如果当前作用域下没有查找到，则返回上一级作用域进行查找，直到找到全局作用域，这个查找过程形成的链条叫做作用域链
7、null和undefind的区别
null和undefind值相同，类型不同,null类型为对象，undefind是它本身
1、null不应该有值，转为数值等于0
2、undefind应该有值，值缺失，转为数值等于NAN
8、JS数据类型检测方式：
1、typeof-------------检测数据类型的运算符
2、instanceof--------检测某一个实列是否属于这个类（可以正确判对象类型）
3、constructor-------检测实例和类的关系，从而检测数据类型
4、Object.protype.toString.call()-------检测数据类型
9、JS判断数组的方法：
1、object.protype.toString.call()
Object.prototype.toString.call(arr) /'[object Array]'
2、Array.isArray()
Array.isArray(arr) /true
3、constructor
arr.constructor === Array /true
4、 instanceof
arr instanceof Array /true
5、Array.protypr.isProtyprOf()
Array.prototype.isPrototypeOf(arr) /true
10、===和==区别：
==判断值相等
===值和类型都相等
11、深拷贝和浅拷贝：
1、区别：深拷贝互不影响，浅拷贝修改一个，另一个也会变
2、实现：
浅拷贝：直接赋值
深拷贝：1、JSON.parse(JSON.stringify(object))
2、扩展运算符实现
12、var 、const、let区别
1、var
使用var声明的变量时为顶级（window对象）变量，也是全部变量
使用var声明的变量存在变量提升情况
使用var可以对一个变量多次赋值，后面的声明会覆盖前面的变量声明
在函数中再次使用var声明这个变量的时候，他是局部变量，不适用还是全局变量
2、let
let所声明的变量只在let命令所在的代码块中生效
let不存在变量提升
let不允许在同一作用域下重复声明
3、const
const声明一个只读的常量，一旦声明不能改变
const一旦声明，必须赋值
13、JS中判断一个对象是否为空
1、使用JSON中自带的。JSON.stringify()方法判断
const fff={}
console.log(JSON.stringify(fff) == "{}");
2、使用Object.keys()判断
const fff={}
console.log(Object.keys(fff).length);
14、new 一个箭头函数会咋样：
会报错，new的是构造函数，而箭头函数不能当作构造函数
15、扩展运算符作用：
1、复制（基本数据类型就是深拷贝，引用类型就是浅拷贝）
2、合并
3、字符串变成数组
16、es6中rest参数：
配置扩展运算符使用，把一个分离的参数系列整合成一个数组，值是一个数组
17、es6中对象和数组解构
1、对象
const obj={name:"111",age:"12"}
const {name,age}=obj
2、数组
const [a,b,c]=[1,2,3]
18、JS中DOM和BOM区别
1、DOM、document,文档对象类型，操作对象是文档
2、BOM、browser object model 浏览器对象模型，操作对象是window
BOM是控制浏览器行为的api，DOM是一个页面结构api
19、JS中的arguments类数组(用来存放函数参数的对象)
1、将数组的方法应用到类数组上
2、将类数组转化成数组
3、使用展开运算符将类数组转成数组
20、JS如何判断一个对象是否属于一个类
1、instanceof
2、constructor
21、JS中map和foreach区别：
返回值不同，map可以返回值，foreach返回undefind
22、for of 可以遍历那些对象：
es6一个新增的遍历方法，但只限于迭代器（iterator）所以普通对象不可以遍历
23、JS中遍历数组的方法：
1、foreach
2、filter
3、for--of
4、reduce
5、map
24、for---of 和for --- in 区别：
都可以遍历数组，但是for in返回的是下标，for of返回的是值
for in可以遍历对象，for of不可以
25、JS中如何判断一个属性是属于实例对象还是继承于构造函数
通过hasOwnProperty()检测一个属性是否属于自身对象，还是继承于原型链上
hasOwnProperty可用于检测对象中是否含有某一个键值对
let arr={a:1,b:2,c:{d:1,g:2}}
arr.hasOwnProperty('a')
true
arr.hasOwnProperty('b')
true
arr.hasOwnProperty('d')
false
26、JS中bind和call和apply的作用以及他们的区别
bind、call、apply
都能改变this指向，第一个参数都是this指向的对象，第二个参数bind和call是用逗号分隔，而apply则是直接传入数组，另外，bind是创建一个函数，需要调用
this指向问题：
方法，指向方法所属的对象
直接用 指向全局
函数中，指向全局
函数中，严格模式下指向undeifnd
事件中，指向将要接受事件的元素
27、函数柯里化 （函数里面返回函数）
函数柯里化就是我们给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数。部分求值
function ddd () {
let args = Array.prototype.slice.call(arguments)
let inner = function () {
args.push(...arguments)
return inner
}
inner.toString = function () {
return args.reduce((a, b) => {
return a + b
})
}
return inner
}
const result = ddd(1, 2)(3)(4, 5, 6).toString()
console.log(result)
28、数组常用方法：
filter ：检测所有元素，返回所有符合元素的数组
let d = arr.filter((item) => {
return item.name == '1111'
})
console.log(d) //[{ name: 1111 }]
some：检测数组元素中是否有元素符合指定条件
let f = arr.some((item) => {
return item.name == '22222'
})
console.log(f) //false
map ：通知指定函数处理每个元素，并且返回处理后元素数组
arr.map((item) => {
item.age = 'fff'
})
console.log(arr) //[{name: 1111, age: 'fff'},{name: 222, age: 'fff'}]
reduce：将数组元素计算为一个值（左->右）
sort：对数组元素进行排序
29、方法和函数的区别：
在对象中的函数叫方法，不在对象中的叫函数
方法通过对象调用，函数通过函数名调用
30、数组常用的方法？哪些方法会改变原数组，哪些不会
改变：pop、push、sort、shift、unshift
不改变 ：some，map，filter，indexof
31.什么是原型链？
每一个实例对象上都有一个proto对象属性指向构造函数得原型对象，构造函数得原型对象也是一个对象，也有proto属性，这样一层一层往上找得过程就形成了原型链
32、es6有哪些新特性？
let，const，for of，箭头函数，扩展运算符，set，map。promise
33、什么是symbol
es6引入，表示独一无二的值
34、promise是什么，有什么作用
promise是个对象，用来解决回调地狱，promise有三个状态(pedding等待，resolved成功，rejected失败)，promise是同步，promise.then,promise.catch是异步
35、什么是递归，递归有哪些优缺点？
函数内部调用自身就是递归
优点：机构清晰，可读性强
缺点：效率低
36、严格模式的限制
变量必先声明再使用
函数的参数不能有同名属性
禁止this指向全局
37、git常用命令
git add
git init
git clone
git push
git status
git commit -m ‘描述信息’
38、Split（）和 join（）的区别？
split根据指定符号分割字符串转成数组
join根据指定符号把数组拼接成字符串
39、数组去重
set，双重for循环，indexof，filter
40、什么原因会造成内存泄露
闭包，定时器延时器没清理
41、get和post区别
post比get安全，传值量大，理由是get通过url传值，浏览器对url长度有限制，而post则是通过请求体传参
42、dom如何实现浏览器内多个标签页之间的通信
websocket或者localstorage
43、普通函数和箭头函数的区别
箭头函数没有函数名，没原型，原型是undefind,this指向全局对象，函数指向引用对象
call，bind，apply改变不了箭头函数指向
44、异步概念，为什么要使用异步
多个任务同时进行，且执行顺序是无序的genertor
原因：js是单线程的，为了提高代码的可读性
常见的异步：延时器、定时器、promise.then、ajax也可以设置为异步、回调函数
实现异步：promise、async await(es7)、Generator(es6)
45、遍历对象的几种方法
for in
Object.keys()遍历键
Object.values遍历值
Object.entires 遍历键值对，数组形式输出
46、事件循环 （eventloop 已问tlowp）
1、js是单线程，防止代码阻塞，任务分为同步任务和异步任务
2、同步代码交给js引擎执行，异步代码交给宿主环境
3、同步代码放入执行栈中，异步代码等待时机成熟送入执行队列排队
4、执行栈执行完毕，会去任务队列看是否有异步任务，有就推送到执行栈执行，反复循环查看执行，这个过程就叫做事件循环
异步任务分为微任务（js引擎promise.then,saync,await），宏观任务（宿主环境script块、setimeout）
-
vue
1、vue双向数据绑定的原理？
vue2是通过数据劫持（es5的object.defineproperty()）和发布者-订阅者模式配合
vue3是通过proxy代理加Reflect(反射)
2、vue的生命周期有哪些
beforecreate创建前
created创建完成
beforemounted挂载前
mounted 挂载完成
beforeupdate挂载前
updated挂载完成
beforedestory销毁前
destory销毁后
3、v-if 和v-show有什么区别？
v-if是动态的往dom树内创建或者销毁dom元素，v-show是动态控制display：none 实现dom元素的隐藏和显示
4、async await 是什么？它有哪些作用？
async await（es7）是promise的语法糖，实现异步的同步写法，async和await必须连用，async声明一个函数是异步的，await用来等待一个异步方法执行完成
5、v-for 循环为什么一定要绑定key ?
给每个dom元素加上唯一标识，使得diff算法（递归和空指针）可以正确识别这个节点，使页面渲染更加迅速
6、组件中的data为什么要定义成一个函数而不是一个对象？
每个组件都是vue实例，组件共享data属性，当data的值是同一个引用类型的值时，会相互影响
7、vue性能优化
路由懒加载，ui组件按需引入，防抖节流、函数式组件
8、mvvm和mvc
mvvm：模板m，视图v，vm数据视图交换层，简化了大量dom操作
mvvm通过数据驱动视图层的显示而不是节点操作
mvc中的view和model是可以直接访问的,造成耦合度较高
mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度慢
9、路由模式：hash和history
前端路由的两种模式，hash的url中有#，history没，相对而言，history更美观，但是需要后端配合使用，hash兼容比较好
10、第一次加载页面会触发哪几个钩子函数？
1、父组件
beforecreate、created、beforemounte、mounted
- 父子组件渲染
父beforeCreate→父created→父beforeMount→子bereforeCreate→子created→子beforeMound→子mounted→父mounted
- 父子组件更新
父beforeUpdate→子beforeUpdate→子updated→父updated
- 父子组件销毁
父beforeDestroy→子beforeDestroy→子destroyed→父destroyed
11、Vuex 的 5 个核心属性是什么?
states:保存数据
getters: 计算属性
mutations: 修改数据
actions: 提交数据
modules: 模块化
12、请说出vue.cli项目中src目录每个文件夹和文件的用法？
assest静态资源（图片）
components(组件)
router(路由)
view(视图)
app.vue(主组件)
main.js入口文件
13、$route和$router的区别
route相当于正在跳转的路由对象，可以从里面获取name,path,params,query等等
router:是vuePouter实例，用来跳转页面，this.$router.push()
14、虚拟dom实现原理
用js对象模拟真实DOM树，对真实DOM进行抽象
diff算法：比较状态变更后新旧树差异
pach算法：将两个虚拟DOM对象的差异应用到真实DOM树
15、怎样理解vue单项数据流
数据总是从父组件传到子组件，子组件没有权力去修改父组件传过来的数据，只能请求父组件对源数据就行修改
16、slot插槽
slot插槽，可以理解为slot在组件模板中提前占据了位置，当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口
主要作用是：复用和扩展组件，做一些定制化组件的处理
默认插槽、具名插槽、作用域插槽
17、vue常见指令
v-module
v-bind
v-if
v-else
v-text
v-for
18、vue中keep-alive 的作用
主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面
< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
组件状态保留，避免重复渲染
19、vue的路由传参方式 （params和query模式）
传参方式可划分为 params 传参和 query 传参，
params只能通过name引入路由
query模式既可以通过name又可以通过path，建议通过path
20、前后端API交互如何保证数据安全性？
使用tooken，使用https请求
21、权限怎么实现
不同的角色有不同的权限，根据登录的信息，获取路由，操作权限
菜单权限 接口获取，存放vuex和localstorage
界面权限 路由导航守卫，动态路由
按钮权限 路由规则中加meta，通过路由对象获取meta数据，自定义指令
接口权限 接口拦截文件配置
22、vue如何实现路由懒加载
1：Vue异步组件
2：ES6标准语法 component: () => import（）---------推荐使用！！！！！
3：webpack的require，ensure()
23、vue中key的作用和原理：
vue中的key用来判断虚拟节点是否相同，相同就可以复用老节点
24、vue中diff算法：（递归和双指针）
dom树同级比较，不一样直接替换，一样对比属性，对比子类，如果都有的情况，双指针，头头，尾巴，对比查找，进行复用
25、vue2中是如何检测数组变化的：
vue2没有使用defineProperty()对数组的每一项进行拦截，而是选择重写数组
数组中如果是对象的数据类型，也继续递归处理
数组的索引和长度变化是无法控制监控的
26、vue2为什么需要虚拟dom：
直接操作真实dom性能低
优点：
1、组件高度抽象化
2、可以更好的实现ssr，同构渲染等
3、框架跨平台
27、nextTick原理：
1、nextTick中的回调函数，在下一次DOM更新结束之后执行回调，可以保证用户定义的逻辑在DOM更新后执行
28、v-for为什么不推荐和v-if使用在同一个元素上？
v-for的优先级高于v-if，也就是说v-if将运行于每个v-for循环中
29、vue组件通信方式
- props $emit
- $ref
- provide /inject
- 事件总线 eventBus
- $attrs/$listener （多级嵌套）
- vuex
- localstroage/sessionStroage
30、vue中watch和compted区别
computed计算属性，可缓存，不支持异步
watch 监听属性，无缓存，支持异步，有两个属性，immediate:组件加载，直接触发 deep：深度监听
31、vuex和loaclstroage的区别
| vuex | loaclstroage | |
| 存储方式 | 内存 | 本地 |
| 响应式 | 可以 | 不可以 |
| 永久性 | 刷新页面丢失 | 不丢失 |
| 用途 | 一般用组件间传值 | 跨页面传递数据 |
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
