面经问题笔记一

三次握手四次挥手

先了解TCP报文包含了哪些东西：
序号seq：表示发送的数据字节流，确保TCP传输有序，对每个字节编号
确认序号ack：发送方期待接收的下一序列号，接收成功后的数据字节序列号加 1。只有ACK=1时才有效。
确认ACK：确认序号的标志，ACK=1表示确认号有效，ACK=0表示报文不含确认序号信息
同步SYN：连接请求序号标志，用于建立连接，SYN=1表示请求连接
终止FIN：结束标志，用于释放连接，为1表示关闭本方数据流

三次握手简单分析：
第一次：客户端发送请求到服务器，服务器知道客户端发送，自己接收正常。SYN=1,seq=x
第二次：服务器发给客户端，客户端知道自己发送、接收正常，服务器接收、发送正常。ACK=1,ack=x+1,SYN=1,seq=y
第三次：客户端发给服务器：服务器知道客户端发送，接收正常，自己接收，发送也正常.seq=x+1,ACK=1,ack=y+1
四次挥手简单分析：
第一次：客户端请求断开FIN,seq=u
第二次：服务器确认客户端的断开请求ACK,ack=u+1,seq=v
第三次：服务器请求断开FIN,seq=w,ACK,ack=u+1
第四次：客户端确认服务器的断开ACK,ack=w+1,seq=u+1
常见问题：
1、为什么连接的时候是三次握手，关闭的时候却是四次握手？
答：服务器端接受客户端请求时，可以同时发送ACK和SYN但不能同时发送ACK和FIN
2、为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态？
答：TIME_WAIT状态就是用来重发可能丢失的ACK报文
3、为什么不能用两次握手进行连接？
答：3次握手完成两个重要的功能，既要双方做好发送数据的准备工作(双方都知道彼此已准备好)，也要允许双方就初始序列号进行协商，这个序列号在握手过程中被发送和确认
4、如果已经建立了连接，但是客户端突然出现故障了怎么办
答：TCP还设有一个保活计时器

节流和防抖

函数节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
定时器实现：

var scrollTap = () => {
        console.log('我执行了一次函数');
    }
     const throttle=(func,time)=>{
		 let timer=null;
		return function(){
           if(timer){
			   return ;
		   }
		   timer=setTimeout(()=>{
			   func();
			   timer=null;
		   },time)
		}
	 }

    document.addEventListener('scroll', throttle(scrollTap, 500)); //500ms执行一次

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

  var scrollTap = () => {
        console.log('我执行了一次函数');
    }
     const debounce=(func,time)=>{
		 let timer=null;
		return function(){
           clearTimeout(timer);
		   timer=setTimeout(()=>{
			   func();
			   
		   },time)
		}
	 }

    document.addEventListener('scroll', debounce(scrollTap, 500)); //500ms执行一次

进程和线程

进程：一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间，一个进程可以有多个线程，比如在Windows系统中，一个运行的xx.exe就是一个进程。
线程：进程中的一个执行任务（控制单元），负责当前进程中程序的执行。一个进程至少有一个线程，一个进程可以运行多个线程，多个线程可共享数据。
根本区别：进程是操作系统资源分配的基本单位，而线程是处理器任务调度和执行的基本单位

HTTP和HTTPS的区别

HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。它可以使浏览器更加高效。HTTP 协议是以明文方式发送信息的，如果黑客截取了 Web 浏览器和服务器之间的传输报文，就可以直接获得其中的信息
HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。
区别：
1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

JS中类的继承

1、类式继承
将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。

//1.类式继承  
//声明父类  
function SuperClass() {  
  this.superValue = true;  
}  
//为父类添加公有方法  
SuperClass.prototype.getSuperValue = function () {  
  return this.superValue;  
};  
//声明子类  
function SubClass() {  
  this.subValue = false;  
}  
//继承父类  
SubClass.prototype = new  SuperClass();//将父类对象赋值给子类原型，子类原型可访问父类原型上的属性和方法--类式继承原理  
//子类添加公有方法  
SubClass.prototype.getSubValue = function() {  
  return this.subValue;  
};  
  
//测试  
var instance = new SubClass();  
console.log(instance.getSuperValue());//t  
console.log(instance.getSubValue());//f  
//  
console.log(instance instanceof SuperClass);//t  
console.log(instance instanceof SubClass);//t  
console.log(SubClass instanceof SuperClass);//f  
console.log(SubClass.prototype instanceof SuperClass);//t 

