用血與淚換來的面試經

今天面試被血虐，故好好總結一番，希望明天可以不用丟臉。
先說第一家面試問題比較水，態度也不好，但我也不會：
主要問了一些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[i].onclick = (function(i){
   return function(){alert(i);}
   })(i);
   }
   下面說提問到的問題：

3. css層疊上下文：z軸上展現的位置順序，background最後，block

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跨域請求。