摘要：元素的位置通過以及屬性進行規定。表明請求被正常處理了。服務器返回的響應報文包括協議版本狀態碼解釋狀態碼的原因短語響應首部字段實體主體。瀏覽器接受響應，檢查里的狀態碼，并做出不同的處理方式。關于返回的狀態碼的具體說明看上個問題。

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

標簽上title和alt屬性的區別是什么？

alt是html標簽的屬性，而title既是html標簽，又是html屬性。

title作為屬性時，用來為元素提供額外說明信息。例如，給超鏈接標簽a添加了title屬性，把鼠標移動到該鏈接上面，就會顯示title的內容，以達到補充說明或者提示的效果。

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

使用alt屬性還具有搜索引擎優化效果，因為搜素引擎是無法直接讀取圖像的信息的，alt可以為其提供文字信息所以對搜索引擎比較友好。

relative、absolute、static、fixed的作用，相對誰定位？

static（靜態定位）：occurs where it normally would in the document.
默認值。元素使用正常的布局行為，相對于document，即元素在文檔流中當前的布局位置。此時top,bottom, left, right 或者 z-index無效。

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

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

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

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

畫出css盒模型

W3C標準盒模型：width = contentWidth+padding+border+margin。
盒子在頁面占據的大小包括了margin，border，padding以及content。而盒子的實際大小包括border，padding以及內容區域content，但是不包括margin。另一點需要說明的是，我們通過JavaScript代碼獲取某一個元素的大小時，所得到的width和height其實是盒子模型中的content的大小。

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

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

這個box-sizing屬性，我們都有哪些使用場景呢？

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

統一風格的表單元素：表單中有一些input元素其實還是展現的是傳統IE盒模型，帶有一些默認的樣式，而且在不同平臺或者瀏覽器下的表現不一，造成了表單展現的差異。此時我們可以通過box-sizing屬性來構建一個風格統一的表單元素。

css清除浮動的方法

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

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

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

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

在父容器結束標簽前加一個空標簽，并設置clear:both。但如果有很多元素都包含浮動元素，就麻煩，語義化也不好。

談談你是怎么適配移動端各種尺寸手機的，以設計稿寬度為375px為例?

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

內容
 //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()

寫一個數組去重的方法

/** 方法一：
 * 1.構建一個新的數組存放結果
 * 2.for循環中每次從原數組中取出一個元素，用這個元素循環與結果數組對比
 * 3.若結果數組中沒有該元素，則存到結果數組中
 * 缺陷：不能去重數組中得引用類型的值和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]

寫一個方法，將URL中的查詢字符串解析成一個字典對象

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中的參數的值
function UrlSearch(url) {
  var name,value;
  var str = url; //取得整個地址欄
  var num = str.indexOf("?");
  str = str.substr(num+1); //取得所有參數   stringvar.substr(start [, length ]

  var arr=str.split("&"); //各個參數放到數組里
  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;
    }
  }
}

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

//功能：修改url參數值
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請求的時候get和post的區別

談談cookie，sessionStorage, localStorage的區別和優缺點

你知道的性能優化的方法

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

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

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

2.將URL與緩存進行比對如果請求的頁面在緩存中且未過期，則直接進行第8步。

3.負責域名解析DNS服務。系統進行DNS查找，并將IP地址返回給瀏覽器。
DNS服務適合HTTP協議一樣位于應用層的協議。它提供域名到IP地址之間的解析服務。可以通過域名查找IP地址，也可以逆向從IP地址反查找域名。

4.瀏覽器與服務器建立TCP連接（在傳輸層）
這一步很復雜因為用到了HTTPS。三次握手(SYN,SYN/ACK,ACK)，若有一次任何一方收不到信息那么將會重新發起 TCP 連接。

5.瀏覽器向服務器通過TCP協議連接發送HTTP請求。
數據經過應用層、傳輸層、網絡層、鏈路層，傳輸到下一個目的地。應用層決定了向用戶提供應用服務時的通信（http協議，DNS服務）。傳輸層對上層應用層，提供處于網絡連接中的兩臺計算機之間的數據傳輸（TCP協議和UDP協議）。網絡層用來處理網絡上流動的數據包，數據包是網絡傳輸的最小數據單位，該層規定通過怎樣的路徑到達對方計算機，并把數據傳輸給對方。鏈路層處理連接網絡的硬件部分（網卡，光纖）。這一步驟還會涉及發送給服務器的請求報文（請求方法、請求URI、協議版本、首部字段、內容實體）。

6.服務器收到請求，從它的文檔空間中查找資源并返回HTTP響應。
服務器返回的響應報文包括協議版本、狀態碼、解釋狀態碼的原因短語、響應首部字段、實體主體。

7.瀏覽器接受 HTTP 響應，檢查 HTTP header 里的狀態碼，并做出不同的處理方式。關于返回的狀態碼的具體說明看上個問題。

8.如果是可以緩存的，這個響應則會被存儲起來。
根據首部字段判斷是否進行緩存。例如，Cache-Control, no-cache(每次使用緩存前和服務器確認)，no-store 絕對禁止緩存。

9.瀏覽器解碼響應
瀏覽器拿到index.html文件后，就開始解析其中的html代碼，遇js/css/image等靜態資源時，就向服務器端去請求下載；解析成對應的樹形數據結構DOM樹、CSS規則樹，Javascript腳本通過DOM API和CSSOM API來操作DOM樹、CSS規則樹。

10.渲染頁面

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

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

jsonp原理

react生命周期

組件間的通信

寫一個大整數乘法計算的方法
假如一個數很大很大，計算的時候會導致精度丟失的問題。網上有各種解法，大家可以自行google。這里我給出的思路是把整數轉換成字符串類型的數據，再把轉換后的數據拆分成單個數據，分別計算單個數據相乘，最后相加并把結果轉換回number類型。不知可不可行。。。

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

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