作為web前端面試官準備的一面題目 （轉(zhuǎn)）

一、HTTP：

1. POST、GET區(qū)別

HTTP POST GET 本質(zhì)區(qū)別詳解
一 原理區(qū)別
根據(jù)HTTP規(guī)范，GET用于信息獲取，而且應該是安全的和冪等的 。

  1. 所謂安全的意味著該操作用于獲取信息而非修改信息。換句話說，GET請求一般不應產(chǎn)生副作用。就是說，它僅僅是獲取資源信息，就像數(shù)據(jù)庫查詢一樣，不會修改，增加數(shù)據(jù)，不會影響資源的狀態(tài)。

注意：這里安全的含義僅僅是指是非修改信息。

  1. 冪等的意味著對同一URL的多個請求應該返回同樣的結(jié)果。
    根據(jù)HTTP規(guī)范，POST表示可能修改變服務器上的資源的請求 。繼續(xù)引用上面的例子：還是新聞以網(wǎng)站為例，讀者對新聞發(fā)表自己的評論應該通過POST實現(xiàn)，因為在評論提交后站點的資源已經(jīng)不同了，或者說資源被修改了。

二 表現(xiàn)形式區(qū)別

  • （1）GET提交，請求的數(shù)據(jù)會附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，多個參數(shù)用&連接；例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送，如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII。
    POST提交：把提交的數(shù)據(jù)放置在是HTTP包的包體中。上文示例中紅色字體標明的就是實際的傳輸數(shù)據(jù)
    因此，GET提交的數(shù)據(jù)會在地址欄中顯示出來，而POST提交，地址欄不會改變
  • (2)傳輸數(shù)據(jù)的大?。菏紫嚷暶鳎篐TTP協(xié)議沒有對傳輸?shù)臄?shù)據(jù)大小進行限制，HTTP協(xié)議規(guī)范也沒有對URL長度進行限制。
    而在實際開發(fā)中存在的限制主要有：
    GET:特定瀏覽器和服務器對URL長度有限制，例如IE對URL長度的限制是2083字節(jié)(2K+35)。對于其他瀏覽器，如Netscape、FireFox等，理論上沒有長度限制，其限制取決于操作系統(tǒng)的支持。
    因此對于GET提交時，傳輸數(shù)據(jù)就會受到URL長度的限制。
    POST:由于不是通過URL傳值，理論上數(shù)據(jù)不受限。但實際各個WEB服務器會規(guī)定對post提交數(shù)據(jù)大小進行限制，Apache、IIS6都有各自的配置。
  • (3)安全性：
    .POST的安全性要比GET的安全性高。注意：這里所說的安全性和上面GET提到的“安全”不是同個概念。上面“安全”的含義僅僅是不作數(shù)據(jù)修改，而這 里安全的含義是真正的Security的含義，比如：通過GET提交數(shù)據(jù)，用戶名和密碼將明文出現(xiàn)在URL上，因為(1)登錄頁面有可能被瀏覽器緩存， (2)其他人查看瀏覽器的歷史紀錄，那么別人就可以拿到你的賬號和密碼了，除此之外，使用GET提交數(shù)據(jù)還可能會造成Cross-site request forgery攻擊
  • (4)Http get,post,soap協(xié)議都是在http上運行的

1）get：請求參數(shù)是作為一個key/value對的序列（查詢字符串）附加到URL上的

查詢字符串的長度受到web瀏覽器和web服務器的限制（如IE最多支持2048個字符），不適合傳輸大型數(shù)據(jù)集同時，它很不安全

2）post：請求參數(shù)是在http標題的一個不同部分（名為entity body）傳輸?shù)?，這一部分用來傳輸表單信息，因此必須將Content-type設置為:application/x-www-form-urlencoded。post設計用來支持web窗體上的用戶字段，其參數(shù)也是作為key/value對傳輸。
但是：它不支持復雜數(shù)據(jù)類型，因為post沒有定義傳輸數(shù)據(jù)結(jié)構的語義和規(guī)則。

