在偶运梗客網(wǎng)刷面經(jīng)，不會(huì)的總結(jié)一下昵骤，當(dāng)作備份

Ajax和Flash各自優(yōu)缺點(diǎn)：

Ajax的優(yōu)勢(shì)：1.可搜索性 2.開(kāi)放性 3.費(fèi)用 4.易用性 5.易于開(kāi)發(fā)涯捻。
Flash的優(yōu)勢(shì)：1.多媒體處理 2.兼容性 3.矢量圖形 4.客戶端資源調(diào)度
Ajax的劣勢(shì)：1.它可能破壞瀏覽器的后退功能 2.使用動(dòng)態(tài)頁(yè)面更新使得用戶難于將某個(gè)特定的狀態(tài)保存到收藏夾中 ，不過(guò)這些都有相關(guān)方法解決墅诡。
Flash的劣勢(shì)：1.二進(jìn)制格式 2.格式私有 3.flash 文件經(jīng)常會(huì)很大壳嚎，用戶第一次使用的時(shí)候需要忍耐較長(zhǎng)的等待時(shí)間 4.性能問(wèn)題

2.解決跨域問(wèn)題

http://blog.csdn.net/joyhen/article/details/21631833
a.jsonp+script (只支持get 不支持post)
簡(jiǎn)述方法：
因?yàn)閟cript沒(méi)有跨域限制，所以可以使用jsonp動(dòng)態(tài)創(chuàng)建script
b.document.domain + iframe
簡(jiǎn)述方法：
我們只要把兩個(gè)頁(yè)面的document.domain都設(shè)成相同的域名就可以了，但是主域要相同
c.CORS（跨域資源共享）
簡(jiǎn)述方法：
自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通烟馅，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功说庭，還是應(yīng)該失敗。
d.postmessage
這個(gè)功能主要包括接受信息的"message"事件和發(fā)送消息的"postMessage"方法焙糟。

dom渲染機(jī)制 http://taligarsiel.com/Projects/howbrowserswork1.htm#Rendering_engines

大概步驟如下：
1.html文檔通過(guò)html解析和dom規(guī)則口渔，生成dom樹(shù)
2.css文檔通過(guò)css解析，得到css規(guī)則
3.dom樹(shù)和css規(guī)則通過(guò)attachment生成渲染樹(shù)
4.渲染樹(shù)通過(guò)布局過(guò)程穿撮，使每個(gè)結(jié)點(diǎn)確定在頁(yè)面的坐標(biāo)
5.最通過(guò)繪制，每個(gè)節(jié)點(diǎn)在UI后端層進(jìn)行繪制痪欲，得到最終的網(wǎng)頁(yè)

repaint和reflow

http://blog.csdn.net/ClaireKe/article/details/51375622
這個(gè)問(wèn)題主要是在對(duì)渲染樹(shù)進(jìn)行布局和繪制中出現(xiàn)的
對(duì)dom的每個(gè)節(jié)點(diǎn)都有盒子模型悦穿，瀏覽器通過(guò)樣式進(jìn)行定位是reflow
而對(duì)進(jìn)行繪制的部分就是repaint
注：回流必將引起重繪，而重繪不一定會(huì)引起回流业踢。

