在牛客網刷面經，不會的總結一下，當作備份

Ajax和Flash各自優缺點：

Ajax的優勢：1.可搜索性 2.開放性 3.費用 4.易用性 5.易于開發。
Flash的優勢：1.多媒體處理 2.兼容性 3.矢量圖形 4.客戶端資源調度
Ajax的劣勢：1.它可能破壞瀏覽器的后退功能 2.使用動態頁面更新使得用戶難于將某個特定的狀態保存到收藏夾中 ，不過這些都有相關方法解決。
Flash的劣勢：1.二進制格式 2.格式私有 3.flash 文件經常會很大，用戶第一次使用的時候需要忍耐較長的等待時間 4.性能問題

2.解決跨域問題

http://blog.csdn.net/joyhen/article/details/21631833
a.jsonp+script (只支持get 不支持post)
簡述方法：
因為script沒有跨域限制，所以可以使用jsonp動態創建script
b.document.domain + iframe
簡述方法：
我們只要把兩個頁面的document.domain都設成相同的域名就可以了，但是主域要相同
c.CORS（跨域資源共享）
簡述方法：
自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。
d.postmessage
這個功能主要包括接受信息的"message"事件和發送消息的"postMessage"方法。

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

大概步驟如下：
1.html文檔通過html解析和dom規則，生成dom樹
2.css文檔通過css解析，得到css規則
3.dom樹和css規則通過attachment生成渲染樹
4.渲染樹通過布局過程，使每個結點確定在頁面的坐標
5.最通過繪制，每個節點在UI后端層進行繪制，得到最終的網頁

repaint和reflow

http://blog.csdn.net/ClaireKe/article/details/51375622
這個問題主要是在對渲染樹進行布局和繪制中出現的
對dom的每個節點都有盒子模型，瀏覽器通過樣式進行定位是reflow
而對進行繪制的部分就是repaint
注：回流必將引起重繪，而重繪不一定會引起回流。

優化：1.提前寫好css
2.對于需要多次重排的元素讓其脫離文檔流
例：為動畫的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他們的 CSS 是會大大減小 reflow 。
3.不要把 DOM 節點的屬性值放在一個循環里當成循環里的變量
4.少使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。

行內元素能否使用margin和padding

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

布局問題

http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
a.雙飛翼布局（左右定，中間自適應）
解決方案：給左邊的加一個margin-left=-100%，右邊一個margin-left=-寬長；
b.左邊定寬，右邊自適應
解決方案：給左邊的加一個margin-left=-100%

CSS box-sizing

JS數據類型

String array number underfined null boolean object

判斷js數組類型

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、最常見的判斷方法：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庫調用事件

阻止事件冒泡，阻止默認行為

e.stopPropagation()
stopPropagation也是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。
什么是冒泡事件？如在一個按鈕是綁定一個”click”事件，那么”click”事件會依次在它的父級元素中被觸發 。
stopPropagation就是阻止目標元素的事件冒泡到父級元素。如：
事件冒泡就是相同事件的元素層疊在一起，事件觸發由里向外

set-cookie

Set-Cookie由服務器發送，它包含在響應請求的頭部中。它用于在客戶端創建一個Cookie
Cookie頭由客戶端發送，包含在HTTP請求的頭部中。
注意，只有cookie的domain和path與請求的URL匹配才會發送這個cookie。
屬性：
secure : 表示cookie只能被發送到http服務器。
httponly : 表示cookie不能被客戶端腳本獲取到。

前端性能優化 （雅虎軍規）

http://www.cnblogs.com/xianyulaodi/p/5755079.html
主要部分：
1.減少http請求次數
合并文件：把所有腳本文件合在一個文件中，提高響應時間。

css Sprites ：將背景圖片合并在一張上，通過background-iamge backgroundp-osition 的屬性來定位
圖像映射：把多個圖片合并在一張上，總大小一樣，但是只有圖像在頁面中連續才可使用，所以不好

2.減少DNS查找 如：緩存DNS查找，減少不同的主機名
3.避免重定向 如：Apache的Alias，mod_rewrite指令取消不必要的重定向
4.讓Ajax緩存
5.延遲加載組件
最好讓性能目標符合其它web開發最佳實踐，比如“漸進增強”。如果客戶端支持JavaScript，可以提高用戶體驗，但必須確保頁面在不支持JavaScript時也能正常工作。
所以，在確定頁面運行正常之后，可以用一些延遲加載腳本增強它，以支持一些拖放和動畫之類的華麗效果。
6.預加載組件
無條件預加載 條件預加載
7.減少DOM元素數量
8.少使用iframe
9.杜絕404

css部分

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

js部分

