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

一析二、HTTP：

1. POST盗忱、GET區(qū)別

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

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

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

  1. 冪等的意味著對同一URL的多個請求應(yīng)該返回同樣的結(jié)果啰扛。
    根據(jù)HTTP規(guī)范嚎京，POST表示可能修改變服務(wù)器上的資源的請求 。繼續(xù)引用上面的例子：還是新聞以網(wǎng)站為例隐解，讀者對新聞發(fā)表自己的評論應(yīng)該通過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ù)的大小：首先聲明：HTTP協(xié)議沒有對傳輸?shù)臄?shù)據(jù)大小進行限制，HTTP協(xié)議規(guī)范也沒有對URL長度進行限制诬滩。
    而在實際開發(fā)中存在的限制主要有：
    GET:特定瀏覽器和服務(wù)器對URL長度有限制庙曙，例如IE對URL長度的限制是2083字節(jié)(2K+35)。對于其他瀏覽器，如Netscape、FireFox等，理論上沒有長度限制域那，其限制取決于操作系統(tǒng)的支持。
    因此對于GET提交時檐束，傳輸數(shù)據(jù)就會受到URL長度的限制。
    POST:由于不是通過URL傳值，理論上數(shù)據(jù)不受限。但實際各個WEB服務(wù)器會規(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服務(wù)器的限制（如IE最多支持2048個字符），不適合傳輸大型數(shù)據(jù)集同時姐赡，它很不安全

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

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

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

關(guān)于URL編碼：

  • 網(wǎng)址路徑（/漢字）的編碼颗胡，用的是utf-8編碼毫深。
  • 查詢字符串的編碼，用的是操作系統(tǒng)的默認編碼毒姨。
  • 在已打開的網(wǎng)頁上哑蔫，直接用Get或Post方法發(fā)出HTTP請求。這時的編碼方法由網(wǎng)頁的編碼決定，也就是由HTML源碼中字符集的設(shè)定決定闸迷。
    <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方法不回編碼+字符涵防，+字符在服務(wù)器端會被解釋成空格闹伪，這點和通過表達提交一樣。 由于escape有這樣的缺點壮池，和它不能很好的正確處理非ASCII字符的事實偏瓤，我們應(yīng)該盡量避免（對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é)議之上的應(yīng)用層規(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ā)送出去，還要服務(wù)端解析成功才有意義蹄梢。一般服務(wù)端語言如 php疙筹、python 等，以及它們的 framework，都內(nèi)置了自動解析常見數(shù)據(jù)格式的功能而咆。服務(wù)端通常是根據(jù)請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼霍比，再對主體進行解析。所以說到 POST 提交數(shù)據(jù)方案暴备，包含了 Content-Type 和消息主體編碼方式兩部分悠瞬。下面就正式開始介紹它們。

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

Http Header里的Content-Type

Http Header里的Content-Type一般有這三種：
application/x-www-form-urlencoded：數(shù)據(jù)被編碼為名稱/值對晾捏。這是標準的編碼格式。
multipart/form-data： 數(shù)據(jù)被編碼為一條消息哀托，頁上的每個控件對應(yīng)消息中的一個部分惦辛。
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，用于設(shè)置禁用該列表框和下拉菜單弥奸。 multiple：用于設(shè)置是否多選榨惠。 值得注意的是：一個<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的頭部信息均唉，也有針對移動設(shè)備的頭部信息是晨。而且各個瀏覽器內(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ā)工作中女蜈，設(shè)置合適的meta標簽可以大大提升網(wǎng)站頁面的可用性持舆。
    桌面端開發(fā)中，meta標簽通常用來為搜索引擎優(yōu)化（SEO）及 robots定義頁面主題伪窖，或者是定義用戶瀏覽器上的cookie逸寓；它可以用于鑒別作者，設(shè)定頁面格式惰许，標注內(nèi)容提要和關(guān)鍵字席覆；還可以設(shè)置頁面使其可以根據(jù)你定義的時間間隔刷新自己史辙，以及設(shè)置RASC內(nèi)容等級汹买，等等。
    移動端開發(fā)中聊倔，meta標簽除了桌面端中的功能設(shè)置外晦毙，還包括，比如viewport設(shè)置耙蔑，添加到主屏幕圖標见妒，標簽頁顏色等等實用設(shè)置。具體可以看后面詳細的介紹甸陌。
  • meta標簽分類
    meta標簽根據(jù)屬性的不同须揣，可分為兩大部分：http-equiv 和 name 屬性。
    http-equiv：相當于http的文件頭作用钱豁，它可以向瀏覽器傳回一些有用的信息耻卡，以幫助瀏覽器正確地顯示網(wǎng)頁內(nèi)容。