優(yōu)化：1.提前寫(xiě)好css
2.對(duì)于需要多次重排的元素讓其脫離文檔流
例：為動(dòng)畫(huà)的 HTML 元件使用 fixed 或 absolute 的 position栗柒，那么修改他們的 CSS 是會(huì)大大減小 reflow 。
3.不要把 DOM 節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量
4.少使用 table 布局知举。因?yàn)榭赡芎苄〉囊粋€(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局瞬沦。

行內(nèi)元素能否使用margin和padding

答：行內(nèi)元素是具有盒子模型的，但是margin-top雇锡，margin-bottom和padding-top,padding-bottom是不能使用的
margin和padding的left和right是可以使用的

布局問(wèn)題

http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
a.雙飛翼布局（左右定逛钻，中間自適應(yīng)）
解決方案：給左邊的加一個(gè)margin-left=-100%，右邊一個(gè)margin-left=-寬長(zhǎng)锰提；
b.左邊定寬曙痘，右邊自適應(yīng)
解決方案：給左邊的加一個(gè)margin-left=-100%

CSS box-sizing

JS數(shù)據(jù)類型

String array number underfined null boolean object

判斷js數(shù)組類型

var a = "iamstring.";

var b = 222;

var c= [1,2,3];

var d = new Date();

var e = function(){alert(111);};

var f = function(){this.name="22";};　
　
var g = true;

1融蹂、最常見(jiàn)的判斷方法：typeof

alert(typeof a) ------------> string

alert(typeof b) ------------> number

alert(typeof c) ------------> object

alert(typeof d) ------------> object

alert(typeof e) ------------> function

alert(typeof f) ------------> function

alert(typeof g) ------------> boolean

其中typeof返回的類型都是字符串形式旺订，需注意，例如：

alert(typeof a == "string") -------------> true

alert(typeof a == String) ---------------> false

如何給元素添加事件

1.在屬性中添加事件名稱
2.js代碼中使用 屬性.事件名=方法
3.js里添加addEventListener;
4.使用Jquery庫(kù)調(diào)用事件

阻止事件冒泡殿较，阻止默認(rèn)行為

e.stopPropagation()
stopPropagation也是事件對(duì)象(Event)的一個(gè)方法耸峭，作用是阻止目標(biāo)元素的冒泡事件，但是會(huì)不阻止默認(rèn)行為淋纲。
什么是冒泡事件劳闹？如在一個(gè)按鈕是綁定一個(gè)”click”事件，那么”click”事件會(huì)依次在它的父級(jí)元素中被觸發(fā) 。
stopPropagation就是阻止目標(biāo)元素的事件冒泡到父級(jí)元素本涕。如：
事件冒泡就是相同事件的元素層疊在一起业汰，事件觸發(fā)由里向外

set-cookie

Set-Cookie由服務(wù)器發(fā)送，它包含在響應(yīng)請(qǐng)求的頭部中菩颖。它用于在客戶端創(chuàng)建一個(gè)Cookie
Cookie頭由客戶端發(fā)送样漆，包含在HTTP請(qǐng)求的頭部中。
注意晦闰，只有cookie的domain和path與請(qǐng)求的URL匹配才會(huì)發(fā)送這個(gè)cookie放祟。
屬性：
secure : 表示cookie只能被發(fā)送到http服務(wù)器。
httponly : 表示cookie不能被客戶端腳本獲取到呻右。

前端性能優(yōu)化 （雅虎軍規(guī)）

http://www.cnblogs.com/xianyulaodi/p/5755079.html
主要部分：
1.減少http請(qǐng)求次數(shù)
合并文件：把所有腳本文件合在一個(gè)文件中跪妥，提高響應(yīng)時(shí)間。

css Sprites ：將背景圖片合并在一張上声滥，通過(guò)background-iamge backgroundp-osition 的屬性來(lái)定位
圖像映射：把多個(gè)圖片合并在一張上眉撵，總大小一樣，但是只有圖像在頁(yè)面中連續(xù)才可使用落塑，所以不好

2.減少DNS查找 如：緩存DNS查找纽疟，減少不同的主機(jī)名
3.避免重定向 如：Apache的Alias，mod_rewrite指令取消不必要的重定向
4.讓Ajax緩存
5.延遲加載組件
最好讓性能目標(biāo)符合其它web開(kāi)發(fā)最佳實(shí)踐憾赁，比如“漸進(jìn)增強(qiáng)”污朽。如果客戶端支持JavaScript，可以提高用戶體驗(yàn)缠沈，但必須確保頁(yè)面在不支持JavaScript時(shí)也能正常工作膘壶。
所以，在確定頁(yè)面運(yùn)行正常之后洲愤，可以用一些延遲加載腳本增強(qiáng)它颓芭，以支持一些拖放和動(dòng)畫(huà)之類的華麗效果。
6.預(yù)加載組件
無(wú)條件預(yù)加載 條件預(yù)加載
7.減少DOM元素?cái)?shù)量
8.少使用iframe
9.杜絕404