1.去除重復腳本
2.盡量少用dom節點
3.把腳本放到底部

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

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

cookie
1.清理cookie

服務器
1.Gzip組件
2.避免圖片src屬性為空
3.對Ajax用GET請求
4.使用CDN（內容分發網絡）
5.添上Expires或者Cache-Control HTTP頭

this

http:www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
指向的是調用函數的那個對象

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

面向對象

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

對稱加密和非對稱加密

http://www.lxweimin.com/p/84f092321f88
對稱加密：加密與解密使用同一種密鑰，速度快但安全性不高
非對稱加密：加密與解密用公鑰和私鑰，公鑰加密數據發送后，接收方用私鑰解密
1.私鑰不外泄，可以增加安全性
2.解密的效率會降低，是為安全性提高做出犧牲的
3.折中方案：對稱密鑰發送前，使用非對稱加密的公鑰進行加密收方使用私鑰進行解密得到對稱加密的密鑰，然后雙方可以使用對稱加密來進行溝通。

tcp和http區別

http://www.cnblogs.com/renyuan/archive/2013/01/19/2867720.html
1.處在的層不一樣： 一個傳輸層，負責數據如何在網絡中傳輸，一個應用層，負責包裝數據
2.tcp是有狀態協議，http無狀態協議

Cookie組成

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

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

session token

session:用戶打開一個web應用，會與web服務器產生一次session ，服務器會把用戶信息臨時保存在服務器上，到用戶離開網站時session銷毀，比較安全。

缺陷：如果web服務器負載均衡,下一個操作請求到了另一臺服務器的時候session會丟失。

token:用戶身份驗證
組成：uid(用戶標識) time(時間戳) sign(用token前幾位+鹽以哈希算法壓縮的字符串，防止惡意第三方拼接token請求服務器)

tcp三次握手

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

第一次握手：客戶端發送syn包(syn=j)到服務器，并進入SYN_SEND狀態，等待服務器確認;　第二次握手：服務器收到syn包，必須確認客戶的SYN(ack=j+1)，同時自己也發送一個SYN包(syn=k)，即SYN+ACK包，此時服務器進入SYN_RECV狀態;　　
第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1)，此包發送完畢，客戶端和服務器進入ESTABLISHED狀態，完成三次握手。

握手過程中傳送的包里不包含數據，三次握手完畢后，客戶端與服務器才正式開始傳送數據。理想狀態下，TCP連接一旦建立，在通信雙方中的任何一方主動關閉連接之前，TCP 連接都將被一直保持下去。　　
斷開連接時服務器和客戶端均可以主動發起斷開TCP連接的請求，斷開過程需要經過“四次握手”(過程就不細寫了，就是服務器和客戶端交互，最終確定斷開)

Socket連接

建立Socket連接至少需要一對套接字，其中一個運行于客戶端，稱為ClientSocket ，另一個運行于服務器端，稱為ServerSocket 。套接字之間的連接過程分為三個步驟：服務器監聽，客戶端請求，連接確認。　　
1、服務器監聽：服務器端套接字并不定位具體的客戶端套接字，而是處于等待連接的狀態，實時監控網絡狀態，等待客戶端的連接請求。　　
2、客戶端請求：指客戶端的套接字提出連接請求，要連接的目標是服務器端的套接字。　　為此，客戶端的套接字必須首先描述它要連接的服務器的套接字，指出服務器端套接字的地址和端口號，然后就向服務器端套接字提出連接請求。　　
3、連接確認：當服務器端套接字監聽到或者說接收到客戶端套接字的連接請求時，就響應客戶端套接字的請求，建立一個新的線程，把服務器端套接字的描述發給客戶端，一旦客戶端確認了此描述，雙方就正式建立連接。　　
而服務器端套接字繼續處于監聽狀態，繼續接收其他客戶端套接字的連接請求。

TCP UDP區別

http://www.lxweimin.com/p/219eb040479b
主要區別：
1.基于連接與無連接；
2.對系統資源的要求（TCP較多，UDP少）；
3.UDP程序結構較簡單；
4.流模式與數據報模式 ；
5.TCP保證數據正確性，UDP可能丟包，TCP保證數據順序，UDP不保證。

彈窗如何實現拖動

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

核心的部分，對話框拖動的實現，這個效果的實現要分為三個步驟：
1.鼠標點擊時，設置對話框可拖動，記錄鼠標的初始位置；
2.鼠標拖動時，根據鼠標新位置更新對話框位置（有兩種算法）；
3.鼠標離開時移出對話框可拖動屬性；

Angularjs優缺點

http://blog.csdn.net/pansayho/article/details/59696964
優點：

