一、HTTP
定义：HTTP超文本传输， 是现在互联网使用最广泛的一种网络协议
1.计算机网络有几层网络协议
7层
- 物理层：(光纤路由器)
- 数据链路层：(交换机，ppp ）
- 网络层：(IP,ARP)
- 传输层：TCP(面向连接的) / UDP(无连接,尽最大可能)
- 会话层，表示层，应用层 : 通常后3层为一层，所以也可以说有5层
HTTP是应用层的，TCP、UDP是传输层，IP是网络层，TCP 是HTTP底层的协议
http1.x和http2使用的TCP，而HTTP3使用的UDP优化的
2. TCP/IP三次握手，四次挥手知道吗?
TCP/IP协议簇是互联网的基础：也就是网络接口层
TCP三次握手
- 客户端发起一个syn包(SYN=j)(请求报文段)，等待服务器确认
- 服务器收到后返回 【确认请求包ACK(j+1) + 自己发送的syn包(seq=k)】
- 客户端收到服务端的ACK+SYN包后，向服务器发送确认包ACK(ack=k+1),发送完毕后进入TCP链接成功状态，开始传输数据
TCP的四次挥手
- 客户端发送连接释放报文，停止发送数据
- 服务端收到后，发出确认报文，此时半关闭状态
- 如果服务端不需要发送数据了，就向客户端发起连接释放请求
- 客户端收到后， 确认，关闭
3.你知道HTTP2吗？多路复用为主要
知道
HTTP2是http1的替代，语义和HTTP1一样，基于SPDY（谷歌开发的基于TCP会话层的协议）专注于性能，只需要一个TCP协议就可以发送多个http请求，主要采用了二进制格式传输数据，而不是1.x的文本格式。 通信单位是帧，每个数据流以消息的形式发送，消息由一个或多个帧组成。 可乱序，可重组，有优先级，具有多路复用，头压缩，服务器预推送等新特性，大大的提高了网页性能。 但是并不是最完美的，所以还有HTTP3基于UDP协议的QUIC协议，原生具有多路复用，加密，向前纠错，小丢包可以通过其他包的冗余数据重组，不需要重传，即使重传也只重传一个stream，不影响其他的stream。是又快又可靠的协议 具体
4.options预请求你知道吗？
浏览器有同源策略，所以出现跨域，为了解决跨域使用了CORS跨域资源共享， 这个模式下有一个浏览器的预检请求就是options，会在真正的请求前，先发送一个预请求，用来检测服务器是否允许此次请求，如何返回500等拒绝，则不发送第二次请求。简单请求get请求和部分的post不会发生预请求，下面三种请求属于复杂请求会发生预请求【1.不是get，post，head方法。2.post的content-type是application/json或者xml。3.自定义了请求头】如果服务端不做任何配置，请求是拒绝的，所以服务端需要设置【Access-control-Allow-origin ,headers,methods,age 等允许请求通过】 options预请求
5.HTTP缓存机制你知道吗？
http缓存其实就是disk 磁盘缓存，是由http头字段控制的，分为强制缓存和对比缓存，强制缓存如果命中缓存不会与服务器发生请求，所以优化点就是减少了请求数，可通过响应头返回cache-control（如果浏览器不支持htpp1.1就使用expries，http1.0的字段）的字段值去判断缓存是否命中，强制缓存的优先级是高于对比缓存的，所以如果强制缓存不生效或者未设置就走对比缓存，而对比缓存是每次都会与服务器发生连接的，但是他的优化点是通过减少相应体积，因为他的原理是通过文件的修改时间【last-modified/if-modified-since】或者文件的hash值[Etag/if-none-match]（优先级更高）去判断文件是否被修改，修改的话就返回200 和新规则，未修改的话就直接返回304 。而304状态码不返回响应数据。 http缓存机制具体
6.HTTP常见状态码
- 200 成功
- 204 没有内容no content
- 302 重定向
- 304 缓存，未修改
- 403 服务器拒绝访问，权限不够
- 404 网页不存在
- 500 服务器上传代码出错或者抛出异常
- 502 网关错误，大概意思就是nginx挂了
7.JSONP跨域原理分析
动态生成Script标签，因为src是不受浏览器同源限制的。前后端协商定义一个函数名，后端把数据包裹在函数名里返回，前端要把请求方式设置成jsonp，并且设置一个函数名jsonp:函数名。但是只支持get请求。 具体操作
8.经典题：输入网址的那一刻都发生了什么？
-
用户输入url网址
-
浏览器先去查看是否有内存或强制缓存，有缓存直接显示，没有就去DNS解析
-
DNS(域名解析系统)去查找对应的IP地址（从本地递归向上查找至根节点）
-
浏览器发起请求，建立tcp连接，三次握手
-
握手成功，浏览器向服务器发送http请求，
-
服务端响应，返回数据
-
浏览器接受到数据，进行客户端的页面渲染
- 解析HTML，生成DOM树，解析css，生成CSSDOM树
- 将DMO和CSSDOM结合，生成渲染树
- 回流：根据生成的渲染树，计算在设备视口内的位置和大小，叫回流
- 重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
- 展示在页面上
-
四次挥手，断开请求
DNS查找顺序：浏览器缓存，系统缓存，ISP缓存，根域名(com.cn的cn)，顶级域名(com)，主域名(baidu)。IP查询会从右向左递归查询，查到后会缓存一段时间，这就是DNS缓存
二、Javascript + ES6
1. 事件循环是什么？JS的执行机制？
js是单线程，同步任务都在主线程上执行，而向setTimeout，ajax，dom交互等异步行为，如果也要在主线程上排队等待就会造成页面假死，用户体验差。所以就给这些异步行为安排了一个任务队列，将异步执行的结果放在任务队列中，如果主线程同步任务执行完，就去任务队列中按顺序取出，这样的反复循环的过程就叫做事件循环。也就是js的执行机制。其中任务队列还有微任务和宏任务，微任务的执行顺序先于宏任务，ES6的promise.then里的就是微任务。
2. setTimeout为什么不按写好的延迟时间执行
因为比如你写了一个延迟一秒后去执行，但是同步任务+微任务太多超过了一秒，最后就会变成大于1秒后才执行，因为事件循环中宏任务是最后执行的，而且要按照在任务队列中先进先出的顺序执行，自然就无法保证了
3. 你知道函数的防抖和节流吗？
防抖就是延迟执行例如input搜索，节流就是固定时间内只执行一次，比如提交，节流需要一个标识，为fasle时不能执行
4. setTimeout实现setInterval
利用递归调用setTimeout。全局timeid清除计时器
var timeid ;
function mySetInterval(fn,time){
function inner(){
fn();
timeid = setTimeout(inner,time)
}
inner();
return timeid
}
mySetInterval(()=>{console.log('重复')},2000)
setTimeout(()=>{
clearTimeout(timeid)
},6000)
5. 改变this指针的几种方法
apply,call,闭包赋值，bind，箭头函数改变this指针的方法详解
6. 点击页面的li列表并弹出其索引。考察：闭包
有权访问另一函数作用域内变量的函数，最常见的创建方式就是函数包含函数。副作用是引用没有被释放，比如for循环，会读取最后一个值。解决方案就是内部创建一个匿名函数，或者ES6的let方式 闭包案例
7. 知道bind函数吗，可以写一下怎么实现的吗？
Fcuntion.prototype.myBind = function(context){
if(typeof this!='function'){
throw Error('调用者不是函数')
}
var that = this;
var args = [].slice.call(arguments,1)
return function(){
var all_args = args.concat(Array.from(arguments));
that.apply(context,all_args)
}
}
8. 深拷贝
9. 检测对象类型
10.一句话去重：[...new Set([1,2,3,1,2,3])]
11. new 操作符都做了什么？
三、VUE
vue 的核心是 数据双向绑定： vue 数据劫持 和发布订阅模式
- vue-router 实现原理 ？（前端路由机制）
- vue的mvvm模式？
- 说说对vue的虚拟dom以及diff算法的理解？
- vue的函数组件化
- vue的指令？
- vue的声明周期？
- vue的nextTick原理？
- vue 的数据劫持，就是数据双向绑定？
四、css + (scss || less)
1. css 行内元素和块级元素都有什么
行内元素： span,a,b,i,em, img ,input ,select,strong
块级元素：div,p,ul,ol,li,h1-h6
2. css 盒模型 （w3c 盒模型和IE盒模型）？css3哪个属性会让padding包含在width中？
盒模型： content + padding + border + margin 。 默认元素的实际宽度是contentwidth+padding+border
css3的box-sizing 定义如何计算元素的宽度和高度：是否应该包含padding和border
A: content-box: padding +border 不包含在width中，也就是实际上看起来要大一些（默认值）
B: border-box: padding+ border 包含在width中【答案】
3. 实现一个垂直居中？ 了解flex吗？用flex实现
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
//方式一：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
//方式二：
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
//方式三：
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:300px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
background-color: pink; /* 方便看效果 */
}
//方式四：仅仅水平居中
div{
margin:0 auto;
}
div{
text-align:center
}
4. position 定位
1. relative ：相对定位，相对于自己本身
2. absolute ：绝对定位，相对于值不为static的第一个父元素
3. fixed： 浏览器窗口
4. static：默认值，没有定位
5. inherit：继承父元素
6. sticky :css3的新属性，类似relative和fixed的合体。兼容性不太好
5.css 预处理语言都有什么？为什么使用sass而不使用less
sass和less 都是css的预处理语言，可以在css中使用变量， 简单程序逻辑，函数等。可以让css更加简洁，适应性更强， 代码更直观，提高开发效率等诸多好处 区别：
- sass是基于ruby实现的，mac自带，不需要安装。
- sass 的功能更强大，维护团队更强，api健全，行业认可，社区庞大，兼容性更好。
- 变量定义：$ 【less中是 @】
- @mixin 混合
- @for $i from 1 through 5{}
6. 解释下 BFC
BFC 就是 块级格式化上下文。是页面中的一块渲染区域，有自己的渲染规则。
主要是解决
- 外边距合并，
- 高度塌陷（浮动），
- 避免元素被浮动元素覆盖，
- 避免多列布局由于宽度计算四舍五入而自动换行
触发的几个条件：
- overflow的值不是visible 【解决浮动告诉塌陷】
- float值不为none
- position值不为static 和relative
- disable的值为flex ，inline-block，table-cell等
为什么可以解决问题：
- 垂直方向一个一个放置
- 同一个BFC的margin外边距会合并
- BFC区域不会与float 元素重叠。（元素float后会脱离文档流，覆盖在其他元素上）
- 计算BFC高度时，浮动元素会参与计算 （清除浮动）
- BFC是一个隔离的独立容器， 容器内的子元素不会影响到外面的元素
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反）
7. 移动端适配是什么做的， rem知道吗？em呢？
移动端适配分为响应式布局和弹性布局， 响应式布局就是媒体查询，弹性布局就是em，rem，vh等
- em 根据父元素的字体大小而改变，牵一发而动全身
- rem 是根据html字体大小而改变的。
- vh 就是1vh = 1/100 但是兼容性不好，iosyao 6.1+,安卓要4.1+ 以上才可以
8. flex:1 是哪些值的简写
- flex-grow（生长）：默认为0 ，即有剩余空间不放大
- flex-shrink(收缩)：默认为1，即空间不足项目缩小
- flex-basis: 默认为auto，即项目本身宽度 flex：1【0，1，auto】 flex:auto【1，1，auto】flex:none【0，0，auto】
当项目宽度之和是小于总宽度的，则项目会被压缩。解决方案：flex-shink:0 原理：空间不足， 默认压缩。
