摘要：元素的位置通過以及屬性進(jìn)行規(guī)定。表明請(qǐng)求被正常處理了。服務(wù)器返回的響應(yīng)報(bào)文包括協(xié)議版本狀態(tài)碼解釋狀態(tài)碼的原因短語響應(yīng)首部字段實(shí)體主體。瀏覽器接受響應(yīng)，檢查里的狀態(tài)碼，并做出不同的處理方式。關(guān)于返回的狀態(tài)碼的具體說明看上個(gè)問題。

說明：簡(jiǎn)答題沒有固定答案，以下給出的答案是從別處摘錄或自己總結(jié)，有錯(cuò)之處歡迎指出。

標(biāo)簽上title和alt屬性的區(qū)別是什么？

alt是html標(biāo)簽的屬性，而title既是html標(biāo)簽，又是html屬性。

title作為屬性時(shí)，用來為元素提供額外說明信息。例如，給超鏈接標(biāo)簽a添加了title屬性，把鼠標(biāo)移動(dòng)到該鏈接上面，就會(huì)顯示title的內(nèi)容，以達(dá)到補(bǔ)充說明或者提示的效果。

alt屬性則是用來指定替換文字，只能用在img、area和input元素中，用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息。注意，alt是替代圖像作用而不是提供額外說明文字的。

使用alt屬性還具有搜索引擎優(yōu)化效果，因?yàn)樗阉匾媸菬o法直接讀取圖像的信息的，alt可以為其提供文字信息所以對(duì)搜索引擎比較友好。

relative、absolute、static、fixed的作用，相對(duì)誰定位？

static（靜態(tài)定位）：occurs where it normally would in the document.
默認(rèn)值。元素使用正常的布局行為，相對(duì)于document，即元素在文檔流中當(dāng)前的布局位置。此時(shí)top,bottom, left, right 或者 z-index無效。

relative（相對(duì)定位）：you can use top,bottom... to move the element relative to where it would normally occur in the document.
生成相對(duì)定位的元素，相對(duì)于本該在文檔中的位置。通過top,bottom,left,right的設(shè)置相對(duì)于其正常（原先本身）位置進(jìn)行定位。可通過z-index進(jìn)行層次分級(jí)。

absolute (絕對(duì)定位）：the element will removed from the document and placed exactly where you tell it to go.
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級(jí)。絕對(duì)定位可以設(shè)置margin，且不會(huì)與其他元素合并。

fixed（固定定位）：生成絕對(duì)定位的元素，相對(duì)于屏幕飾扣進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級(jí)。打印時(shí)，元素會(huì)出現(xiàn)在每頁的固定位置。

sticky（粘性定位）：是相對(duì)定位和固定定位結(jié)合，在跨越閾值之前相對(duì)定位，之后固定定位。

畫出css盒模型

W3C標(biāo)準(zhǔn)盒模型：width = contentWidth+padding+border+margin。
盒子在頁面占據(jù)的大小包括了margin，border，padding以及content。而盒子的實(shí)際大小包括border，padding以及內(nèi)容區(qū)域content，但是不包括margin。另一點(diǎn)需要說明的是，我們通過JavaScript代碼獲取某一個(gè)元素的大小時(shí)，所得到的width和height其實(shí)是盒子模型中的content的大小。

IE盒模型：width = contentWidth(包含border+padding)+margin。
IE盒模型也包含margin，border，padding以及content這幾部分。IE盒模型的content部分包含了border和padding。

border-box和content-box的區(qū)別和使用場(chǎng)景？
為了更能形像看出box-sizing中content-box和border-box兩者的區(qū)別，我們來個(gè)示例圖，如下所示，

這個(gè)box-sizing屬性，我們都有哪些使用場(chǎng)景呢？

特殊場(chǎng)景的布局：假設(shè)我們有這樣的一個(gè)場(chǎng)景，設(shè)置子類元素的margin或者border時(shí)，可能會(huì)撐破父層元素的尺寸，這時(shí)我就需要使用box-sizing: border-box來將border包含進(jìn)元素的尺寸中，這樣就不會(huì)存在撐破父層元素的情況了。

統(tǒng)一風(fēng)格的表單元素：表單中有一些input元素其實(shí)還是展現(xiàn)的是傳統(tǒng)IE盒模型，帶有一些默認(rèn)的樣式，而且在不同平臺(tái)或者瀏覽器下的表現(xiàn)不一，造成了表單展現(xiàn)的差異。此時(shí)我們可以通過box-sizing屬性來構(gòu)建一個(gè)風(fēng)格統(tǒng)一的表單元素。

css清除浮動(dòng)的方法

設(shè)置好一個(gè)類用來clearfix，再把該類名加至父元素上：

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {clear: both;}
.clearfix: {zoom: 1}

clearfix技巧是基于在父元素上使用":before"和":after"兩個(gè)偽類。我們可以在浮動(dòng)元素的父容器前面和后面創(chuàng)建隱藏元素，":before"用來防止元素頂部的外邊距塌陷，用display:table來創(chuàng)建一個(gè)匿名的table-cell元素，也確保IE6/7下一致":after"用來防止子元素底部的外邊距塌陷，以及用來清除浮動(dòng)元素。缺點(diǎn)是代碼多一點(diǎn)，但還好，用的人也多，兼容性也好。

overflow方法：在父元素上設(shè)置overflow: hidde/auto。使用auto在IE中有一個(gè)滾動(dòng)條，最好還是用hidden。缺點(diǎn)：如果有元素需要移動(dòng)到父容器外面，就回隱藏，或者給子元素在沒有padding下做個(gè)陰影，也會(huì)被父元素切斷

在父容器結(jié)束標(biāo)簽前加一個(gè)空標(biāo)簽，并設(shè)置clear:both。但如果有很多元素都包含浮動(dòng)元素，就麻煩，語義化也不好。

談?wù)勀闶窃趺催m配移動(dòng)端各種尺寸手機(jī)的，以設(shè)計(jì)稿寬度為375px為例?

