好未来前端面试

前端面试题

1. 什么是盒模型？box-sizing 的作用是什么？

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
（3）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（4）IE盒模型：属性width，height包含content、border和padding，指的是content + padding + border

2.css 里面垂直居中怎么实现？能想到那些方案？

水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%

垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle

垂直水平居中
1.使用position:absolute/position:fixed,设置left：50%、top：50%、margin-left：-1/2width、margin-top:-1/2height的属性
2.position:fixed/absolute，margin:auto,其他top,right,bottom,left均0
3.利用display:table-cell属性使内容垂直居中，vertical-align:middle;text-align:center;
4.最简单的一种使行内元素居中的方法，使用line-height属性 =height; text-align:center;

3. 列举下常见的 Web 攻击手段及防御办法。

1.XSS全称是跨站脚本攻击（Cross Site Scripting），指攻击者在网页

4. 介绍下 TCP 三次握手的过程，为什么 TCP 连接需要三次握手？

第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.
完成三次握手,客户端与服务器开始传送数据

5.什么是观察者模式？前端开发中哪些地方用到了观察者模式？

有时又被称为发布-订阅模式,在观察者模式中，只有两个主体，分别是目标对象Subject，观察者Observer。
1.观察者需Observer要实现update方法，供目标对象调用。update方法中可以执行自定义的业务代码。
2.目标对象Subject也通常被叫做被观察者或主题，它的职能很单一，可以理解为，它只管理一种事件。
Subject需要维护自身的观察者数组observerList，当自身发生变化时，通过调用自身的notify方法，
依次通知每一个观察者执行update方法。

6.实现一个数组数组快速排序，它的时间复杂度如何计算？

function quick(arr){
	if(arr.length==0) return [];
	var left = []
	var right = []
	var base = arr[0]
	for(var i=1;i<arr.length;i++){
		if(arr[i]<base){
			left.push(arr[i])
		}else{
			right.push(arr[i])
		}
	}
	return quick(left).concat(base,quick(right))
}

7.http 请求方式有哪些？GET 请求和 POST 请求的区别？

有GET, POST, PUT, DELETE等等
get请求是向服务器索要数据，post请求是向服务器传送数据的
GET把参数包含在URL中，POST通过request body传递参数。
GET产生一个TCP数据包；POST产生两个TCP数据包。

8.http 常用的状态码有哪些？200 和 304 有什么区别？

1信息，服务器收到请求，需要请求者继续执行操作
2成功，操作被成功接收并处理
3重定向，需要进一步的操作以完成请求
4客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
当客户第一次请求服务器资源，服务器成功返回资源，这时状态码为200。
304缓存和上面最大的区别是浏览器需要向服务器询问一次，如果服务器端认为没有内容更新，直接返回304状态码
200 正常响应成功 304 读缓存

9.session 跟 cookie 有什么区别

1、存储位置不同
cookie的数据信息存放在客户端浏览器上。
session的数据信息存放在服务器上。
2、存储容量不同
单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。
对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。
3、存储方式不同
cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。
session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。
4、隐私策略不同
cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的。
session存储在服务器上，对客户端是透明对，不存在敏感信息泄漏的风险。
5、有效期上不同
开发可以通过设置cookie的属性，达到使cookie长期有效的效果。
session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。
6、服务器压力不同
cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。
session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。
7、跨域支持上不同
cookie支持跨域名访问。
session不支持跨域名访问。

10.什么是跨域？解决跨域有哪些方案？

跨域的严格一点来说就是只要协议，域名，端口有任何一个的不同，就被当作是跨域。
1.CORS（跨域资源共享）需要被请求方的服务端设置： Access-Control-Allow-Origin。兼容性不够好,在IE10以下的浏览器不支持。
2.服务器代理 A客户端访问A服务器，并在A服务器上做代理访问B服务器把请求结果返回A客户端，即实现了A客户端请求B服务器的跨域需求。
3.JSONP原理:所有具有src属性的HTML标签都是可以跨域的，包括