2、构造函数式继承
通过在子类的构造函数中执行一次父类的构造函数实现。

//2.构造函数式继承  
//声明父类  
function SuperClass(id) {  
  this.book = ['javascript','html','css'];//引用类型共有属性  
  this.id = id;//值类型公有属性  
}  
//父类声明原型方法  
SuperClass.prototype.showBooks = function() {  
  console.log(this.books);  
}  
//声明子类  
function SubClass(id) {  
  //继承父类  
  SuperClass.call(this,id);  
}  
//测试  
var ins1 = new SubClass(1);  
var ins2 = new SubClass(2);  
ins1.book.push("Node");  
console.log(ins1.id);//1  
console.log(ins1.book);//['javascript', 'html', 'css', 'Node']  
console.log(ins2.id);//2  
console.log(ins2.book);//['javascript', 'html', 'css']  
  
ins1.showBooks();//TypeError: ins1.showBooks is not a function 

3、组合式继承
综合以上两种模式的优点，在子类原型上实例化父类，在子类构造函数中执行一遍父类的构造函数。这样融合了类式继承和构造式继承的优点，过滤了缺点。

//2.构造函数式继承  
//声明父类  
function SuperClass(id) {  
  this.book = ['javascript','html','css'];//引用类型共有属性  
  this.id = id;//值类型公有属性  
}  
//父类声明原型方法  
SuperClass.prototype.showBooks = function() {  
  console.log(this.books);  
}  
//声明子类  
function SubClass(id) {  
  //继承父类  
  SuperClass.call(this,id);  
}  
//测试  
var ins1 = new SubClass(1);  
var ins2 = new SubClass(2);  
ins1.book.push("Node");  
console.log(ins1.id);//1  
console.log(ins1.book);//['javascript', 'html', 'css', 'Node']  
console.log(ins2.id);//2  
console.log(ins2.book);//['javascript', 'html', 'css']  
  
ins1.showBooks();//TypeError: ins1.showBooks is not a function  

4、原型式继承
对类式继承的封装，过渡对象相当于子类

//4.原型式继承  
function inheritObject(o) {  
  //声明过渡函数对象  
  function F() {}  
  //过渡对象的原型继承父类  
  F.prototype = o;  
  return new F();  
}  
//测试  
var book = {  
  name : "javascript",  
  book : ['js','css']  
};  
var newbook = inheritObject(book);  
newbook.name = "ajax";  
newbook.book.push("Node");  
var otherbook = inheritObject(book);  
otherbook.name = "xml";  
otherbook.book.push("React");  
console.log(newbook.name);//ajax  
console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]  
console.log(otherbook.name);//xml  
console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]  
console.log(book.name);//javascript  
console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]  

5、寄生式继承
寄生式继承其实是对原型继承的第二次封装，并且在第二次封装的过程中对继承的对象进行了拓展

//5.寄生式继承  
function inheritObject(o) {  
  //声明过渡函数对象  
  function F() {}  
  //过渡对象的原型继承父类  
  F.prototype = o;  
  return new F();  
}  
//声明基对象  
var book = {  
  name : "javascript",  
  book : ['js','css']  
};  
function createBook(obj) {  
  //通过原型继承方式创建新对象  
  var o = new inheritObject(obj);  
  //拓展新对象  
  o.getName = function() {  
    console.log(name);  
  }  
  //返回拓展后的新对象  
  return o;  
}  
  
var newbook = createBook(book);  
newbook.name = "ajax";  
newbook.book.push("Node");  
var otherbook = createBook(book);  
otherbook.name = "xml";  
otherbook.book.push("React");  
console.log(newbook.name);//ajax  
console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]  
console.log(otherbook.name);//xml  
console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]  
console.log(book.name);//javascript  
console.log(book.book);//[ 'js', 'css', 'Node', 'React' ] 

6、寄生组合式继承