根據(jù)如下代碼，判斷p元素中文字的顏色?

內(nèi)容
 //red

代碼題

function fun(n, o) {
  console.log(o);
  return {
    fun: function(m) {
      return fun(m, n)
    }
  }
}

var a = fun(1).fun(2).fun(4).fun(8) //undefined,1,2,4

var User = {
  count: 1,
  getCount: function() {
    return this.count
  }
}

var fn = User.getCount
console.log(fn()); //undefined

function test() {
  for(var i=0; i<5; i++) {
    setTimeout(function() {
      console.log(i)
    }, 0)
  }
}
test(); //5,5,5,5,5

var o = {
  fn: function() {
    console.log(fn)
  }
}

console.log(o.fn()); //ReferenceError  

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name)
}

function Cat(name) {
  Animal.call(this, name)
}

var kat = new Cat("Jim")

kat.sayName(); 
//TypeError: kat.sayName is not a function
//除非加上 Cat.prototype = new Animal()

寫一個(gè)數(shù)組去重的方法

/** 方法一：
 * 1.構(gòu)建一個(gè)新的數(shù)組存放結(jié)果
 * 2.for循環(huán)中每次從原數(shù)組中取出一個(gè)元素，用這個(gè)元素循環(huán)與結(jié)果數(shù)組對(duì)比
 * 3.若結(jié)果數(shù)組中沒有該元素，則存到結(jié)果數(shù)組中
 * 缺陷：不能去重?cái)?shù)組中得引用類型的值和NaN
*/
function unique(array){
  var result = [];
  for(var i = 0;i < array.length; i++){
    if(result.indexOf(array[i]) == -1) {
      result.push(array[i]);
    }
  }
  return result;
}

// [1,2,1,2,"1","2",0,"1","你好","1","你好",NaN,NaN] => [1, 2, "1", "2", 0, "你好",NaN,NaN]
// [{id: "1"}, {id: "1"}] => [{id: "1"}, {id: "1"}]

//方法二：ES6
Array.from(new Set(array))

// [1,2,1,2,"1","2",0,"1","你好","1","你好",NaN,NaN] => [1, 2, "1", "2", 0, "你好", NaN]

寫一個(gè)方法，將URL中的查詢字符串解析成一個(gè)字典對(duì)象

var path = "www.u.com/home?id=2&type=0&dtype=-1";

function parseUrl(url) {
  var result = [];
  var tmp = (url.split("?"))[1];
  var tmpArr = tmp.split("&");
  tmpArr.map(function(v, k) {
    var value, key;
    var obj = {};
    key = (v.split("="))[0];
    value = (v.split("="))[1];
    obj[key] = value;
    result.push(obj)
  })
  
  return result;
}

console.log(parseUrl(path)); //[{id: "2"},{type: "0"},{dtype: "-1"}]

//功能：獲取url中的參數(shù)的值
function UrlSearch(url) {
  var name,value;
  var str = url; //取得整個(gè)地址欄
  var num = str.indexOf("?");
  str = str.substr(num+1); //取得所有參數(shù)   stringvar.substr(start [, length ]

  var arr=str.split("&"); //各個(gè)參數(shù)放到數(shù)組里
  for(var i=0;i < arr.length;i++){
    num = arr[i].indexOf("=");
    if(num>0){
      name=arr[i].substring(0,num);
      value=arr[i].substr(num+1);
      this[name]=value;
    }
  }
}