css部分

1.不要使用css表達(dá)式
2.盡量使用link 不用@import
3.不要使用濾鏡
4.把css樣式放到head里

js部分

1.去除重復(fù)腳本
2.盡量少用dom節(jié)點(diǎn)
3.把腳本放到底部

js柬赐，css
1.把JavaScript和CSS放到外面
2.壓縮JavaScript和CSS

圖片
1.優(yōu)化圖片
2.不要用HTML縮放圖片
3.用小的可緩存的favicon.ico

cookie
1.清理cookie

服務(wù)器
1.Gzip組件
2.避免圖片src屬性為空
3.對(duì)Ajax用GET請(qǐng)求
4.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
5.添上Expires或者Cache-Control HTTP頭

this

http:www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
指向的是調(diào)用函數(shù)的那個(gè)對(duì)象

例：
var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x);
首先亡问，function的this指向的是全局變量x ，但是 var o = new test(); 將text的this指向o肛宋，所以不會(huì)改變值州藕，x的值為2

面向?qū)ο?

http://www.cnblogs.com/moxia/p/5837546.html

對(duì)稱加密和非對(duì)稱加密

http://www.reibang.com/p/84f092321f88
對(duì)稱加密：加密與解密使用同一種密鑰，速度快但安全性不高
非對(duì)稱加密：加密與解密用公鑰和私鑰酝陈，公鑰加密數(shù)據(jù)發(fā)送后床玻，接收方用私鑰解密
1.私鑰不外泄，可以增加安全性
2.解密的效率會(huì)降低沉帮，是為安全性提高做出犧牲的
3.折中方案：對(duì)稱密鑰發(fā)送前锈死，使用非對(duì)稱加密的公鑰進(jìn)行加密收方使用私鑰進(jìn)行解密得到對(duì)稱加密的密鑰贫堰，然后雙方可以使用對(duì)稱加密來(lái)進(jìn)行溝通。

tcp和http區(qū)別

http://www.cnblogs.com/renyuan/archive/2013/01/19/2867720.html
1.處在的層不一樣： 一個(gè)傳輸層待牵，負(fù)責(zé)數(shù)據(jù)如何在網(wǎng)絡(luò)中傳輸其屏，一個(gè)應(yīng)用層，負(fù)責(zé)包裝數(shù)據(jù)
2.tcp是有狀態(tài)協(xié)議缨该，http無(wú)狀態(tài)協(xié)議

Cookie組成

1.expires 失效時(shí)間
2.path 路徑 只有設(shè)置的那個(gè)路徑文件才能訪問(wèn)cookie
3.domain 域名 只有設(shè)置的域名才能訪問(wèn)
4.secure 安全 必須以安全的通信通道才能得到cookie

缺陷：1.特定的域名下最多有20個(gè)cookie
2.cookie最大4k
3.cookie存在客戶端的文本文件偎行，所以敏感信息不能存cookie，瀏覽器能看見(jiàn)

session token

session:用戶打開(kāi)一個(gè)web應(yīng)用贰拿，會(huì)與web服務(wù)器產(chǎn)生一次session 蛤袒，服務(wù)器會(huì)把用戶信息臨時(shí)保存在服務(wù)器上，到用戶離開(kāi)網(wǎng)站時(shí)session銷毀膨更，比較安全汗盘。

缺陷：如果web服務(wù)器負(fù)載均衡,下一個(gè)操作請(qǐng)求到了另一臺(tái)服務(wù)器的時(shí)候session會(huì)丟失。

token:用戶身份驗(yàn)證
組成：uid(用戶標(biāo)識(shí)) time(時(shí)間戳) sign(用token前幾位+鹽以哈希算法壓縮的字符串询一，防止惡意第三方拼接token請(qǐng)求服務(wù)器)

