用血与泪换来的面试经-原创手记-慕课网

今天面试被血虐，故好好总结一番，希望明天可以不用丢脸。
先说第一家面试问题比较水，态度也不好，但我也不会：
主要问了一些http和ajax的问题。
http请求过程：

建立连接，tcp的三次握手，通过网址进行DNS解析，找到网址对应的IP地址，没有端口号的url使用默认端口号（一般是80）
客户端想服务端发送请求，包括请求头
服务端向客户端发送响应，包括请求头的响应
常用的HTTP头信息有：
　　① HTTP 1.0 200 OK 　这是Web服务器应答的第一行，列出服务器正在运行的HTTP版本号和应答代码。代码"200 OK"表示请求完成。
　　② MIME_Version:1.0　它指示MIME类型的版本。
　　③ content_type:类型　这个头信息非常重要，它指示HTTP体信息的MIME类型。如：content_type:text/html指示传送的数据是HTML文档。
　　④ content_length:长度值　它指示HTTP体信息的长度（字节）。
关闭连接
JS实现缓存：
第一次请求的时候把一些数据存在JS对象中，这样可以减少对服务器的访问。
Var data = { data : [a,b,c,d]}//需要请求的数据放在json里
Var cache;//缓存对象
$.ajax({//向后台请求数据
Type:”post”,
dataType:”json”,
data:data,
url:main/main.act,
success:function(result){
cache = result.json;
}
})
这样所需要的数据从cache中取，即可减少对服务器的访问。
Ajax
关于ajax，今天两家都说道了。我好好总结一下ajax整个请求过程。
JS原生
Var xhr = new XMLHttpRquest();
Xhr.open(‘post’,url,async)
Xhr.send(null);
Xhr.onreadystatechange=function(){
If(xhr.readystate == 4 && xhr.status == 200 || xhr.status == 304){
document.getElementById("myDiv").innerHTML= xmlhttp.responceText;
}
}
Readystate状态码：
0是请求未初始化，1是服务器已建立连接，2是请求已接受，3是请求处理中，4是请求已完成，并响应数据。
Status服务器状态码：
200OK，304请求数据没有发生变化，404url错误，500服务器错误。
JQ：
$.ajax({
Type : “post/get”,
url : “main/main.act”,
data : {
a : a,
b:b,
c:c
}
DataType:”json”,//预期返回值类型
Cache:false//默认是false，get方式请求有效，true为请求第一次的数据
Success:function(result){
document.getElementById("myDiv").innerHTML= result;
}
Error:function(){
Alert(“网络异常！”);
}
beforeSend:function(){//请求得到之前
}
})
Ajax get和post的区别，
Get方式若url地址不变，请求第一次返回的数据；会被缓存，且数据小，字符有要求。
Ajax跨域请求
Jsonp:”callbackParam”,
jsonpCallBack:” jsonpCallBack1”
意思就是在url+? callbackParam= jsonpCallBack1;,只支持get方式
Enchar的使用
变量提升，这个我竟然懵住了
变量先参与运算后声明，这种情况声明会被提前，叫做变量提升

再说第二家面试，面试完我感觉都要死了。
首先做一套面试题，第一题我就错了，
1.”5”+4 = ?
正确答案是”54”，我竟然迷之自信的答了个9.疯了丢死人了。
2.怎么判断是chrome浏览器，机智的背了一遍，之后面试又让我重写了一下。
Var agent = Window.navigator.userAgent;
agent.indexOf(“Chrome”)!=-1;
拓展：判断IE8
agent.indexOf(“compatible”)!=-1&& agent.indexOf(“MSIE”)!=-1;
3.cookie,sessionStorage,localStorage的区别。
主要区别是cookie缓存比较小不能大于4K，后两者由于储存在客户端，所以缓存比较大但不能大于5M。sessionStorage是当前对话的缓存，浏览器窗口关闭即消失，localStorage持久存在，除非清除浏览器缓存。

js如何实现继承
这里用call()和apply();
Function a(){
Var u = this.u;
}
Functionb(){
a.call(this,u);
}
Call()和apply()的区别在于apply第二个参数是数组。
还有一种能看懂的：
Function parent(){
This.property = true;
}
Function child(){};
Child.property = new parent();
利用原型链进行继承。
闭包
为什么要用闭包，这个我答的不好。
回来查了一下，能看懂的是循环绑定。
var a = document.getElementsByTagName("a");
for(var i =0; i<a.length; i++){
a[i].onclick = (function(i){
return function(){alert(i);}
})(i);
}
下面说提问到的问题：
css层叠上下文：z轴上展现的位置顺序，background最后，block<float<inline<+z-index
margin影响父级元素。
垂直方向，嵌套或者毗邻的盒元素会发生外边距重叠的现象。
解决方法：在父级元素div添加一个padding-top:1px;或者overflow:hidden;
Css就是前两个了，我都不会也就没机会再被问下去，JS部分更惨，ajax写的很丢脸。
两个数组合并
a. concat(b);
之后问了一些前后端分离的理解，H5的理解，用过哪些打包工具，前端MVC，敏捷开发，vue,react之类的。
前后端分离：后台给前台一个API（JSON），前后台的开发互不影响。
前端MVC：把视图和数据分离开。
敏捷开发：以人为核心，少写文档，快速迭代，大项目分为多个小项目。更适应市场环境。
H5新特性：语义话标签，video,audio标签，离线缓存，canvas画布，xmlhttprequest2跨域请求。