// 測(cè)試
var path = "www.u.com/home?id=2&type=0&dtype=-1";
var Request= new UrlSearch(path); //實(shí)例化
console.log(Request); //[{dtype: "-1"},{id: "2"},{type: "0"}]
var nickname = encodeURIComponent(Request.dtype);
console.log(nickname); //-1

//功能：修改url參數(shù)值
function changeURLArg(url,arg,arg_val){
  var pattern=arg+"=([^&]*)";
  var replaceText=arg+"="+arg_val;
  if(url.match(pattern)){
    var tmp="/("+ arg+"=)([^&]*)/gi";
    tmp=url.replace(eval(tmp),replaceText);
    return tmp;
  }else{
    if(url.match("[?]")){
      return url+"&"+replaceText;
    }else{
      return url+"?"+replaceText;
    }
  }
  return url+"
"+arg+"
"+arg_val;
}

var path = "www.u.com/home?id=2&type=0&dtype=-1";
console.log(changeURLArg(path,"type",4)); //"www.u.com/home?id=2&type=4&dtype=4"

Ajax請(qǐng)求的時(shí)候get和post的區(qū)別

談?wù)刢ookie，sessionStorage, localStorage的區(qū)別和優(yōu)缺點(diǎn)

你知道的性能優(yōu)化的方法

http狀態(tài)碼有哪些？分別表示什么意思？
狀態(tài)碼告知從服務(wù)器返回的請(qǐng)求結(jié)果。
2XX表明請(qǐng)求被正常處理了。200OK、204No Content（服務(wù)器接收的請(qǐng)求已經(jīng)處理成功，但在返回的響應(yīng)報(bào)文中不包含實(shí)體的主體部分）、206Partial Content(客戶端進(jìn)行了范圍請(qǐng)求，對(duì)資源的某一部分請(qǐng)求)；3XX重定向，301moved permanently(資源已分配新的uri)、302 found(本次使用新uri訪問)、303 see other(以get定向到另一個(gè)uri)、304 not modified、307 temporary redirect(不會(huì)從post改為get)；4XX客戶端錯(cuò)誤，400 bad request（請(qǐng)求報(bào)文中存在語法錯(cuò)誤），402 unauthorized（發(fā)送的請(qǐng)求需要通過http認(rèn)證）、403 forbidden（服務(wù)器拒絕了對(duì)資源的訪問）、404 not found（服務(wù)器上沒有請(qǐng)求的資源）；500XX服務(wù)器錯(cuò)誤 500internal server error（服務(wù)器在執(zhí)行是發(fā)生了錯(cuò)誤）、503 service unavailable（服務(wù)器正忙或停機(jī)維護(hù)）。

一個(gè)頁面從輸入 URL 到頁面加載完的過程中都發(fā)生了什么事情？
總的來說，根據(jù)web瀏覽器地址欄中指定的URL，web瀏覽器從web服務(wù)器端獲取資源文件等信息，從而顯示出web頁面。具體而言，有如下幾個(gè)步驟：

1.瀏覽器接收URL(包含的信息：協(xié)議方案名、服務(wù)器地址:服務(wù)器端口號(hào)、帶層次的文件路徑、查詢字符串？、片段標(biāo)識(shí)符)

2.將URL與緩存進(jìn)行比對(duì)如果請(qǐng)求的頁面在緩存中且未過期，則直接進(jìn)行第8步。

3.負(fù)責(zé)域名解析DNS服務(wù)。系統(tǒng)進(jìn)行DNS查找，并將IP地址返回給瀏覽器。
DNS服務(wù)適合HTTP協(xié)議一樣位于應(yīng)用層的協(xié)議。它提供域名到IP地址之間的解析服務(wù)?？梢酝ㄟ^域名查找IP地址，也可以逆向從IP地址反查找域名。

4.瀏覽器與服務(wù)器建立TCP連接（在傳輸層）
這一步很復(fù)雜因?yàn)橛玫搅薍TTPS。三次握手(SYN,SYN/ACK,ACK)，若有一次任何一方收不到信息那么將會(huì)重新發(fā)起 TCP 連接。