tcp三次握手

https://www.zhihu.com/question/39541968/answer/81841947
一、什么是TCP連接的三次握手

第一次握手：客戶端發(fā)送syn包(syn=j)到服務(wù)器癌椿，并進(jìn)入SYN_SEND狀態(tài)健蕊，等待服務(wù)器確認(rèn);　第二次握手：服務(wù)器收到syn包，必須確認(rèn)客戶的SYN(ack=j+1)踢俄，同時(shí)自己也發(fā)送一個(gè)SYN包(syn=k)缩功，即SYN+ACK包，此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài);　　
第三次握手：客戶端收到服務(wù)器的SYN+ACK包都办，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1)嫡锌，此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入ESTABLISHED狀態(tài)琳钉，完成三次握手势木。

握手過(guò)程中傳送的包里不包含數(shù)據(jù)，三次握手完畢后歌懒，客戶端與服務(wù)器才正式開(kāi)始傳送數(shù)據(jù)啦桌。理想狀態(tài)下，TCP連接一旦建立及皂，在通信雙方中的任何一方主動(dòng)關(guān)閉連接之前甫男，TCP 連接都將被一直保持下去⊙樯眨　　
斷開(kāi)連接時(shí)服務(wù)器和客戶端均可以主動(dòng)發(fā)起斷開(kāi)TCP連接的請(qǐng)求板驳，斷開(kāi)過(guò)程需要經(jīng)過(guò)“四次握手”(過(guò)程就不細(xì)寫(xiě)了，就是服務(wù)器和客戶端交互碍拆，最終確定斷開(kāi))

Socket連接

建立Socket連接至少需要一對(duì)套接字若治，其中一個(gè)運(yùn)行于客戶端慨蓝，稱為ClientSocket ，另一個(gè)運(yùn)行于服務(wù)器端直砂，稱為ServerSocket 菌仁。套接字之間的連接過(guò)程分為三個(gè)步驟：服務(wù)器監(jiān)聽(tīng)，客戶端請(qǐng)求静暂，連接確認(rèn)济丘。　　
1洽蛀、服務(wù)器監(jiān)聽(tīng)：服務(wù)器端套接字并不定位具體的客戶端套接字摹迷，而是處于等待連接的狀態(tài)，實(shí)時(shí)監(jiān)控網(wǎng)絡(luò)狀態(tài)郊供，等待客戶端的連接請(qǐng)求峡碉。　　
2驮审、客戶端請(qǐng)求：指客戶端的套接字提出連接請(qǐng)求鲫寄，要連接的目標(biāo)是服務(wù)器端的套接字》枰　　為此地来，客戶端的套接字必須首先描述它要連接的服務(wù)器的套接字，指出服務(wù)器端套接字的地址和端口號(hào)熙掺，然后就向服務(wù)器端套接字提出連接請(qǐng)求未斑。　　
3币绩、連接確認(rèn)：當(dāng)服務(wù)器端套接字監(jiān)聽(tīng)到或者說(shuō)接收到客戶端套接字的連接請(qǐng)求時(shí)蜡秽，就響應(yīng)客戶端套接字的請(qǐng)求，建立一個(gè)新的線程缆镣，把服務(wù)器端套接字的描述發(fā)給客戶端芽突，一旦客戶端確認(rèn)了此描述，雙方就正式建立連接费就∷咄撸　　
而服務(wù)器端套接字繼續(xù)處于監(jiān)聽(tīng)狀態(tài)，繼續(xù)接收其他客戶端套接字的連接請(qǐng)求力细。

TCP UDP區(qū)別

http://www.reibang.com/p/219eb040479b
主要區(qū)別：
1.基于連接與無(wú)連接睬澡；
2.對(duì)系統(tǒng)資源的要求（TCP較多，UDP少）眠蚂；
3.UDP程序結(jié)構(gòu)較簡(jiǎn)單煞聪；
4.流模式與數(shù)據(jù)報(bào)模式 ；
5.TCP保證數(shù)據(jù)正確性逝慧，UDP可能丟包昔脯，TCP保證數(shù)據(jù)順序啄糙，UDP不保證。