1. 模板功能強大豐富，并且是聲明式的，自帶了豐富的Angular指令；
2. 是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
3. 自定義Directive，比jQuery插件還靈活，但是需要深入了解Directive的一些特性，簡單的封裝容易，復雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對于敏捷開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動。
5. 補充：Angular支持單元測試和e2e-testing。

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

promise如何處理異常

promise是異步處理解決方案，解決了回調嵌套的問題，promise對象有三種狀態:pending(進行中) 、Resolved(已經完成)和Rejected(已失敗)
Promise實例生成以后，可以用then方法分別指定Resolved狀態和Reject狀態的回調函數。

實現異步編程的原理：在其內部使用resolve函數，變原狀態為成功或失敗態外部監聽其內部的狀態的改變，調用then()方法

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

上面代碼中，Promise新建后立即執行，所以首先輸出的是“Promise”。然后，<code>then</code>方法指定的回調函數，
//將在當前腳本所有同步任務執行完才會執行，所以“我后執行” 最后輸出。

Websocket

Websocket是html5新增的特性
瀏覽器通過js向服務器發出建立Websocket的請求，連接建立后，服務器和瀏覽器就可以通過tcp交換數據
可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。

react特點

1.高效 通虛擬dom（render），減少dom交互
2.靈活 兼容多種庫
3.聲明式設計
4.組件式設計 構建組件，使得組件更容易復用，適合大項目開發
5.單項響應數據流 有利于數據綁定

react的組件通信

子對父 父組件設置相關屬性和方法，子組件使用this.props調用父組件
父對子 當父組件需要調用子組件時，添加ref屬性并唯一命名

盒模型

w3c盒模型

盒子實際寬高
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(由省略號代替)

使用overflow為hidden 加 text-overflow為ellipsis可以實現...代替溢出內容

map和forEach區別

map() 在處理回調函數前創建一個數組，數組中的元素是原數組按順序執行回調函數后的值
foreach() 原數組中的元素按順序執行回調函數后返回到原數組中,而且元素遍歷時會按照既定的遍歷下標進行遍歷
em:
var words=["one","two","three","four"];
words.forEach(function(word)
{console.log(word);
if(word === "two")
{
words.shift();
}
alert(words);
});
//one two four 因為one被踢出數組之后forEach下標為1，下一個為2，對應新數組的four

浮動，清除浮動

1.找到浮動元素父元素 添加屬性 overflow:hidden
2.在浮動元素下 添加屬性 clear:both
3.使用偽元素 “:after”
這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。
.clearfix:after{
　　　　　　content:"";//設置內容為空
　　　　　　height:0;//高度為0
　　　　　　line-height:0;//行高為0
　　　　　　display:block;//將文本轉為塊級元素
　　　　　　visibility:hidden;//將元素隱藏
　　　　　　clear:both//清除浮動
　　　　　 }
.clearfix{
　　　　　　zoom:1;為了兼容IE
　　　　 }
或者（推薦）
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}

BFC

觸發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.lxweimin.com/p/52bf8f5b8432
過程：瀏覽器向跨域服務器發出XMLHttpRequest請求，從而突破Ajax無法跨域的問題
整個CORS通信過程，都是瀏覽器自動完成，如果瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

對于簡單請求，瀏覽器直接發出CORS請求，在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

對于非簡單請求，瀏覽器會先有一個查詢請求，叫預檢請求
瀏覽器現詢問服務器，當前網頁所在的域名是否在服務器的許可名單中，以及可以使用哪些HTTP動詞和頭信息字段。
只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。下面是一段瀏覽器的JS腳本：

ar test1 = {method:"segment", format:"json", message:["我是中國人！","歡迎來到中國"]};
$.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
});

上面的請求中是Content-Type為application/json的請求。瀏覽器認為這是一個非簡單請求，自動向服務器發送一個預檢請求，要求服務器確認可以這樣請求。下面是預檢請求的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表示請求所在的域，而預檢的請求方法是option，之后包含兩個特殊字段：
Access-Control-Request-Method CORS請求會用到什么http方法
Access-Control-Request-Headers CORS請求會用到什么頭信息字段
當服務器檢查origin，Access-Control-Request-Method，Access-Control-Request-Headers后，確認允許跨域請求，返回字段

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 服務端接受設定域名的跨域請求
Access-Control-Allow-Methods 服務端允許跨域請求的所有方法
Access-Control-Allow-Headers 服務端支持的頭信息字段

iframe

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

MVC（important）

1.MVC組成
Model ： 處理數據與業務邏輯，通常是對數據庫進行存取操作
View ： 處理數據的顯示，顯示用戶的界面
Controller 處理用戶請求和應用邏輯，通常負責從視圖獲取數據，控制用戶輸入，向模型發送數據
2.工作流程