5.瀏覽器向服務(wù)器通過TCP協(xié)議連接發(fā)送HTTP請(qǐng)求。
數(shù)據(jù)經(jīng)過應(yīng)用層、傳輸層、網(wǎng)絡(luò)層、鏈路層，傳輸?shù)较乱粋€(gè)目的地。應(yīng)用層決定了向用戶提供應(yīng)用服務(wù)時(shí)的通信（http協(xié)議，DNS服務(wù)）。傳輸層對(duì)上層應(yīng)用層，提供處于網(wǎng)絡(luò)連接中的兩臺(tái)計(jì)算機(jī)之間的數(shù)據(jù)傳輸（TCP協(xié)議和UDP協(xié)議）。網(wǎng)絡(luò)層用來處理網(wǎng)絡(luò)上流動(dòng)的數(shù)據(jù)包，數(shù)據(jù)包是網(wǎng)絡(luò)傳輸?shù)淖钚?shù)據(jù)單位，該層規(guī)定通過怎樣的路徑到達(dá)對(duì)方計(jì)算機(jī)，并把數(shù)據(jù)傳輸給對(duì)方。鏈路層處理連接網(wǎng)絡(luò)的硬件部分（網(wǎng)卡，光纖）。這一步驟還會(huì)涉及發(fā)送給服務(wù)器的請(qǐng)求報(bào)文（請(qǐng)求方法、請(qǐng)求URI、協(xié)議版本、首部字段、內(nèi)容實(shí)體）。

6.服務(wù)器收到請(qǐng)求，從它的文檔空間中查找資源并返回HTTP響應(yīng)。
服務(wù)器返回的響應(yīng)報(bào)文包括協(xié)議版本、狀態(tài)碼、解釋狀態(tài)碼的原因短語、響應(yīng)首部字段、實(shí)體主體。

7.瀏覽器接受 HTTP 響應(yīng)，檢查 HTTP header 里的狀態(tài)碼，并做出不同的處理方式。關(guān)于返回的狀態(tài)碼的具體說明看上個(gè)問題。

8.如果是可以緩存的，這個(gè)響應(yīng)則會(huì)被存儲(chǔ)起來。
根據(jù)首部字段判斷是否進(jìn)行緩存。例如，Cache-Control, no-cache(每次使用緩存前和服務(wù)器確認(rèn))，no-store 絕對(duì)禁止緩存。

9.瀏覽器解碼響應(yīng)
瀏覽器拿到index.html文件后，就開始解析其中的html代碼，遇js/css/image等靜態(tài)資源時(shí)，就向服務(wù)器端去請(qǐng)求下載；解析成對(duì)應(yīng)的樹形數(shù)據(jù)結(jié)構(gòu)DOM樹、CSS規(guī)則樹，Javascript腳本通過DOM API和CSSOM API來操作DOM樹、CSS規(guī)則樹。

10.渲染頁面

11.關(guān)閉TCP連接或繼續(xù)保持連接
通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)。

頁面渲染的過程
頁面渲染過程總的來說是，瀏覽器拿到html文檔，自上而下構(gòu)建dom樹，再根據(jù)dom樹構(gòu)建渲染樹（和dom樹有區(qū)別，瀏覽器解析html文檔和解析css樣式形成dom樹和cssdom樹，結(jié)合這兩種才會(huì)構(gòu)建渲染樹）。這里有一種情況，如果在head中寫入link某個(gè)css文件，而后插入script標(biāo)簽，引入一個(gè)巨大的js文件，由于瀏覽器下載css文件需耗時(shí)間，這個(gè)時(shí)候?yàn)g覽器還在自上而下地去解析dom樹，但是遇到script標(biāo)簽，并且由于樣式表沒有下載下來，阻塞了構(gòu)建渲染樹。一旦css文件加載完成，會(huì)結(jié)合剛在的dom樹構(gòu)建渲染樹，顯示到頁面，接續(xù)加載js文件。但是恰巧js文件巨大，阻塞了瀏覽器向下解析，等待這個(gè)巨大的js文件下載完成后才繼續(xù)向下解析。如此反復(fù)， 最后將渲染樹渲染到頁面。

jsonp原理

react生命周期

組件間的通信

寫一個(gè)大整數(shù)乘法計(jì)算的方法
假如一個(gè)數(shù)很大很大，計(jì)算的時(shí)候會(huì)導(dǎo)致精度丟失的問題。網(wǎng)上有各種解法，大家可以自行g(shù)oogle。這里我給出的思路是把整數(shù)轉(zhuǎn)換成字符串類型的數(shù)據(jù)，再把轉(zhuǎn)換后的數(shù)據(jù)拆分成單個(gè)數(shù)據(jù)，分別計(jì)算單個(gè)數(shù)據(jù)相乘，最后相加并把結(jié)果轉(zhuǎn)換回number類型。不知可不可行。。。

寫出一種排序算法
之前整理過一篇blog，適合算法小白入門——幾種基本排序算法

輸入url到頁面展示參考：http://www.jianshu.com/p/71cf...