彈窗如何實(shí)現(xiàn)拖動(dòng)

http://www.cnblogs.com/adventureofraindrop/p/6086298.html

核心的部分云稚，對(duì)話框拖動(dòng)的實(shí)現(xiàn)隧饼，這個(gè)效果的實(shí)現(xiàn)要分為三個(gè)步驟：
1.鼠標(biāo)點(diǎn)擊時(shí)，設(shè)置對(duì)話框可拖動(dòng)静陈，記錄鼠標(biāo)的初始位置燕雁；
2.鼠標(biāo)拖動(dòng)時(shí)，根據(jù)鼠標(biāo)新位置更新對(duì)話框位置（有兩種算法）鲸拥；
3.鼠標(biāo)離開(kāi)時(shí)移出對(duì)話框可拖動(dòng)屬性拐格；

Angularjs優(yōu)缺點(diǎn)

http://blog.csdn.net/pansayho/article/details/59696964
優(yōu)點(diǎn)：

1. 模板功能強(qiáng)大豐富，并且是聲明式的刑赶，自帶了豐富的Angular指令捏浊；
2. 是一個(gè)比較完善的前端MVC框架，包含模板撞叨，數(shù)據(jù)雙向綁定金踪，路由，模塊化牵敷，服務(wù)热康，過(guò)濾器，依賴注入等所有功能劣领；
3. 自定義Directive，比jQuery插件還靈活铁材，但是需要深入了解Directive的一些特性尖淘，簡(jiǎn)單的封裝容易，復(fù)雜一點(diǎn)官方?jīng)]有提供詳細(xì)的介紹文檔著觉，我們可以通過(guò)閱讀源代碼來(lái)找到某些我們需要的東西村生，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入）饼丘，能夠很容易的寫(xiě)出可復(fù)用的代碼趁桃，對(duì)于敏捷開(kāi)發(fā)的團(tuán)隊(duì)來(lái)說(shuō)非常有幫助，我們的項(xiàng)目從上線到目前肄鸽，UI變化很大卫病，在摸索中迭代產(chǎn)品，但是js的代碼基本上很少改動(dòng)典徘。
5. 補(bǔ)充：Angular支持單元測(cè)試和e2e-testing蟀苛。

缺點(diǎn)：
1.驗(yàn)證功能薄弱，不如jquery的validate
2.angularjs太笨重
3.angular并不是完美兼容
4.ngview不能嵌套多試圖

promise如何處理異常

promise是異步處理解決方案逮诲，解決了回調(diào)嵌套的問(wèn)題帜平，promise對(duì)象有三種狀態(tài):pending(進(jìn)行中) 幽告、Resolved(已經(jīng)完成)和Rejected(已失敗)
Promise實(shí)例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)裆甩。

實(shí)現(xiàn)異步編程的原理：在其內(nèi)部使用resolve函數(shù)冗锁，變?cè)瓲顟B(tài)為成功或失敗態(tài)外部監(jiān)聽(tīng)其內(nèi)部的狀態(tài)的改變，調(diào)用then()方法

如果promise里還有一個(gè)promise怎么辦嗤栓？
示例：
var promise=new Promise(function(resolve,reject){
console.log('promise');
})
promise.then(function(){
console.log('我后執(zhí)行')
})
console.log('我先執(zhí)行')

上面代碼中冻河，Promise新建后立即執(zhí)行，所以首先輸出的是“Promise”抛腕。然后芋绸，<code>then</code>方法指定的回調(diào)函數(shù)，
//將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會(huì)執(zhí)行担敌，所以“我后執(zhí)行” 最后輸出摔敛。

Websocket

Websocket是html5新增的特性
瀏覽器通過(guò)js向服務(wù)器發(fā)出建立Websocket的請(qǐng)求，連接建立后全封，服務(wù)器和瀏覽器就可以通過(guò)tcp交換數(shù)據(jù)
可以通過(guò) send() 方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)马昙，并通過(guò) onmessage 事件來(lái)接收服務(wù)器返回的數(shù)據(jù)。

