一、HTTP：
1. POST、GET區(qū)別
HTTP POST GET 本質(zhì)區(qū)別詳解
一 原理區(qū)別
根據(jù)HTTP規(guī)范，GET用于信息獲取，而且應(yīng)該是安全的和冪等的 。
- 所謂安全的意味著該操作用于獲取信息而非修改信息。換句話說(shuō)，GET請(qǐng)求一般不應(yīng)產(chǎn)生副作用。就是說(shuō)，它僅僅是獲取資源信息，就像數(shù)據(jù)庫(kù)查詢一樣，不會(huì)修改，增加數(shù)據(jù)，不會(huì)影響資源的狀態(tài)。
注意：這里安全的含義僅僅是指是非修改信息。
- 冪等的意味著對(duì)同一URL的多個(gè)請(qǐng)求應(yīng)該返回同樣的結(jié)果。
根據(jù)HTTP規(guī)范，POST表示可能修改變服務(wù)器上的資源的請(qǐng)求 。繼續(xù)引用上面的例子：還是新聞以網(wǎng)站為例，讀者對(duì)新聞發(fā)表自己的評(píng)論應(yīng)該通過(guò)POST實(shí)現(xiàn)，因?yàn)樵谠u(píng)論提交后站點(diǎn)的資源已經(jīng)不同了，或者說(shuō)資源被修改了。
二 表現(xiàn)形式區(qū)別
- （1）GET提交，請(qǐng)求的數(shù)據(jù)會(huì)附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，多個(gè)參數(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為該符號(hào)以16進(jìn)制表示的ASCII。
POST提交：把提交的數(shù)據(jù)放置在是HTTP包的包體中。上文示例中紅色字體標(biāo)明的就是實(shí)際的傳輸數(shù)據(jù)
因此，GET提交的數(shù)據(jù)會(huì)在地址欄中顯示出來(lái)，而POST提交，地址欄不會(huì)改變 - (2)傳輸數(shù)據(jù)的大?。菏紫嚷暶鳎篐TTP協(xié)議沒(méi)有對(duì)傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制，HTTP協(xié)議規(guī)范也沒(méi)有對(duì)URL長(zhǎng)度進(jìn)行限制。
而在實(shí)際開(kāi)發(fā)中存在的限制主要有：
GET:特定瀏覽器和服務(wù)器對(duì)URL長(zhǎng)度有限制，例如IE對(duì)URL長(zhǎng)度的限制是2083字節(jié)(2K+35)。對(duì)于其他瀏覽器，如Netscape、FireFox等，理論上沒(méi)有長(zhǎng)度限制，其限制取決于操作系統(tǒng)的支持。
因此對(duì)于GET提交時(shí)，傳輸數(shù)據(jù)就會(huì)受到URL長(zhǎng)度的限制。
POST:由于不是通過(guò)URL傳值，理論上數(shù)據(jù)不受限。但實(shí)際各個(gè)WEB服務(wù)器會(huì)規(guī)定對(duì)post提交數(shù)據(jù)大小進(jìn)行限制，Apache、IIS6都有各自的配置。 - (3)安全性：
.POST的安全性要比GET的安全性高。注意：這里所說(shuō)的安全性和上面GET提到的“安全”不是同個(gè)概念。上面“安全”的含義僅僅是不作數(shù)據(jù)修改，而這 里安全的含義是真正的Security的含義，比如：通過(guò)GET提交數(shù)據(jù)，用戶名和密碼將明文出現(xiàn)在URL上，因?yàn)?1)登錄頁(yè)面有可能被瀏覽器緩存， (2)其他人查看瀏覽器的歷史紀(jì)錄，那么別人就可以拿到你的賬號(hào)和密碼了，除此之外，使用GET提交數(shù)據(jù)還可能會(huì)造成Cross-site request forgery攻擊 - (4)Http get,post,soap協(xié)議都是在http上運(yùn)行的
1）get：請(qǐng)求參數(shù)是作為一個(gè)key/value對(duì)的序列（查詢字符串）附加到URL上的
查詢字符串的長(zhǎng)度受到web瀏覽器和web服務(wù)器的限制（如IE最多支持2048個(gè)字符），不適合傳輸大型數(shù)據(jù)集同時(shí)，它很不安全
2）post：請(qǐng)求參數(shù)是在http標(biāo)題的一個(gè)不同部分（名為entity body）傳輸?shù)?，這一部分用來(lái)傳輸表單信息，因此必須將Content-type設(shè)置為:application/x-www-form-urlencoded。post設(shè)計(jì)用來(lái)支持web窗體上的用戶字段，其參數(shù)也是作為key/value對(duì)傳輸。
但是：它不支持復(fù)雜數(shù)據(jù)類型，因?yàn)閜ost沒(méi)有定義傳輸數(shù)據(jù)結(jié)構(gòu)的語(yǔ)義和規(guī)則。
3）soap：是http post的一個(gè)專用版本，遵循一種特殊的xml消息格式
Content-type設(shè)置為: text/xml 任何數(shù)據(jù)都可以xml化
2. 不同的操作系統(tǒng)、不同的瀏覽器、不同的網(wǎng)頁(yè)字符集，將導(dǎo)致完全不同的編碼結(jié)果。有沒(méi)有辦法，能夠保證客戶端只用一種編碼方法向服務(wù)器發(fā)出請(qǐng)求？
- 網(wǎng)址路徑（/漢字）的編碼，用的是utf-8編碼。
- 查詢字符串的編碼，用的是操作系統(tǒng)的默認(rèn)編碼。
- 在已打開(kāi)的網(wǎng)頁(yè)上，直接用Get或Post方法發(fā)出HTTP請(qǐng)求。這時(shí)的編碼方法由網(wǎng)頁(yè)的編碼決定，也就是由HTML源碼中字符集的設(shè)定決定。
<meta http-equiv="Content-Type" content="text/html;charset=xxxx">
GET和POST方法的編碼，用的是網(wǎng)頁(yè)的編碼。 - 在Ajax調(diào)用中，IE總是采用GB2312編碼（操作系統(tǒng)的默認(rèn)編碼），而Firefox總是采用utf-8編碼。這就是我們的結(jié)論4。
Javascript語(yǔ)言用于編碼的函數(shù)，一共有三個(gè)，最古老的一個(gè)就是escape()。雖然這個(gè)函數(shù)現(xiàn)在已經(jīng)不提倡使用了，但是由于歷史原因，很多地方還在使用它，所以有必要先從它講起。
首先，無(wú)論網(wǎng)頁(yè)的原始編碼是什么，一旦被Javascript編碼，就都變?yōu)閡nicode字符。也就是說(shuō)，Javascipt函數(shù)的輸入和輸出，默認(rèn)都是Unicode字符。三個(gè)函數(shù)都適用。
- 實(shí)際上，escape()不能直接用于URL編碼，它的真正作用是返回一個(gè)字符的Unicode編碼值。比如"春節(jié)"的返回結(jié)果是%u6625%u8282，也就是說(shuō)在Unicode字符集中，"春"是第6625個(gè)（十六進(jìn)制）字符，"節(jié)"是第8282個(gè)（十六進(jìn)制）字符。
它的具體規(guī)則是，除了ASCII字母、數(shù)字、標(biāo)點(diǎn)符號(hào)"@ * _ + - . /"以外，對(duì)其他所有字符進(jìn)行編碼。在\u0000到\u00ff之間的符號(hào)被轉(zhuǎn)成%xx的形式，其余符號(hào)被轉(zhuǎn)成%uxxxx的形式。
escape: escape 不會(huì)編碼的字符：@*/+ escape方法不回編碼+字符，+字符在服務(wù)器端會(huì)被解釋成空格，這點(diǎn)和通過(guò)表達(dá)提交一樣。 由于escape有這樣的缺點(diǎn)，和它不能很好的正確處理非ASCII字符的事實(shí)，我們應(yīng)該盡量避免（對(duì)URI）使用escape，最好的方式是encodeURIComponent。
- encodeURI()是Javascript中真正用來(lái)對(duì)URL編碼的函數(shù)。
它著眼于對(duì)整個(gè)URL進(jìn)行編碼，因此除了常見(jiàn)的符號(hào)以外，對(duì)其他一些在網(wǎng)址中有特殊含義的符號(hào)"; / ? : @ & = + $ , #"，也不進(jìn)行編碼。編碼后，它輸出符號(hào)的utf-8形式，并且在每個(gè)字節(jié)前加上%。 - 最后一個(gè)Javascript編碼函數(shù)是encodeURIComponent()。與encodeURI()的區(qū)別是，它用于對(duì)URL的組成部分進(jìn)行個(gè)別編碼，而不用于對(duì)整個(gè)URL進(jìn)行編碼。
因此，"; / ? : @ & = + $ , #"，這些在encodeURI()中不被編碼的符號(hào)，在encodeURIComponent()中統(tǒng)統(tǒng)會(huì)被編碼。至于具體的編碼方法，兩者是一樣。
application/x-www-form-urlencoded，multipart/formdata區(qū)別
四種常見(jiàn)的 POST 提交數(shù)據(jù)方式
我們知道，HTTP 協(xié)議是以 ASCII 碼傳輸，建立在 TCP/IP 協(xié)議之上的應(yīng)用層規(guī)范。規(guī)范把 HTTP 請(qǐng)求分為三個(gè)部分：狀態(tài)行、請(qǐng)求頭、消息主體。
<method> <request-URL> <version>
<headers>
<entity-body>
協(xié)議規(guī)定 POST 提交的數(shù)據(jù)必須放在消息主體（entity-body）中，但協(xié)議并沒(méi)有規(guī)定數(shù)據(jù)必須使用什么編碼方式。實(shí)際上，開(kāi)發(fā)者完全可以自己決定消息主體的格式，只要最后發(fā)送的 HTTP 請(qǐng)求滿足上面的格式就可以。
但是，數(shù)據(jù)發(fā)送出去，還要服務(wù)端解析成功才有意義。一般服務(wù)端語(yǔ)言如 php、python 等，以及它們的 framework，都內(nèi)置了自動(dòng)解析常見(jiàn)數(shù)據(jù)格式的功能。服務(wù)端通常是根據(jù)請(qǐng)求頭（headers）中的 Content-Type 字段來(lái)獲知請(qǐng)求中的消息主體是用何種方式編碼，再對(duì)主體進(jìn)行解析。所以說(shuō)到 POST 提交數(shù)據(jù)方案，包含了 Content-Type 和消息主體編碼方式兩部分。下面就正式開(kāi)始介紹它們。
application/json
application/json 這個(gè) Content-Type 作為響應(yīng)頭大家肯定不陌生。實(shí)際上，現(xiàn)在越來(lái)越多的人把它作為請(qǐng)求頭，用來(lái)告訴服務(wù)端消息主體是序列化后的 JSON 字符串。由于 JSON 規(guī)范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務(wù)端語(yǔ)言也都有處理 JSON 的函數(shù)，使用 JSON 不會(huì)遇上什么麻煩。
JSON 格式支持比鍵值對(duì)復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點(diǎn)也很有用。
Http Header里的Content-Type一般有這三種：
application/x-www-form-urlencoded：數(shù)據(jù)被編碼為名稱/值對(duì)。這是標(biāo)準(zhǔn)的編碼格式。
multipart/form-data： 數(shù)據(jù)被編碼為一條消息，頁(yè)上的每個(gè)控件對(duì)應(yīng)消息中的一個(gè)部分。
text/plain： 數(shù)據(jù)以純文本形式(text/json/xml/html)進(jìn)行編碼，其中不含任何控件或格式字符。postman軟件里標(biāo)的是RAW。
form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認(rèn)為application/x-www-form-urlencoded。
當(dāng)action為get時(shí)候，瀏覽器用x-www-form-urlencoded的編碼方式把form數(shù)據(jù)轉(zhuǎn)換成一個(gè)字串（name1=value1&name2=value2...），然后把這個(gè)字串追加到url后面，用?分割，加載這個(gè)新的url。
當(dāng)action為post時(shí)候，瀏覽器把form數(shù)據(jù)封裝到http body中，然后發(fā)送到server。 如果沒(méi)有type=file的控件，用默認(rèn)的application/x-www-form-urlencoded就可以了。 但是如果有type=file`的話，就要用到multipart/form-data了。
當(dāng)action為post且Content-Type類型是multipart/form-data，瀏覽器會(huì)把整個(gè)表單以控件為單位分割，并為每個(gè)部分加上Content-Disposition(form-data或者file),Content-Type(默認(rèn)為text/plain),name(控件name)等信息，并加上分割符(boundary)。
二、HTML：
行內(nèi)元素有哪些？塊級(jí)元素有哪些？
標(biāo)簽上title與alt屬性的區(qū)別是什么？
alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息，它會(huì)直接輸出在原本加載圖片的地方;
title屬性是在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就沒(méi)有了，有點(diǎn)類似jQuery的hover，你可以自己試試，另外，HTML的絕大多數(shù)標(biāo)簽都支持title屬性，title屬性就是專門(mén)做提示信息的;
表單控件標(biāo)簽都有哪些？
Html表單標(biāo)簽
1，form標(biāo)簽
<form>：創(chuàng)建表單，該元素不會(huì)生成可視化的界面，但是其他控件都必須放在這個(gè)標(biāo)簽里面。
2，input標(biāo)簽
<input>元素是表單控件中功能最豐富的，下面的多種輸入元素都是通過(guò)這個(gè)標(biāo)簽來(lái)生成的。
3，列表框和下拉菜單
<select>用于創(chuàng)建列表框和下拉菜單，該元素必須和<option>結(jié)合使用，每個(gè)<option>代表一個(gè)列表項(xiàng)或者一個(gè)菜單項(xiàng) 經(jīng)常用到2個(gè)屬性，disabled，用于設(shè)置禁用該列表框和下拉菜單。 multiple：用于設(shè)置是否多選。 值得注意的是：一個(gè)<select>到底是生成列表框還是生成下拉菜單，是由上面這2個(gè)元素來(lái)決定的。要是指定了size或者multiple，那么就生成了列表框，否則就是下拉菜單。 <option>：一個(gè)選項(xiàng)。value表示請(qǐng)求參數(shù)值，disabled這個(gè)選項(xiàng)是否禁用，selected，這個(gè)選項(xiàng)是否選中 <optgroup>：一個(gè)選項(xiàng)組。label，必填，用來(lái)指定這個(gè)選項(xiàng)組的標(biāo)簽。
4，使用textarea定義文本域
<textarea>：用于在html中定義多行文本域，2個(gè)屬性必填，cols和rows，用于指定文本域的寬度和高度。多行文本域比較特殊，除了普通的事件屬性，他還可以指定onselect屬性，用于表示文本域里面的內(nèi)容被選中時(shí)候的事件。
5，使用label定義標(biāo)簽
<label>用于在表單元素中定義標(biāo)簽，這些標(biāo)簽只是對(duì)其他可以生成請(qǐng)求參數(shù)的控件來(lái)做說(shuō)明的，本身是不會(huì)產(chǎn)生請(qǐng)求參數(shù)的，所以不要為<label>元素指定value的屬性值。
6，使用button定義按鈕
<botton>元素用于定義一個(gè)按鈕，在這個(gè)標(biāo)簽的內(nèi)部可以包含普通的文本，文本格式化標(biāo)簽，圖像等內(nèi)容，這也就是<button>和<input>按鈕的不同之處。
為何要寫(xiě)DOCTYPE以及各類meta標(biāo)簽？
移動(dòng)前端不得不了解的HTML5 head 頭標(biāo)簽（2016最新版）:
HTML的頭部?jī)?nèi)容特別多，有針對(duì)SEO的頭部信息，也有針對(duì)移動(dòng)設(shè)備的頭部信息。而且各個(gè)瀏覽器內(nèi)核以及各個(gè)國(guó)內(nèi)瀏覽器廠商都有些自己的標(biāo)簽元素,有很多差異性。移動(dòng)端的工作已經(jīng)越來(lái)越成為前端工作的重要內(nèi)容，除了平常的項(xiàng)目開(kāi)發(fā)，HTML 頭部標(biāo)簽功能，特別是meta，link等標(biāo)簽的功能屬性顯得非常重要。
- DOCTYPE
DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html
標(biāo)簽之前，此標(biāo)簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。
使用 HTML5 doctype，不區(qū)分大小寫(xiě)。 - Meta 標(biāo)簽
meta標(biāo)簽是HTML中head頭部的一個(gè)輔助性標(biāo)簽，它位于HTML文檔頭部的 <head> 和 <title>標(biāo)記之間，它提供用戶不可見(jiàn)的信息。雖然這部分信息用戶不可見(jiàn)，但是其作用非常強(qiáng)大，特別是當(dāng)今的前端開(kāi)發(fā)工作中，設(shè)置合適的meta標(biāo)簽可以大大提升網(wǎng)站頁(yè)面的可用性。
桌面端開(kāi)發(fā)中，meta標(biāo)簽通常用來(lái)為搜索引擎優(yōu)化（SEO）及 robots定義頁(yè)面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設(shè)定頁(yè)面格式，標(biāo)注內(nèi)容提要和關(guān)鍵字；還可以設(shè)置頁(yè)面使其可以根據(jù)你定義的時(shí)間間隔刷新自己，以及設(shè)置RASC內(nèi)容等級(jí)，等等。
移動(dòng)端開(kāi)發(fā)中，meta標(biāo)簽除了桌面端中的功能設(shè)置外，還包括，比如viewport設(shè)置，添加到主屏幕圖標(biāo)，標(biāo)簽頁(yè)顏色等等實(shí)用設(shè)置。具體可以看后面詳細(xì)的介紹。 - meta標(biāo)簽分類
meta標(biāo)簽根據(jù)屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。
http-equiv：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網(wǎng)頁(yè)內(nèi)容。
(X-UA-Compatible是針對(duì)ie8新加的一個(gè)設(shè)置，也就是說(shuō)只有瀏覽器是ie8或者以上時(shí)，才認(rèn)識(shí)這個(gè)標(biāo)識(shí)。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]
。這時(shí)，edge的意思就是用當(dāng)前最新的標(biāo)準(zhǔn)來(lái)渲染，由于當(dāng)前最新的是ie8，所以用的ie8來(lái)渲染。
1. 如果我們使用content=”IE=8″或者content=”IE=9″等這樣不帶Emulate的標(biāo)識(shí)，那么瀏覽器將會(huì)忽略你所設(shè)置的<doctype>，直接按照你x-ua-compatible定義的標(biāo)準(zhǔn)模式來(lái)渲染。
2. 如果我們使用content=”IE=EmulateIE8″或者content=”IE=EmulateIE9″這樣的標(biāo)識(shí)，那么瀏覽器會(huì)先查找你定義的<doctype>，如果你定義的<doctype>正確，將會(huì)按照x-ua-compatible定義的標(biāo)準(zhǔn)模式來(lái)渲染，如果你的<doctype>錯(cuò)誤或者沒(méi)有，將會(huì)以Quirks模式來(lái)渲染。
name屬性：主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi) 容主要是便于瀏覽器，搜索引擎等機(jī)器人識(shí)別，等等。
<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="應(yīng)用名稱">
<meta name="description" content="一個(gè)頁(yè)面描述">
<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. 有哪些方式實(shí)現(xiàn)動(dòng)畫(huà)？
###3. 水平、垂直居中有哪些方法？
###4. float不會(huì)撐開(kāi)父元素的高度，有什么解決方法？
###5. px、pt、em、rem、vh、vw等都是什么有什么區(qū)別？
###6. 不用JS如何實(shí)現(xiàn)一個(gè)寬度100%的方形div？
https://idiotwu.me/css-responsive-square/
* 方案一：CSS3 vw 單位
CSS3 中新增了一組相對(duì)于可視區(qū)域百分比的長(zhǎng)度單位 vw, vh, vmin, vmax。其中 vw 是相對(duì)于視口寬度百分比的單位，1vw = 1% viewport width,vh是相對(duì)于視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對(duì)當(dāng)前視口寬高中 較小的一個(gè)的百分比單位，同理 vmax是相對(duì)當(dāng)前視口寬高中 較大的一個(gè)的百分比單位。
.placeholder { width: 100%; height: 100vw;}
* 方案二：設(shè)置垂直方向的 padding 撐開(kāi)容器
在 CSS 盒模型中，一個(gè)比較容易被忽略的就是 margin, padding的百分比數(shù)值計(jì)算。按照規(guī)定，margin, padding 的百分比數(shù)值是相對(duì) **父元素寬度**的寬度計(jì)算的。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個(gè) padding值設(shè)定為與 width 相同的百分比就可以制作出自適應(yīng)正方形了
page {
border: 1px solid red;
width: 100%;
padding-bottom: 100%;
height: 0;
}
* 方案三：利用偽元素的 margin(padding)-top 撐開(kāi)容器:在方案二中，我們利用百分比數(shù)值的 padding-bottom 屬性撐開(kāi)容器內(nèi)部空間，但是這樣做會(huì)導(dǎo)致在元素上設(shè)置的 max-height 屬性失效：
page {
border: 1px solid red;
width: 100%;
/* max-height:10px; */
}
page:after{
content: '';
display: block;
margin-top: 100%; /* margin 百分比相對(duì)父元素寬度計(jì)算 */
}
這里就涉及到 [margin collapse](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) 的概念了，由于容器與偽元素在垂直方向發(fā)生了外邊距折疊，所以我們想象中的**撐開(kāi)父元素高度**并沒(méi)有出現(xiàn)。而應(yīng)對(duì)的方法是在父元素上觸發(fā) BFC：overflow: hidden;
完美！什么？你說(shuō)元素內(nèi)部添加內(nèi)容時(shí)高度會(huì)溢出？~~來(lái)人，把這個(gè)叛徒拖出去喂狗！~~對(duì)于這樣的情況，可以將內(nèi)容放到獨(dú)立的內(nèi)容塊中，利用絕對(duì)定位消除空間占用。
##四、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 這種塊語(yǔ)句是沒(méi)辦法創(chuàng)建作用域的。 （當(dāng)然 ES6 提供了 let 關(guān)鍵字可以創(chuàng)建塊作用域。）
Javascript 作用域鏈
>當(dāng) Js 里面 **聲明** 一個(gè)函數(shù)的時(shí)候，會(huì)給該函數(shù)對(duì)象創(chuàng)建一個(gè) scope 屬性，該屬性指向當(dāng)前作用域鏈對(duì)象。
當(dāng) Js 里面 **調(diào)用** 一個(gè)函數(shù)的時(shí)候，會(huì)創(chuàng)建一個(gè)執(zhí)行上下文，這個(gè)執(zhí)行上下文定義了函數(shù)解釋執(zhí)行時(shí)的環(huán)境信息。每個(gè)執(zhí)行上下文都有自己的作用域鏈，主要用于變量標(biāo)識(shí)符的解析。
在 Js 引擎運(yùn)行一個(gè)函數(shù)的時(shí)候，它首先會(huì)把該函數(shù)的 scope 屬性添加到執(zhí)行上下文的作用域鏈上面，然后再創(chuàng)建一個(gè) **活動(dòng)對(duì)象** 添加到此作用域頂端共同組成了新的作用域鏈?；顒?dòng)對(duì)象包含了該函數(shù)的所有的形參，arguments 對(duì)象，所有的局變變量等信息。
當(dāng)解釋執(zhí)行函數(shù)的每一條語(yǔ)句的時(shí)，會(huì)依據(jù)這個(gè)執(zhí)行上下文的作用域鏈來(lái)查找標(biāo)識(shí)符，如果在一個(gè)作用域?qū)ο笊厦鏇](méi)有找到標(biāo)識(shí)符，則會(huì)沿著作用鏈一直向上查找，這一點(diǎn)類似于 Js 的原型繼承的屬性查找機(jī)制。
###描述一下JS中如何面向?qū)ο笠约昂瘮?shù)調(diào)用中的this到底是什么
面向?qū)ο螅?通過(guò)類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。
[阮 Javascript 面向?qū)ο缶幊蘛(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html)
封裝
繼承
###為何我們常常把 <script> 放在html的最后？
js的執(zhí)行會(huì)阻塞頁(yè)面的渲染
Javascript 是執(zhí)行順序是至上而下的，除非你特別說(shuō)明，Javascript 代碼不會(huì)等到頁(yè)面加載完畢后才執(zhí)行。
###AJAX什么樣的情況算跨域？有哪些解決方法？
只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。
jsonp
CORS
jsonp:原生js實(shí)現(xiàn)
function ajax(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("參數(shù)不合法");
}
//創(chuàng)建 script 標(biāo)簽并加入到頁(yè)面中
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ā)送請(qǐng)求
oS.src = options.url + '?' + params;
//超時(shí)處理
if (options.time) {
oS.timer = setTimeout(function() {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({
message: "超時(shí)"
});
}, 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
一個(gè) Promise 對(duì)象代表一個(gè)目前還不可用，但是在未來(lái)的某個(gè)時(shí)間點(diǎn)可以被解析的值。它允許你以一種同步的方式編寫(xiě)異步代碼。例如，如果你想要使用 Promise API 異步調(diào)用一個(gè)遠(yuǎn)程的服務(wù)器，你需要?jiǎng)?chuàng)建一個(gè)代表數(shù)據(jù)將會(huì)在未來(lái)由 Web 服務(wù)返回的 Promise 對(duì)象。唯一的問(wèn)題是目前數(shù)據(jù)還不可用。當(dāng)請(qǐng)求完成并從服務(wù)器返回時(shí)數(shù)據(jù)將變?yōu)榭捎脭?shù)據(jù)。在此期間，Promise 對(duì)象將扮演一個(gè)真實(shí)數(shù)據(jù)的代理角色。接下來(lái)，你可以在 Promise 對(duì)象上綁定一個(gè)回調(diào)函數(shù)，一旦真實(shí)數(shù)據(jù)變得可用這個(gè)回調(diào)函數(shù)將會(huì)被調(diào)用。
Promises 將嵌套的 callback，改造成一系列的.then的連綴調(diào)用，去除了層層縮進(jìn)的糟糕代碼風(fēng)格。Promises 不是一種解決具體問(wèn)題的算法，而已一種更好的代碼組織模式。接受新的組織模式同時(shí)，也逐漸以全新的視角來(lái)理解異步調(diào)用。
[Promise原理淺析](http://imweb.io/topic/565af932bb6a753a136242b0)
發(fā)布訂閱
###WebSocket、Long Polling、Server Sent Event
[WebSocket 是什么原理？為什么可以實(shí)現(xiàn)持久連接？](https://www.zhihu.com/question/20215561/answer/40316953)
首先Websocket是基于HTTP協(xié)議的，或者說(shuō)借用了HTTP的協(xié)議來(lái)完成一部分握手。
* ajax輪詢
首先是 ajax輪詢 ，ajax輪詢 的原理非常簡(jiǎn)單，**讓瀏覽器隔個(gè)幾秒就發(fā)送一次請(qǐng)求**，詢問(wèn)服務(wù)器是否有新信息。
* long poll
long poll 其實(shí)原理跟 ajax輪詢 差不多，**都是采用輪詢的方式**，不過(guò)采取的是阻塞模型（一直打電話，沒(méi)收到就不掛電話），也就是說(shuō)，客戶端發(fā)起連接后，如果沒(méi)消息，就一直不返回Response給客戶端。直到有消息才返回，返回完之后，**客戶端再次建立連接，周而復(fù)始**。
* [為什么HTML5中的Server-sent Event沒(méi)有被廣泛使用](http://www.liuzhixiang.com/2014/12/18/HTTP-Server-sent/): Server sent-Event 像是long polling的升級(jí)版，在客戶端發(fā)起請(qǐng)求后，服務(wù)端不斷開(kāi)連接，而是在有消息是向客戶端不斷寫(xiě)入消息。Server-sent Event有客戶端的支持: EventSource。
* WebSocket
從上面可以看出其實(shí)這兩種方式，**都是在不斷地建立HTTP連接**，然后等待服務(wù)端處理，可以體現(xiàn)HTTP協(xié)議的另外一個(gè)特點(diǎn)，被動(dòng)性。
何為被動(dòng)性呢，其實(shí)就是，服務(wù)端不能主動(dòng)聯(lián)系客戶端，只能有客戶端發(fā)起。'
使用WebSocket： **一旦WebSocket握手成功，服務(wù)器與客房端將會(huì)呈現(xiàn)對(duì)等的效果，都能接收和發(fā)送信息。**
[HTML5—WebSocket協(xié)議 #2](https://github.com/S-iscoming/myapp/issues/2)
###es6主要都有哪些語(yǔ)法特性？stage-0/1/2/3又是什么？
[前端開(kāi)發(fā)者不得不知的ES6十大特性](http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/)
以下是ES6排名前十的最佳特性列表（排名不分先后）：
>Default Parameters（默認(rèn)參數(shù)） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解構(gòu)賦值）in ES6
Enhanced Object Literals （增強(qiáng)的對(duì)象文本）in ES6
Arrow Functions （箭頭函數(shù)）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（塊作用域構(gòu)造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不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則模塊（共有4個(gè)階段），分別是stage-0，stage-1，stage-2，stage-3。
* stage-0
stage-0的功能范圍最廣大，包含stage-1, stage-2以及stage-3的所有功能，同時(shí)還另外支持如下兩個(gè)功能插件：
[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個(gè)插件：
[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/)
...