3）soap：是http post的一個專用版本，遵循一種特殊的xml消息格式
Content-type設置為: text/xml 任何數(shù)據(jù)都可以xml化

2. 不同的操作系統(tǒng)、不同的瀏覽器、不同的網(wǎng)頁字符集，將導致完全不同的編碼結(jié)果。有沒有辦法，能夠保證客戶端只用一種編碼方法向服務器發(fā)出請求？

關于URL編碼：

  • 網(wǎng)址路徑（/漢字）的編碼，用的是utf-8編碼。
  • 查詢字符串的編碼，用的是操作系統(tǒng)的默認編碼。
  • 在已打開的網(wǎng)頁上，直接用Get或Post方法發(fā)出HTTP請求。這時的編碼方法由網(wǎng)頁的編碼決定，也就是由HTML源碼中字符集的設定決定。
    <meta http-equiv="Content-Type" content="text/html;charset=xxxx">
    GET和POST方法的編碼，用的是網(wǎng)頁的編碼。
  • 在Ajax調(diào)用中，IE總是采用GB2312編碼（操作系統(tǒng)的默認編碼），而Firefox總是采用utf-8編碼。這就是我們的結(jié)論4。

Javascript語言用于編碼的函數(shù)，一共有三個，最古老的一個就是escape()。雖然這個函數(shù)現(xiàn)在已經(jīng)不提倡使用了，但是由于歷史原因，很多地方還在使用它，所以有必要先從它講起。

首先，無論網(wǎng)頁的原始編碼是什么，一旦被Javascript編碼，就都變?yōu)閡nicode字符。也就是說，Javascipt函數(shù)的輸入和輸出，默認都是Unicode字符。三個函數(shù)都適用。

  • 實際上，escape()不能直接用于URL編碼，它的真正作用是返回一個字符的Unicode編碼值。比如"春節(jié)"的返回結(jié)果是%u6625%u8282，也就是說在Unicode字符集中，"春"是第6625個（十六進制）字符，"節(jié)"是第8282個（十六進制）字符。
    它的具體規(guī)則是，除了ASCII字母、數(shù)字、標點符號"@ * _ + - . /"以外，對其他所有字符進行編碼。在\u0000到\u00ff之間的符號被轉(zhuǎn)成%xx的形式，其余符號被轉(zhuǎn)成%uxxxx的形式。

escape: escape 不會編碼的字符：@*/+ escape方法不回編碼+字符，+字符在服務器端會被解釋成空格，這點和通過表達提交一樣。 由于escape有這樣的缺點，和它不能很好的正確處理非ASCII字符的事實，我們應該盡量避免（對URI）使用escape，最好的方式是encodeURIComponent。

  • encodeURI()是Javascript中真正用來對URL編碼的函數(shù)。
    它著眼于對整個URL進行編碼，因此除了常見的符號以外，對其他一些在網(wǎng)址中有特殊含義的符號"; / ? : @ & = + $ , #"，也不進行編碼。編碼后，它輸出符號的utf-8形式，并且在每個字節(jié)前加上%。
  • 最后一個Javascript編碼函數(shù)是encodeURIComponent()。與encodeURI()的區(qū)別是，它用于對URL的組成部分進行個別編碼，而不用于對整個URL進行編碼。
    因此，"; / ? : @ & = + $ , #"，這些在encodeURI()中不被編碼的符號，在encodeURIComponent()中統(tǒng)統(tǒng)會被編碼。至于具體的編碼方法，兩者是一樣。

application/x-www-form-urlencoded，multipart/formdata區(qū)別

四種常見的 POST 提交數(shù)據(jù)方式

我們知道，HTTP 協(xié)議是以 ASCII 碼傳輸，建立在 TCP/IP 協(xié)議之上的應用層規(guī)范。規(guī)范把 HTTP 請求分為三個部分：狀態(tài)行、請求頭、消息主體。