(X-UA-Compatible是針對ie8新加的一個設(shè)置牲尺，也就是說只有瀏覽器是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的標識，那么瀏覽器將會忽略你所設(shè)置的<doctype>搓茬，直接按照你x-ua-compatible定義的標準模式來渲染最铁。
2. 如果我們使用content=”IE=EmulateIE8″或者content=”IE=EmulateIE9″這樣的標識讯赏，那么瀏覽器會先查找你定義的<doctype>，如果你定義的<doctype>正確冷尉，將會按照x-ua-compatible定義的標準模式來渲染漱挎，如果你的<doctype>錯誤或者沒有，將會以Quirks模式來渲染雀哨。

name屬性：主要用于描述網(wǎng)頁磕谅，與之對應(yī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="應(yīng)用名稱">


<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;}

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

page {

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

* 方案三：利用偽元素的 margin(padding)-top 撐開容器:在方案二中，我們利用百分比數(shù)值的 padding-bottom 屬性撐開容器內(nèi)部空間惫叛，但是這樣做會導(dǎo)致在元素上設(shè)置的 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)嘉涌。而應(yīng)對的方法是在父元素上觸發(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 關(guān)鍵字可以創(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)用一個遠程的服務(wù)器，你需要創(chuàng)建一個代表數(shù)據(jù)將會在未來由 Web 服務(wù)返回的 Promise 對象畏线。唯一的問題是目前數(shù)據(jù)還不可用静盅。當請求完成并從服務(wù)器返回時數(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)用抵蚊，去除了層層縮進的糟糕代碼風(fēng)格施绎。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ā)送一次請求**，詢問服務(wù)器是否有新信息羹应。

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

使用WebSocket： **一旦WebSocket握手成功社裆，服務(wù)器與客房端將會呈現(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 （解構(gòu)賦值）in ES6
Enhanced Object Literals （增強的對象文本）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不同階段語法提案的轉(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/)
...
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末墨微，一起剝皮案震驚了整個濱河市道媚，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖最域，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件谴分，死亡現(xiàn)場離奇詭異，居然都是意外死亡镀脂，警方通過查閱死者的電腦和手機牺蹄，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來薄翅，“玉大人沙兰，你說我怎么就攤上這事∏唐牵” “怎么了鼎天？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長暑竟。 經(jīng)常有香客問我训措，道長，這世上最難降的妖魔是什么光羞？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任绩鸣，我火速辦了婚禮，結(jié)果婚禮上纱兑，老公的妹妹穿的比我還像新娘呀闻。我一直安慰自己，他們只是感情好潜慎，可當我...
    茶點故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布捡多。 她就那樣靜靜地躺著，像睡著了一般铐炫。 火紅的嫁衣襯著肌膚如雪垒手。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天倒信，我揣著相機與錄音科贬，去河邊找鬼。 笑死鳖悠，一個胖子當著我的面吹牛榜掌，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播乘综，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼憎账，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了卡辰？” 一聲冷哼從身側(cè)響起胞皱，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤邪意，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后反砌，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抄罕，經(jīng)...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年于颖，在試婚紗的時候發(fā)現(xiàn)自己被綠了呆贿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡森渐，死狀恐怖做入，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情同衣，我是刑警寧澤竟块，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站耐齐，受9級特大地震影響浪秘，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜埠况，卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一耸携、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辕翰，春花似錦夺衍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案沟沙，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至壁榕，卻和暖如春矛紫，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背牌里。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工颊咬， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人二庵。 一個月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓贪染，卻偏偏與公主長得像，于是被迫代替她去往敵國和親催享。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2贊 355

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

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