react特點(diǎn)

1.高效 通虛擬dom（render）刹悴，減少dom交互
2.靈活 兼容多種庫(kù)
3.聲明式設(shè)計(jì)
4.組件式設(shè)計(jì) 構(gòu)建組件行楞，使得組件更容易復(fù)用，適合大項(xiàng)目開(kāi)發(fā)
5.單項(xiàng)響應(yīng)數(shù)據(jù)流 有利于數(shù)據(jù)綁定

react的組件通信

子對(duì)父 父組件設(shè)置相關(guān)屬性和方法土匀，子組件使用this.props調(diào)用父組件
父對(duì)子 當(dāng)父組件需要調(diào)用子組件時(shí)子房，添加ref屬性并唯一命名

盒模型

w3c盒模型

盒子實(shí)際寬高
width=content-width;
height=content-height;
盒子占的寬高
width=content-width+padding-width+margin-width+border-width;
height=content-height+padding-height+margin-height+border-height;
ie盒模型

height=content-height+border-height+padding-height
盒子占的寬高
width=content-width+margin-width;
height=content-height+margin-height

CSS文本溢出

text-overflow屬性
屬性值;
hidden(隱藏)
clip(裁剪)
ellipsis(由省略號(hào)代替)

使用overflow為hidden 加 text-overflow為ellipsis可以實(shí)現(xiàn)...代替溢出內(nèi)容

map和forEach區(qū)別

map() 在處理回調(diào)函數(shù)前創(chuàng)建一個(gè)數(shù)組，數(shù)組中的元素是原數(shù)組按順序執(zhí)行回調(diào)函數(shù)后的值
foreach() 原數(shù)組中的元素按順序執(zhí)行回調(diào)函數(shù)后返回到原數(shù)組中,而且元素遍歷時(shí)會(huì)按照既定的遍歷下標(biāo)進(jìn)行遍歷
em:
var words=["one","two","three","four"];
words.forEach(function(word)
{console.log(word);
if(word === "two")
{
words.shift();
}
alert(words);
});
//one two four 因?yàn)閛ne被踢出數(shù)組之后forEach下標(biāo)為1就轧，下一個(gè)為2证杭，對(duì)應(yīng)新數(shù)組的four

浮動(dòng)，清除浮動(dòng)

1.找到浮動(dòng)元素父元素 添加屬性 overflow:hidden
2.在浮動(dòng)元素下 添加屬性 clear:both
3.使用偽元素 “:after”
這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)妒御，他就是利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊解愤，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法乎莉，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽送讲，而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。
.clearfix:after{
　　　　　　content:"";//設(shè)置內(nèi)容為空
　　　　　　height:0;//高度為0
　　　　　　line-height:0;//行高為0
　　　　　　display:block;//將文本轉(zhuǎn)為塊級(jí)元素
　　　　　　visibility:hidden;//將元素隱藏
　　　　　　clear:both//清除浮動(dòng)
　　　　　 }
.clearfix{
　　　　　　zoom:1;為了兼容IE
　　　　 }
或者（推薦）
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}

BFC

觸發(fā)bfc
1.overflow：hidden/auto/scroll
2.float:left/right
3.position:absoluted/fixed
4.display:inline-block, table-cell, table-caption, flex, inline-flex

CORS(跨域資源共享)

http://www.ruanyifeng.com/blog/2016/04/cors.html
http://www.reibang.com/p/52bf8f5b8432
過(guò)程：瀏覽器向跨域服務(wù)器發(fā)出XMLHttpRequest請(qǐng)求惋啃，從而突破Ajax無(wú)法跨域的問(wèn)題
整個(gè)CORS通信過(guò)程哼鬓，都是瀏覽器自動(dòng)完成，如果瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源边灭，就會(huì)自動(dòng)添加一些附加的頭信息魄宏，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺(jué)存筏。