/寄生组合式继承  
function inheritObject(o) {  
  //声明过渡函数对象  
  function F() {}  
  //过渡对象的原型继承父类  
  F.prototype = o;  
  return new F();  
}  
//寄生式继承 继承原型  
function inheritPrototype(subClass,superClass) {  
  //复制一份父类的原型副本保存在变量中  
  var p = inheritObject(superClass.prototype);  
  //修正因为重写子类原型导致子类的constructor属性被修改  
  p.constructor = subClass;  
  //设置子类的原型  
  subClass.prototype = p;  
}  
function SuperClass(name) {  
  this.name = name;  
  this.colors = ["red","blue","green"];  
}  
//定义父类原型方法  
SuperClass.prototype.getName = function() {  
  console.log(this.name);  
}  
function SubClass(name,time) {  
  SuperClass.call(this,name);  
  this.time = time;  
}  
//寄生式继承父类原型  
inheritPrototype(SubClass,SuperClass);  
//子类新增原型方法  
SubClass.prototype.getTime = function() {  
  console.log(this.time);  
}  
//测试  
var ins1 = new SubClass("js",2014);  
var ins2 = new SubClass("css",2015);  
ins1.colors.push("black");  
console.log(ins1.colors);  
console.log(ins2.colors);  
ins2.getName();  
ins2.getTime();  
from http://blog.csdn.net/qq_31280709/article/details/52137086

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

var f = a => a;
 
var f = function (a) {
  return a;
};

Vue2.0和3.0的区别

1.项目结构不同
2.配置项不同
3.渲染方式，Vue2.0使用Virtual Dom直接渲染，3.0使用h函数识别，如果是html标签则使用virtual dom，如果是vue组件就生成组件代码
4.按需监听，vue2.0使用ES5的getter setter，3.0基于Proxy
5.按需引入，3.0不会全部都跑一变

圣杯布局

1.浮动+magin:

<body>
	<div class="container">
		<div class="center"></div>
		<div class="left"></div>
		
		<div class="right"></div>
	</div>
</body>
<style>
  .container{
	 height: 100%;
	 padding: 0 200px;
  }
  .center{
	 height: 400px;
	 background: red;
	 float: left;
	 width: 100%;
	 
	 
  }
  .left{
	  height: 200px;
	  background: blue;
	  width: 200px;
	  float: left;
	  margin-left: -100%;
	  position: relative;
	  left: -200px;
  }
  .right{
	height: 200px;
	  background: blue;
	  width: 200px;
	  float: left;
	  margin-right: -200px;
	  
  }

  
</style>

2.flex

<body>
	<div class="container">
		
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>
<style>
  .container{
	 height: 100%;
	display: flex;
	justify-content: space-between;
  }
  .center{
	 height: 400px;
	 background: red;
	 width: 100%;
	 flex:1;
	 
  }
  .left{
	  flex:0 0 200px;
	  height: 200px;
	  background: blue;
	  width: 200px;
  }
  .right{
	flex:0 0 200px;
	  height: 200px;
	  background: blue;
	  width: 200px;
	  
  }

  
</style>

3.定位：

<body>
	<div class="container">
		
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>
<style>
  .container{
	 height: 100%;
	 position: relative;
  }
  .center{
	 height: 400px;
	 background: red;
	
	 margin: 0 200px;
	 
  }
  .left{
	  position: absolute;
	  height: 200px;
	  background: blue;
	  width: 200px;
  }
  .right{
	position: absolute;
	  height: 200px;
	  background: blue;
	  width: 200px;
	  top: 0;
	  right: 0;
	  
  }

  
</style>

URL输入到显示发生了什么

DNS解析(先在浏览器本地缓存找，找到泽返回IP地址，若没有则请求上级DNS服务器解析）——解析完成后TCP三次握手建立连接——建立连接完成后发送HTTP请求——服务器收到HTTP请求后返回html文件——收到HTML文件后开始渲染——关闭连接TCP四次挥手

微任务宏任务

微任务：promise、process.nextTick
宏任务：setTimeout、setInterval 、setImmediate

Vue中key的作用

key是为了管理可复用的元素，Vue会尽可能高效的渲染元素，比如key能高效的更新元素

单页面路由实现的原理

1.hash：使用location.hash和hashchange实现
2.history API:onpopstate事件

Http1.0 1.1 2.0的区别

1.0使用的是短连接，数据传输完后服务端会自动断开连接
1.1使用了长连接，数据传输完也不会由服务端断开连接而是客户端不需要的时候由客户端来断开连接
2.0使用了多路复用，这样使用一个TCP连接就能够同时处理多个请求，
还使用了二进制分帧，在应用层和传输层之间加了一个二进制分帧层来提高数据的传输效率