手记

用血与泪换来的面试经

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

  1. 建立连接,tcp的三次握手,通过网址进行DNS解析,找到网址对应的IP地址,没有端口号的url使用默认端口号(一般是80)
  2. 客户端想服务端发送请求,包括请求头
  3. 服务端向客户端发送响应,包括请求头的响应
    常用的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体信息的长度(字节)。
  4. 关闭连接
    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持久存在,除非清除浏览器缓存。

  1. 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();
    利用原型链进行继承。
  2. 闭包
    为什么要用闭包,这个我答的不好。
    回来查了一下,能看懂的是循环绑定。
    var a = document.getElementsByTagName("a");
    for(var i =0; i<a.length; i++){
    a[i].onclick = (function(i){
    return function(){alert(i);}
    })(i);
    }
    下面说提问到的问题:
  3. css层叠上下文:z轴上展现的位置顺序,background最后,block<float<inline<+z-index

  4. margin影响父级元素。
    垂直方向,嵌套或者毗邻的盒元素会发生外边距重叠的现象。
    解决方法:在父级元素div添加一个padding-top:1px;或者overflow:hidden;
    Css就是前两个了,我都不会也就没机会再被问下去,JS部分更惨,ajax写的很丢脸。
  5. 两个数组合并
    a. concat(b);
    之后问了一些前后端分离的理解,H5的理解,用过哪些打包工具,前端MVC,敏捷开发,vue,react之类的。
    前后端分离:后台给前台一个API(JSON),前后台的开发互不影响。
    前端MVC:把视图和数据分离开。
    敏捷开发:以人为核心,少写文档,快速迭代,大项目分为多个小项目。更适应市场环境。
    H5新特性:语义话标签,video,audio标签,离线缓存,canvas画布,xmlhttprequest2跨域请求。
12人推荐
随时随地看视频
慕课网APP