<method> <request-URL> <version>
<headers>
<entity-body>

協(xié)議規(guī)定 POST 提交的數(shù)據(jù)必須放在消息主體（entity-body）中，但協(xié)議并沒有規(guī)定數(shù)據(jù)必須使用什么編碼方式。實際上，開發(fā)者完全可以自己決定消息主體的格式，只要最后發(fā)送的 HTTP 請求滿足上面的格式就可以。
但是，數(shù)據(jù)發(fā)送出去，還要服務端解析成功才有意義。一般服務端語言如 php、python 等，以及它們的 framework，都內(nèi)置了自動解析常見數(shù)據(jù)格式的功能。服務端通常是根據(jù)請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。所以說到 POST 提交數(shù)據(jù)方案，包含了 Content-Type 和消息主體編碼方式兩部分。下面就正式開始介紹它們。

application/json
application/json 這個 Content-Type 作為響應頭大家肯定不陌生。實際上，現(xiàn)在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化后的 JSON 字符串。由于 JSON 規(guī)范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數(shù)，使用 JSON 不會遇上什么麻煩。
JSON 格式支持比鍵值對復雜得多的結(jié)構化數(shù)據(jù)，這一點也很有用。

Http Header里的Content-Type

Http Header里的Content-Type一般有這三種：
application/x-www-form-urlencoded：數(shù)據(jù)被編碼為名稱/值對。這是標準的編碼格式。
multipart/form-data： 數(shù)據(jù)被編碼為一條消息，頁上的每個控件對應消息中的一個部分。
text/plain： 數(shù)據(jù)以純文本形式(text/json/xml/html)進行編碼，其中不含任何控件或格式字符。postman軟件里標的是RAW。

form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。

當action為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form數(shù)據(jù)轉(zhuǎn)換成一個字串（name1=value1&name2=value2...），然后把這個字串追加到url后面，用?分割，加載這個新的url。

