1.请简述px，rem和em有什么区别？
px是绝对尺寸单位，其值是固定的。而em和rem是字体相对尺寸单位，其值并不固定。em会继承父级元素的字体大小，而rem则是相对于html根元素确定的。
2.说说TCP传输的三次握手四次挥手策略
三次握手
a.为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。
b.发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
c.最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。断开一个TCP连接则需要“四次挥手”：
a.第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
b.第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
c.第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
d.第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
3.post请求和get请求的区别
（1） get请求一般用来获得数据，而post请求一般用来发送数据。人们期望，get请求不会对服务器造成任何影响，而post请求则可能会影响服务器端的数据。get请求消耗的资源较post请求而言，会少一些，但相对安全性较差。发送同样大小的数据，get请求的效率最高可以达到post请求的2倍。
（2）一般按照约定，使用get请求时，将数据通过url进行传递，而是用post请求时，将数据放在body里。但这并非硬性规定，因为method和data本身是正交的。post请求亦可将数据放在url中。
（3）就协议底层实现而言，在get请求中，只产生一个TCP数据包，浏览器会将header和data一并发送出去，等待服务器的回应；而在post请求中，会产生2个TCP数据包。，浏览器先发送header，服务器响应100 continue，浏览器再发送data。
4.cookie和session的机制是什么？有什么区别？
会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话，它可以弥补http协议无状态的不足。常用的会话跟踪技术是cookie与session。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份。
cookie有什么作用？
cookie可以解决http的无状态的问题，与服务器进行交互，作为http规范存在。它具有极高的简便性、可扩展性和可用性，也可以通过加密和SSL技术来提高其安全性。因此推荐使用cookie作为标识而不是身份验证的工具。cookie的缺点
（1） 大小和数目受限制。浏览器对一个域cookie的条目数有上限要求，且每个cookie的大小不得超过4kb。
（2）存在安全性问题，易被人拦截。
（3）需要指定域，不可以跨域
（4）浪费带宽，因为我每次请求一个新的页面，cookie都会被自动发送过去。
（5）有的移动端浏览器不支持cookie或浏览器禁用cookie
（6）有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。如何删除cookie
在服务器端，以java为例，可以将同名cookie的maxAge属性置0；在客户端，可以将expires属性设置为过去的一个时间。即：
document.cookie = ‘name=’+cookie_name+’;expires=’+ passed_date
5.为什么要尽量用css3代替js
导致JavaScript效率低的两大原因：操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘，在PC版本的浏览器中，因为浏览器可用的内存比较大，用户肉眼几乎看不见页面动画产生的repaint和reflow，所以工程师几乎无需过多的考虑动画带来的性能问题，但在移动设备上可大有不同，移动设备分配给内置浏览器的内存可没有PC版本的浏览器内存可观，目前对CSS3支持最好的莫过于webkit浏览器了，在webkit内核的浏览器，莫过于safari其次是chrome.
-
用CSS3动画替代JS模拟动画的好处：
- 不占用JS主线程；
- 可以利用硬件加速；
- 浏览器可对动画做优化（元素不可见时不动画减少对FPS影响）
坏处是：
浏览器对渲染的批量异步化处理让动画难以控制，此时可以用如下代码来强制同步。
$.fn.repaint = function () {
this.each(function (item) {
return item.clientHeight;
});
}
CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，CSS3的动画是利用C语言编写的，它是系统层面的动画
CSS3动画与javascript模拟动画有以下区别：
- CSS 3D动画在js中无法实现
CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画
- CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画
CSS3的2D动画是指是2D矩阵Transform变化，js当然是不能做变形动画的。就拿坐标动画来说，使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。
- CSS3其它常规动画属性的效率均低于js模拟的动画
常规动画属性在这里是指：height，width,opacity,border-width,color
每在页面执行一次动画时，都应该带有至少两个事件animationStart和animationEnd有的可能还需要 animationDuration，在手机上我们不推荐animationDuration，本来效率就已经非常低了，尽量不要在动画执行期间还做其它的事件。用js模拟动画，需要开发者编写这些动画事件的接口，以便更好的做下一步的工作，而CSS3动画不需要开发者编写这些事件接口，浏览器本身就已经提供了， 拿webkit内核的浏览器举例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd 事件接口，开发者可以很方便的使用这些事件。
6.构造函数类和原型定义的属性和方法的区别
1.把方法写在原型中比写在构造函数中消耗的内存更小，因为在内存中一个类的原型只有一个，写在原型中的行为可以被所有实例共享，实例化的时候并不会在实例的内存中再复制一份
而写在类中的方法，实例化的时候会在每个实例中再复制一份，所以消耗的内存更高
所以没有特殊原因，一般把属性写到类中，而行为写到原型中
2.构造函数中定义的属性和方法要比原型中定义的属性和方法的优先级高，如果定义了同名称的属性和方法，构造函数中的将会覆盖原型中的
7.CSS实现水平垂直居中的10种方式
仅确定居中元素宽高适用
1.absolute + 负margin
2.absolute + margin auto
3.absolute + calc不确定居中元素宽高也可使用
4.absolute + transform
5.lineheight
6.writing-mode
7.table
8.css-table
9.flex
10.grid
.father {
position: relative;
}
/* absolute + 负margin */
.child-1 {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -(子元素一半宽)px;
margin-top: -(子元素一半高)px;
}
/* absolute + margin auto */
.child-2 {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* absolute + calc */
.child-3 {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
.father {
position: relative;
}
/* absolute + transform */
.child-4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* lineheight */
.father-5 {
line-height: (父元素高度)px;
text-align: center;
font-size: 0px;
}
.child-5 {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
/* writing-mode */
<div class="father-6">
<div class="wrap">
<div class="child-6">1234123</div>
</div>
</div>
.father-6 {
writing-mode: vertical-lr;
text-align: center;
}
.wrap {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.child-6 {
display: inline-block;
margin: auto;
text-align: left;
}
/* table */
tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了。
这种方法就是代码太冗余，而且也不是table的正确用法。
/* css-table */
//css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
.father-8 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child-8 {
display: inline-block;
}
/* flex */
.father-9 {
display: flex;
justify-content: center;
align-items: center;
}
/* grid */
//兼容性不如flex
.father-10 {
display: grid;
}
.child-10 {
align-self: center;
justify-self: center;
}
8.什么是CDN缓存
- CDN 是一种部署策略，根据不同的地区部署类似nginx 这种服务服务，会缓存静态资源。前端在项目优化的时候，习惯在静态资源上加上一个 hash 值，每次更新的时候去改变这个 hash，hash 值变化的时候，服务会去重新取资源
- (CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件