對(duì)于簡(jiǎn)單請(qǐng)求宠互，瀏覽器直接發(fā)出CORS請(qǐng)求味榛，在HTTP HEADER中增加了Origin字段。如下：

POST /nlp/segment HTTP/1.1
Host: 10.1.222.80:8084
Connection: keep-alive
Content-Length: 90
Accept: */*; q=0.01
Origin: http://localhost:63343
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
Content-Type: application/ x-www-form-urlencoded;charset=UTF-8
Referer: http://localhost:63343/BZZZ/bz.html?_ijt=eu8vkf2u50ccl1gshpr4lhjt3r
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8

對(duì)于非簡(jiǎn)單請(qǐng)求予跌，瀏覽器會(huì)先有一個(gè)查詢請(qǐng)求搏色，叫預(yù)檢請(qǐng)求
瀏覽器現(xiàn)詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單中券册，以及可以使用哪些HTTP動(dòng)詞和頭信息字段频轿。
只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求烁焙，否則就報(bào)錯(cuò)航邢。下面是一段瀏覽器的JS腳本：

ar test1 = {method:"segment", format:"json", message:["我是中國(guó)人！","歡迎來(lái)到中國(guó)"]};
$.ajax({
            url : "http://10.1.222.80:8084/nlp/segment",
            type : "post",
            dataType : "json",
            contentType:"application/json;charset=utf-8",
            data :JSON.stringify(test1),
            crossDomain: true,
            /*headers:{
              "Content-Type":"application/x-www-form-urlencoded"
            },*/
            timeout : 10000
});

上面的請(qǐng)求中是Content-Type為application/json的請(qǐng)求骄蝇。瀏覽器認(rèn)為這是一個(gè)非簡(jiǎn)單請(qǐng)求膳殷，自動(dòng)向服務(wù)器發(fā)送一個(gè)預(yù)檢請(qǐng)求，要求服務(wù)器確認(rèn)可以這樣請(qǐng)求九火。下面是預(yù)檢請(qǐng)求的HTTP頭信息：

OPTIONS /nlp/segment HTTP/1.1
Host: 10.1.222.80:8084
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:63343
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://localhost:63343/BZZZ/bz.html?_ijt=eu8vkf2u50ccl1gshpr4lhjt3r
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8

其中origin表示請(qǐng)求所在的域赚窃，而預(yù)檢的請(qǐng)求方法是option，之后包含兩個(gè)特殊字段：
Access-Control-Request-Method CORS請(qǐng)求會(huì)用到什么http方法
Access-Control-Request-Headers CORS請(qǐng)求會(huì)用到什么頭信息字段
當(dāng)服務(wù)器檢查origin岔激，Access-Control-Request-Method勒极，Access-Control-Request-Headers后，確認(rèn)允許跨域請(qǐng)求虑鼎，返回字段

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

Access-Control-Allow-Origin 服務(wù)端接受設(shè)定域名的跨域請(qǐng)求
Access-Control-Allow-Methods 服務(wù)端允許跨域請(qǐng)求的所有方法
Access-Control-Allow-Headers 服務(wù)端支持的頭信息字段

iframe

1.適用場(chǎng)景:
a.加載別的網(wǎng)站內(nèi)容
b.跨域訪問(wèn) document.domain + iframe
c.共享第三方Cookie(還是屬于跨域)
d.左邊固定右邊自適應(yīng)布局

MVC（important）

1.MVC組成
Model ： 處理數(shù)據(jù)與業(yè)務(wù)邏輯辱匿，通常是對(duì)數(shù)據(jù)庫(kù)進(jìn)行存取操作
View ： 處理數(shù)據(jù)的顯示，顯示用戶的界面
Controller 處理用戶請(qǐng)求和應(yīng)用邏輯炫彩，通常負(fù)責(zé)從視圖獲取數(shù)據(jù)掀鹅，控制用戶輸入，向模型發(fā)送數(shù)據(jù)
2.工作流程