當action為post時候，瀏覽器把form數(shù)據(jù)封裝到http body中，然后發(fā)送到server。 如果沒有type=file的控件，用默認的application/x-www-form-urlencoded就可以了。 但是如果有type=file`的話，就要用到multipart/form-data了。

當action為post且Content-Type類型是multipart/form-data，瀏覽器會把整個表單以控件為單位分割，并為每個部分加上Content-Disposition(form-data或者file),Content-Type(默認為text/plain),name(控件name)等信息，并加上分割符(boundary)。

二、HTML：

行內(nèi)元素有哪些？塊級元素有哪些？

標簽上title與alt屬性的區(qū)別是什么？

alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方;
title屬性是在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，有點類似jQuery的hover，你可以自己試試，另外，HTML的絕大多數(shù)標簽都支持title屬性，title屬性就是專門做提示信息的;

表單控件標簽都有哪些？

Html表單標簽
1，form標簽

<form>：創(chuàng)建表單，該元素不會生成可視化的界面，但是其他控件都必須放在這個標簽里面。
2，input標簽

<input>元素是表單控件中功能最豐富的，下面的多種輸入元素都是通過這個標簽來生成的。
3，列表框和下拉菜單

<select>用于創(chuàng)建列表框和下拉菜單，該元素必須和<option>結(jié)合使用，每個<option>代表一個列表項或者一個菜單項 經(jīng)常用到2個屬性，disabled，用于設置禁用該列表框和下拉菜單。 multiple：用于設置是否多選。 值得注意的是：一個<select>到底是生成列表框還是生成下拉菜單，是由上面這2個元素來決定的。要是指定了size或者multiple，那么就生成了列表框，否則就是下拉菜單。 <option>：一個選項。value表示請求參數(shù)值，disabled這個選項是否禁用，selected，這個選項是否選中 <optgroup>：一個選項組。label，必填，用來指定這個選項組的標簽。
4，使用textarea定義文本域

<textarea>：用于在html中定義多行文本域，2個屬性必填，cols和rows，用于指定文本域的寬度和高度。多行文本域比較特殊，除了普通的事件屬性，他還可以指定onselect屬性，用于表示文本域里面的內(nèi)容被選中時候的事件。
5，使用label定義標簽

<label>用于在表單元素中定義標簽，這些標簽只是對其他可以生成請求參數(shù)的控件來做說明的，本身是不會產(chǎn)生請求參數(shù)的，所以不要為<label>元素指定value的屬性值。
6，使用button定義按鈕

<botton>元素用于定義一個按鈕，在這個標簽的內(nèi)部可以包含普通的文本，文本格式化標簽，圖像等內(nèi)容，這也就是<button>和<input>按鈕的不同之處。

為何要寫DOCTYPE以及各類meta標簽？

移動前端不得不了解的HTML5 head 頭標簽（2016最新版）:
HTML的頭部內(nèi)容特別多，有針對SEO的頭部信息，也有針對移動設備的頭部信息。而且各個瀏覽器內(nèi)核以及各個國內(nèi)瀏覽器廠商都有些自己的標簽元素,有很多差異性。移動端的工作已經(jīng)越來越成為前端工作的重要內(nèi)容，除了平常的項目開發(fā)，HTML 頭部標簽功能，特別是meta，link等標簽的功能屬性顯得非常重要。

  • DOCTYPE
    DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html
    標簽之前，此標簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。
    使用 HTML5 doctype，不區(qū)分大小寫。
  • Meta 標簽
    meta標簽是HTML中head頭部的一個輔助性標簽，它位于HTML文檔頭部的 <head> 和 <title>標記之間，它提供用戶不可見的信息。雖然這部分信息用戶不可見，但是其作用非常強大，特別是當今的前端開發(fā)工作中，設置合適的meta標簽可以大大提升網(wǎng)站頁面的可用性。
    桌面端開發(fā)中，meta標簽通常用來為搜索引擎優(yōu)化（SEO）及 robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設定頁面格式，標注內(nèi)容提要和關鍵字；還可以設置頁面使其可以根據(jù)你定義的時間間隔刷新自己，以及設置RASC內(nèi)容等級，等等。
    移動端開發(fā)中，meta標簽除了桌面端中的功能設置外，還包括，比如viewport設置，添加到主屏幕圖標，標簽頁顏色等等實用設置。具體可以看后面詳細的介紹。
  • meta標簽分類
    meta標簽根據(jù)屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。
    http-equiv：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網(wǎng)頁內(nèi)容。

(X-UA-Compatible是針對ie8新加的一個設置，也就是說只有瀏覽器是ie8或者以上時，才認識這個標識。https://www.nihaoshijie.com.cn/index.php/archives/353 )
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
chrome=1則可以激活Chrome Frame[1]
。這時，edge的意思就是用當前最新的標準來渲染，由于當前最新的是ie8，所以用的ie8來渲染。
1. 如果我們使用content=”IE=8″或者content=”IE=9″等這樣不帶Emulate的標識，那么瀏覽器將會忽略你所設置的<doctype>，直接按照你x-ua-compatible定義的標準模式來渲染。
2. 如果我們使用content=”IE=EmulateIE8″或者content=”IE=EmulateIE9″這樣的標識，那么瀏覽器會先查找你定義的<doctype>，如果你定義的<doctype>正確，將會按照x-ua-compatible定義的標準模式來渲染，如果你的<doctype>錯誤或者沒有，將會以Quirks模式來渲染。

name屬性：主要用于描述網(wǎng)頁，與之對應的屬性值為content，content中的內(nèi) 容主要是便于瀏覽器，搜索引擎等機器人識別，等等。


<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<meta http-equiv="Content-Security-Policy" content="default-src 'self'">



<meta name="application-name" content="應用名稱">


<meta name="description" content="一個頁面描述">

<meta name="robots" content="index,follow,noodp">
<meta name="googlebot" content="index,follow">

<meta name="google" content="nositelinkssearchbox">

<meta name="google" content="notranslate">

<meta name="google-site-verification" content="verification_token">


##三、CSS：
###1. 盒子模型
###2. 有哪些方式實現(xiàn)動畫？
###3. 水平、垂直居中有哪些方法？
###4. float不會撐開父元素的高度，有什么解決方法？
###5. px、pt、em、rem、vh、vw等都是什么有什么區(qū)別？
###6. 不用JS如何實現(xiàn)一個寬度100%的方形div？
https://idiotwu.me/css-responsive-square/ 
* 方案一：CSS3 vw 單位
CSS3 中新增了一組相對于可視區(qū)域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對于視口寬度百分比的單位，1vw = 1% viewport width,vh是相對于視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當前視口寬高中 較小的一個的百分比單位，同理 vmax是相對當前視口寬高中 較大的一個的百分比單位。

.placeholder { width: 100%; height: 100vw;}

* 方案二：設置垂直方向的 padding 撐開容器
在 CSS 盒模型中，一個比較容易被忽略的就是 margin, padding的百分比數(shù)值計算。按照規(guī)定，margin, padding 的百分比數(shù)值是相對 **父元素寬度**的寬度計算的。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個 padding值設定為與 width 相同的百分比就可以制作出自適應正方形了

page {

border: 1px solid red;
width: 100%;
padding-bottom: 100%;
height: 0;
}

* 方案三：利用偽元素的 margin(padding)-top 撐開容器:在方案二中，我們利用百分比數(shù)值的 padding-bottom 屬性撐開容器內(nèi)部空間，但是這樣做會導致在元素上設置的 max-height 屬性失效：

page {

border: 1px solid red;
width: 100%;
/* max-height:10px; */
}

page:after{

content: '';
display: block;
margin-top: 100%; /* margin 百分比相對父元素寬度計算 */
}

這里就涉及到 [margin collapse](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) 的概念了，由于容器與偽元素在垂直方向發(fā)生了外邊距折疊，所以我們想象中的**撐開父元素高度**并沒有出現(xiàn)。而應對的方法是在父元素上觸發(fā) BFC：overflow: hidden;
完美！什么？你說元素內(nèi)部添加內(nèi)容時高度會溢出？~~來人，把這個叛徒拖出去喂狗！~~對于這樣的情況，可以將內(nèi)容放到獨立的內(nèi)容塊中，利用絕對定位消除空間占用。

##四、JS：
###1. 描述一下JS中變量的作用域
[理解 Javascript 作用域和作用域鏈](https://zilongshanren.com/blog/2016-03-13-understand-javascript-scope-and-scope-chain.html)
Javascript 作用域

>在 Javascript 中，只有局部作用域和全局作用域。而只有函數(shù)可以創(chuàng)建局部作用域，像 if，for 或者 while 這種塊語句是沒辦法創(chuàng)建作用域的。 （當然 ES6 提供了 let 關鍵字可以創(chuàng)建塊作用域。）

Javascript 作用域鏈
>當 Js 里面 **聲明** 一個函數(shù)的時候，會給該函數(shù)對象創(chuàng)建一個 scope 屬性，該屬性指向當前作用域鏈對象。
當 Js 里面 **調(diào)用** 一個函數(shù)的時候，會創(chuàng)建一個執(zhí)行上下文，這個執(zhí)行上下文定義了函數(shù)解釋執(zhí)行時的環(huán)境信息。每個執(zhí)行上下文都有自己的作用域鏈，主要用于變量標識符的解析。
在 Js 引擎運行一個函數(shù)的時候，它首先會把該函數(shù)的 scope 屬性添加到執(zhí)行上下文的作用域鏈上面，然后再創(chuàng)建一個 **活動對象** 添加到此作用域頂端共同組成了新的作用域鏈?；顒訉ο蟀嗽摵瘮?shù)的所有的形參，arguments 對象，所有的局變變量等信息。
當解釋執(zhí)行函數(shù)的每一條語句的時，會依據(jù)這個執(zhí)行上下文的作用域鏈來查找標識符，如果在一個作用域?qū)ο笊厦鏇]有找到標識符，則會沿著作用鏈一直向上查找，這一點類似于 Js 的原型繼承的屬性查找機制。

###描述一下JS中如何面向?qū)ο笠约昂瘮?shù)調(diào)用中的this到底是什么
面向?qū)ο螅?通過類可以創(chuàng)建任意多個具有相同屬性和方法的對象。
[阮 Javascript 面向?qū)ο缶幊蘛(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html)
封裝
繼承
###為何我們常常把 <script> 放在html的最后？

js的執(zhí)行會阻塞頁面的渲染
Javascript 是執(zhí)行順序是至上而下的，除非你特別說明，Javascript 代碼不會等到頁面加載完畢后才執(zhí)行。

###AJAX什么樣的情況算跨域？有哪些解決方法？
只要協(xié)議、域名、端口有任何一個不同，都被當作是不同的域。
![](http://upload-images.jianshu.io/upload_images/2579285-307248d730858937.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
jsonp
CORS
jsonp:原生js實現(xiàn)

function ajax(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("參數(shù)不合法");
}

//創(chuàng)建 script 標簽并加入到頁面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS);
console.log(callbackName);
//創(chuàng)建jsonp回調(diào)函數(shù)
window[callbackName] = function(json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
};

//發(fā)送請求
oS.src = options.url + '?' + params;

//超時處理
if (options.time) {
oS.timer = setTimeout(function() {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({
message: "超時"
});
}, time);
}
};

//格式化參數(shù)
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
return arr.join('&');
}
ajax({
url: "aa",
callback: "process",
data: {
name: "s"
}
})


###描述一下JSONP的原理(上題)
###Promise
[理解 Promise 的工作原理](https://blog.coding.net/blog/how-do-promises-work)
什么是 Promise
一個 Promise 對象代表一個目前還不可用，但是在未來的某個時間點可以被解析的值。它允許你以一種同步的方式編寫異步代碼。例如，如果你想要使用 Promise API 異步調(diào)用一個遠程的服務器，你需要創(chuàng)建一個代表數(shù)據(jù)將會在未來由 Web 服務返回的 Promise 對象。唯一的問題是目前數(shù)據(jù)還不可用。當請求完成并從服務器返回時數(shù)據(jù)將變?yōu)榭捎脭?shù)據(jù)。在此期間，Promise 對象將扮演一個真實數(shù)據(jù)的代理角色。接下來，你可以在 Promise 對象上綁定一個回調(diào)函數(shù)，一旦真實數(shù)據(jù)變得可用這個回調(diào)函數(shù)將會被調(diào)用。

Promises 將嵌套的 callback，改造成一系列的.then的連綴調(diào)用，去除了層層縮進的糟糕代碼風格。Promises 不是一種解決具體問題的算法，而已一種更好的代碼組織模式。接受新的組織模式同時，也逐漸以全新的視角來理解異步調(diào)用。
[Promise原理淺析](http://imweb.io/topic/565af932bb6a753a136242b0)
發(fā)布訂閱

###WebSocket、Long Polling、Server Sent Event
[WebSocket 是什么原理？為什么可以實現(xiàn)持久連接？](https://www.zhihu.com/question/20215561/answer/40316953)

首先Websocket是基于HTTP協(xié)議的，或者說借用了HTTP的協(xié)議來完成一部分握手。

* ajax輪詢
首先是 ajax輪詢 ，ajax輪詢 的原理非常簡單，**讓瀏覽器隔個幾秒就發(fā)送一次請求**，詢問服務器是否有新信息。

* long poll 
long poll 其實原理跟 ajax輪詢 差不多，**都是采用輪詢的方式**，不過采取的是阻塞模型（一直打電話，沒收到就不掛電話），也就是說，客戶端發(fā)起連接后，如果沒消息，就一直不返回Response給客戶端。直到有消息才返回，返回完之后，**客戶端再次建立連接，周而復始**。
* [為什么HTML5中的Server-sent Event沒有被廣泛使用](http://www.liuzhixiang.com/2014/12/18/HTTP-Server-sent/): Server sent-Event 像是long polling的升級版，在客戶端發(fā)起請求后，服務端不斷開連接，而是在有消息是向客戶端不斷寫入消息。Server-sent Event有客戶端的支持: EventSource。
* WebSocket
從上面可以看出其實這兩種方式，**都是在不斷地建立HTTP連接**，然后等待服務端處理，可以體現(xiàn)HTTP協(xié)議的另外一個特點，被動性。
何為被動性呢，其實就是，服務端不能主動聯(lián)系客戶端，只能有客戶端發(fā)起。'

使用WebSocket： **一旦WebSocket握手成功，服務器與客房端將會呈現(xiàn)對等的效果，都能接收和發(fā)送信息。**

[HTML5—WebSocket協(xié)議 #2](https://github.com/S-iscoming/myapp/issues/2)
###es6主要都有哪些語法特性？stage-0/1/2/3又是什么？
[前端開發(fā)者不得不知的ES6十大特性](http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/)
以下是ES6排名前十的最佳特性列表（排名不分先后）：
>Default Parameters（默認參數(shù)） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解構賦值）in ES6
Enhanced Object Literals （增強的對象文本）in ES6
Arrow Functions （箭頭函數(shù)）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（塊作用域構造Let and Const）
Classes（類） in ES6
Modules（模塊） in ES6

stage不同階段的區(qū)別[https://www.vanadis.cn/2017/03/18/babel-stage-x/](https://www.vanadis.cn/2017/03/18/babel-stage-x/): 
>es7不同階段語法提案的轉(zhuǎn)碼規(guī)則模塊（共有4個階段），分別是stage-0，stage-1，stage-2，stage-3。
* stage-0
stage-0的功能范圍最廣大，包含stage-1, stage-2以及stage-3的所有功能，同時還另外支持如下兩個功能插件：
[transform-do-expressions](https://babeljs.io/docs/plugins/transform-do-expressions)
[transform-function-bind](http://babeljs.io/docs/plugins/transform-function-bind/)
* stage-1
stage-1除了包含stage-2和stage-3，還包含了下面4個插件：
[transform-class-constructor-call](http://babeljs.io/docs/plugins/transform-class-constructor-call/)
[transform-class-properties](http://babeljs.io/docs/plugins/transform-class-properties/)
[transform-decorators](http://babeljs.io/docs/plugins/transform-decorators/)
[transform-export-extensions](http://babeljs.io/docs/plugins/transform-export-extensions/)
...
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,973評論 19贊 139
  • <a name='html'>HTML</a> Doctype作用？標準模式與兼容模式各有什么區(qū)別? （1）、<...
    clark124閱讀 3,567評論 1贊 19
  • 國家電網(wǎng)公司企業(yè)標準（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿：20170802 前言： 排版 ...
    庭說閱讀 11,178評論 6贊 13
  • 1 最近，李安每晚都做了同一個噩夢，每次噩夢醒來，他都要坐在床上大口的喘息，再點上一根香煙才能緩過來，但這個時候，...
    the歡閱讀 323評論 0贊 0
  • 懷揣著空白的信紙當作心聲 我星宸的殼碰響你的銅鈴山澗清泠似的皺褶是我徒勞的輾轉(zhuǎn) 有抖不掉的塵埃數(shù)得清的只有日子
    驚蟄夕閱讀 199評論 18贊 29