個人前端面試總結

一、js基本數據類型

（1）javaScript的基本數據類型包括：Boolean、Number、String、Null、Undefined.
（2）Es6中添加了新的數據類型Symbol數據類型。

二、原始值和引用值的區別

（1）原始值包括：undefined，null,boolean,number,String,Symbl
引用數據類型：Object（除了基本數據類型以外，其餘數據都是引用數據類型，包括函數，對象。
（2）二者之間的區別在於 ：一、基本數據類型的值是不能改變 二、基本數據類型是不能添加屬性和方法 三、基本數據類型的賦值就是簡單值賦值 四、基本數據類型之間的比較就是簡單的值之間的比較.
（3） 引用數據類型：一、引用數據類型的值是能夠改變的，二、能夠添加屬性和方法 三、引用數據類型的賦值是指針的賦值，4引用數據類型之間的比較是地址之間的比較，是否相同。
1、基本數據類型是指存放棧中簡單的數據段，數據大小肯定，內存空間能夠分配，他們是按值存放，因此能夠直接訪問
2、引用類型引用類型是存放在堆內存中的對象，變量實際上是保存在棧內存中一個指針，這個指針指向堆內存，引用數據類型在棧中存的變量實際上是在堆中對象的引用地址，經過這個引用地址能夠快速找到保存中的對象。

三、深拷貝和淺拷貝的區別

深拷貝和淺拷貝的區別在因而否獲取到了一個真實的複製對象，而不是一個引用，深拷貝會在計算機內存中開闢一個空間用來存放複製對象，而淺拷貝僅僅指被拷貝的地址，若是源地址的對象被修改了，那麼淺拷出來的地址也會被修改。

淺拷貝實現的方法：（1）使用for .... in實現第一層的淺拷貝 （2）直接賦值（3）object.assign()

深拷貝實現的方法：（1）使用遞歸來拷貝全部級的屬性（2）json來拷貝json.stringify(json.parse()) 缺點在於沒法實現對象中方法拷貝會顯示undefined,(3)jquery中extend方法也能夠實現深度拷貝（4）lodash函數實現深度拷貝（5）用concat來實現數據的深度拷貝

四、js中判斷數據類型的方法

js中判斷數據類型的方法

(1)第一種方法typeof來判斷方法 typeof能夠返回number 、boolean、String、null、undefined,null返回的是object是一個空對象，function會返回function，undefined會返回undefined，

(2)constructor能夠判斷，可是null和undefined是沒法判斷的

(3)instanceof只適合對象的檢測，不適合簡單數據類型的檢驗

instanceof實現的原理 A instanceof B 左邊是一個實例，右邊是一個構造函數， instaceof會檢測右邊構造函數的原型對象prototype是否在左邊的實例的原型鏈上，有則返回true，沒有則返回false.

(4)jQuery.type()——稱之爲萬能能夠判斷全部數據類型並且是正確的

五、箭頭函數與普通函數的區別

箭頭函數與普通函數的區別

第一點也是最重要的一點就是this指向的問題：

（1）箭頭函數this指向他所在定義的對象中；普通函數this指向誰調用它的對象.

（2）箭頭函數語法比較簡潔

（3）箭頭函數沒有原型的概念，普通函數具備原型。

（4）箭頭函數沒有argruments參數，只有rests剩餘參數。

六、塊級做用域與函數做用域的區別

（1）在調用函數做用域的時候，函數執行完畢，做用域就會被銷燬，在函數做用域中能夠訪問全局的變量；而全局訪問不到函數做用域的變量；在函數做用域中能夠重複聲明一個變量，存在變量提高。

 （2）聲明的變量在塊級做用域中有效，一旦離開了塊級做用中，該變量就會銷燬；let 不容許在相同的做用域內重複聲明一個變量，不然會報錯；不存在變量聲明提早，若是在聲明以前使用，則會報錯。

七、對象便利的方法

for ...in 遍歷可枚舉的數據，object.keys（）object.value()這些方法
如何判斷是否是數組？
1.instanceof的方式倆來判斷是否是數組
2.isArray
3.constructor

八、js判斷對象是否爲空對象的幾種方法

1.將json對象轉化爲json字符串，再判斷該字符串是否爲"{}"

var data = {};

var b = (JSON.stringify(data) == "{}");

alert(b);//true

2.for in 循環判斷

var obj = {};

var b = function() {

for(var key in obj) {

return false;

}

return true;

}

alert(b());//true

3.jquery的isEmptyObject方法

此方法是jquery將2方法(for in)進行封裝，使用時須要依賴jquery

var data = {};

var b = $.isEmptyObject(data);

alert(b);//true

4.Object.getOwnPropertyNames()方法

此方法是使用Object對象的getOwnPropertyNames方法，獲取到對象中的屬性名，存到一個數組中，返回數組對象，咱們能夠經過判斷數組的length來判斷此對象是否爲空

注意：此方法不兼容ie8，其他瀏覽器沒有測試

var data = {};

var arr = Object.getOwnPropertyNames(data);

alert(arr.length == 0);//true

5.使用ES6的Object.keys()方法

與4方法相似，是ES6的新方法, 返回值也是對象中屬性名組成的數組

var data = {};

var arr = Object.keys(data);

alert(arr.length == 0);//true

九、類數組與數組的區別與轉換

類數組與數組的區別與轉換

區別：類數組（1）具備length屬性，可是不具備數組所具備的方法，它的索引是非負數的

類數組轉換爲數組：

 （1）第一種方法，對於類數組進行遍歷，依次放入到了一個空數組中

  （2）第二種方法使用擴展運算符或者是Array.from

十、數組常見的Api

對於數組的操做 push 入棧，pop出棧，shift刪除數組的第一個，unshift，添加數組的第一個

slice不會改變原來的數組，第一參數開始截取的索引，第二個參數截取的結束索引

splice 改變原數組 第一個開始的地址，第二個刪除的數的個數，第三添加的

concat 鏈接數組 不改變原數組

indexOf 永遠返回找到第一個數組的索引， 

include 包含關係

fliter 過濾器 find 

map forEach循環遍歷

其中有一個小的知識點：

for  in 和for of forEach ,for in 用來遍歷可枚舉的屬性 經常使用來遍歷對象，遍歷的是鍵名，forEach 不能使用return，continue,break, for of用來遍歷的數組，遍歷的鍵值。

十一、bind、call、apply的區別

call 、bind、apply都是用來改變this的指向

call和apply的區別在於第二個參數，apply傳遞的是一個數組，call傳遞的一個數，

他們和bind的區別在於call,apply會就當即調用，bind不會當即調用，會返回一個綁定函數，執行須要再次調用

十二、new的原理

new的原理

第一步 會在函數種建立一個空的對象

第二部 設置新對象的）_proto_指向構造函數的原型

第三步 綁定this 使函數種的this指向新實例對象

第四步 將初始化完畢的對象的地址賦給左邊的變量。

1三、如何正確判斷this？

如何正確判斷this？

this的指向包括五種：

一、默認綁定，

不管是否在嚴格模式下，在全局執行環境中，普通函數還有定時器的this都指向window

node 環境：

不管是否在嚴格模式下，在全局執行環境中（在任何函數體外部），this 都是空對象 {}

二、隱式綁定

當函數引用有上下文對象時，隱式綁定規則會把函數中的this綁定到這個上下文對象

隱式綁定某些狀況下的this會指向window或者undefined

三、顯示綁定

call,apply,bind 綁定中，this指向的就是綁定的對象【稱爲硬綁定】

四、new綁定

五、箭頭函數this

箭頭函數有兩個方面的做用：更簡短的函數而且不綁定this。

箭頭函數沒有本身的this，繼承外層上下文綁定的this。

1四、閉包及其做用

閉包：可以讀取其餘函數內部變量的函數，咱們稱爲閉包

做用：能夠間接調用函數內部的局部變量，可讓這些變量的值始終存儲在內存中，能夠暫存數據,給變量開闢私密空間,避免外部污染

1五、原型和原型鏈

1、原型是function對象的一個屬性，它定義構造函數製造出的對象的公共對象，能夠繼承修改原型的屬性。原型也是對象。更加通俗的理解就是每個javascript對象在建立的時候，都會與其餘對象相關聯。每一個對象都會繼承原型的屬性_proto_ ：每個對象除了null以外都有了這個屬性，這個屬性都會指向原型

2、原型鏈：每個構造函數都有一個原型對象，原型對象都有包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。那麼假設咱們冉安哥原型對象等於另外一個類型的實例，此時原型對象將包含另外一個原型的指針，相應的，另外一個原型中也包含着一個指向另外一個構造函數。加入另外一個原型又是另外一個原型的實例，那麼上述關係依然成立。如此層層遞進，就構成了實例域原型的鏈條。

1六、繼承的實現方式及比較

第一種繼承方式

原型鏈繼承

很常見的繼承方式：

 function Animal(name)

        {

            this.name=name

        }

        function Cat()

        {

            console.log(this.name)

        }

        Cat.prototype=new Animal('動物')

        let cat=new Cat();

        console.log(cat.name)

特色：

一、很是純粹的繼承關係，實例是子類的實例，也是父類的實例

二、父類新增長的方法/屬性，子類咱們均可以訪問到

三、簡單，易於實現

缺點：

一、要想爲子類新增長和方法，必需要在new Animal()這樣語句以後執行，不能放到構造器中

二、沒法實現多繼承

三、來自原型對象的全部屬性被全部實例共享

四、子類建立實例的時候，沒法向構造函數傳遞參數

構造繼承

核心：使用父類的構造函數來加強子類實例，等於複製父類的實例屬性給子類

function Cat()

{

     Animal.call(this)

}

特色：

一、解決了1中，子類實例共享父類引用的問題

二、建立子類實例時，能夠向父類傳遞參數

三、能夠實現多繼承

缺點：

一、實例並非父類的實例，只是子類的實例。

二、只能繼承父類的實例屬性和方法，不能繼承原型的屬性/方法

三、沒法實現函數複用，每一個子類都有父類的實例函數的副本，影響性能

實例繼承

核心：爲父類實例添加新特性，做爲子類返回

function Cat(name)

{

    var instance =new Animal();

    instance.name=name

    return instance

}

特色：

一、不限致調用方式，無論是new 子類（）仍是子類（），返回對象具備相同的效果

缺點：

一、實例是父類的實例，不是子類的實例

二、不支持多繼承

拷貝繼承

function Cat(){

  var animal=new Animal();

   for(var p in animal)

   {

      Cat.prototype[p]=animal[p];

   }

  Cat.prototype.name=name

}

特色：

 一、支持多繼承

缺點：

一、效率低，內存佔用高

二、沒法獲取父類不可枚舉的方法

組合繼承

核心：經過調用父類構造，繼承父類的屬性而且保留傳參的優勢，而後經過父類實例做爲子類原型，實現函數複用。

特色：

一、彌補了方式2的缺陷，能夠繼承實例屬性/方法，也能夠繼承

如何實現屬性的私有的方法和屬性

第一種方法，經過雙方統一約定—_name這樣的形式，可是不可靠。
第二種方法，就是經過閉包實現的。
使用閉包和特權函數實現私有屬性的定義和訪問是不少開發者採用的方種方式。可是這種方式存在一些缺陷：
私有變量和特權函數只能在構造函數中建立。一般來說，構造函數的功能只負責建立新對象，方法應該共享於prototype上。特權函數本質上是存在於每一個實例中的，而不是prototype上，增長了資源佔用。
第三種方法，weakMap實現。
第四種方法是經過Symbol

1七、節流和防抖

節流和防抖

函數防抖：

當持續觸發事件時，必定時間內沒有再觸發事件，事件處理纔會執行一次，若是設定時間到來以前，又觸發事件，就從新開始延時。也就是說當一個用戶一直觸發這個函數，且每一次出發函數小於既定事件，那麼防抖的請跨國下指揮執行一次。

當持續觸發事件，保證在必定時間內只調用一次時間處理函數，假設一個用戶一直觸發這個函數，且每次胡出發小於即定值，

應用場景：

• debounce
• search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。
• window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次
• throttle
• 鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)
• 監聽滾動事件，好比是否滑到底部自動加載更多，用throttle來判斷

1八、做用域和做用域鏈、執行期上下文

執行上下文環境：

通俗的來講就是在代碼執行以前，把要用到的全部變量，都事先拿出來，有的直接複製，有的先用undefined先佔着

執行上下文能夠理解爲做用域，可是二者之間又有區別：

一、全局做用以外，每個函數都會建立本身的做用域，做用域在函數定義時已經確認了，而不是函數在帶哦用時。

全局執行上下文是在全局做用肯定以後，js代碼立刻執行以前建立。

做用域是靜態的，只要定義好了以後就一直存在，而且不在發生改變，而且不在發生變化。

執行上下文時動態的，調用函數建立，調用極少數後就自動釋放了

做用域：就是變量和函數訪問的範圍。

上下文：主要是關鍵字this的值，這個是由函數運行時決定的，簡單來講就是誰調用此函數，this就指向誰。

做用域鏈：做用域鏈本質上是一個指向當前環境與上層環境的一系列變量對象的指針列表（它只引用但不實際包含變量對象），做用域鏈保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。也就是咱們所指[[scope]]中執行上下文的集合，。

1九、DOM常見的操做方式

dom的增刪改查：

 dom的查找：

  getELementById()//返回匹配指定id屬性的元素節點。

  getElementsByTagname//返回匹配指定html標籤的元素

  getElementsByClassname//返回匹配指定class屬性的元素節點

document.getElementsByName(name) //用於選擇擁有name屬性的HTML元素（好比<form>、<radio>、<img>、<frame>、<embed>和

<object>等）

ocument.querySelector(selectors) //接受一個CSS選擇器做爲參數，返回第一個匹配該選擇器的元素節點。

document.querySelectorAll(selectors) //接受一個CSS選擇器做爲參數，返回全部匹配該選擇器的元素節點。

https://www.cnblogs.com/huan0317/p/9225707.html詳情請打開此鏈接

20、Ajax的請求過程

Ajax的請求過程

ajax是客戶端與服務器異步通訊的技術

第一步 建立xmlhttprequest對象，IE瀏覽器存在兼容性問題 xmlhttp=new xmlhttprequest

第二步 向服務器發送請求

「GET，POST」

xmlhttp.open("post",url,true);

第三步 執行回調函數

xmlhttp,onreadystatechanfe=function()

  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) { //就能夠執行相應的操做 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }

   }

readystate值

0--------------請求未初始化

1---------------服務器已創建

2--------------發送請求‘

3--------------請求處理中

4--------------請求已完成，且響應就緒

狀態碼就緒：

200 服務器成功返回

301 臨時定向

304 緩存

404 資源找不到

ajax的優勢

1、無刷新更新數據

2、異步與服務端通訊

3、先後端負載均衡。(減輕服務器的負擔，AJAX的原則是「按需取數據」， 能夠最大程度的減小冗餘請求和響應對服務器形成的負擔)

4、基於標準被普遍支持

5、界面與應用分離

ajax的缺點：一、幹掉back和history,破壞了瀏覽器機制

二、ajax自己有安全問題

三、違背了url和統一資源定位的初衷

四、客戶端過肥，太多客戶端代碼形成了開發成本的問題

2一、js垃圾回收機制

一、js的垃圾回收機制有兩種形式一種是標記清楚發和引用計數法。

標記清除法，簡單的來講就是給各個變量名打上YES or NO的標籤。在和執行上下文相似的環境中當變量名進入環境的時候，那麼變量會被打上YES.通常來講是絕對不會釋放被打上yes的標籤，一旦變量出了環境就會被打上NO的標籤，js引擎會在必定時間或者設置必定時間來進行掃描，對NO標籤進行剔除以及釋放其內存。

二、引用計數法：引用技術的含義是跟蹤紀律每個值被引用的次數。當聲明一個變量並將一個引用類型值賦給變量時，則這個值的引用次數即是1，若是同一個值又被賦給另外一個之，則該值的引用次數加一，相反，若是包含對這個值引用的變量又取得另外一個值，則這個值引用次數減一，當這個值的引用次數爲0時，說明沒有辦法訪問它，於是能夠將其佔據的內存空間收回

2二、addEventListener和onClick()的區別

addEventListener和onClick()的區別

js事件綁定有三種方法：

一、行內綁定

二、動態綁定

三、事件監聽

1、行內綁定

<標籤 屬性列表 事件=「事件的處理程序」/>

2、動態綁定

基本語法：

dom對象.事件=事件的處理程序

dom綁定和行內綁定的區別在於dom綁定的對象是dom對象this--->dom，行內綁定指定的是window

addEventlistener 來綁定的，有三個參數，第一個監聽的時間名，第二個回調函數，第三個true事件捕獲，false事件冒泡

2二、new和Object.create的區別

new和Object.create的區別

咱們建立對象的方法  有兩種Object.create和new兩種方式

new的全過程是用構造函數，先建立一個空對象，而後將對象的_pro_to指向構造函數的原型，綁定this，是構造函數中this指向該實例。

Object.create = function (Base) {

var F = function () {};

F.prototype = Base;

return new F();

};

以下圖所示，首先建立一個空函數F，函數的prototype指向Base函數。new一個函數的實例，即讓該實例的_proto_指向函數F的prototype，也就是Base函數，最後將該實例返回。即經過Object.create建立的對象o2，實際上完成了o2._proto_ = Base的操做。注意傳入的參數Base2是一個對象。若是傳入的是一個構造函數的話，該實例是沒法繼承的。

2三、DOM的location對象

DOM的location對象
navigator的做用
-navigator對象的做用包含有官瀏覽器的信息，經常使用於獲取客戶端和瀏覽器，經常使用屬性
-location對象包含有關當前URL的信息，經常使用於獲取和改變當前瀏覽器的網址
window.location.href='';
history對象包含用戶（在瀏覽器窗口中）訪問過url的歷史記錄
length 返回瀏覽器歷史列表中url數量
back（）加載history列表中的前一個URL。
forward () 加載列表中的下一個url
go() 加載history列表中的某一個列表

2四、CSRF(跨域請求站點僞造)

csrf攻擊者在用戶登陸目標網站以後,誘使用戶點擊攻擊界面，以用戶信息在攻擊界面向目標網站發起請求的時候，達到攻擊目標。CSRF攻擊是源於web的隱式身份驗證機制！web的身份驗證雖然能夠保證一個請求是來源於某一個用戶的瀏覽器，可是卻沒法保證該請求是用戶批准發送的。csrf攻擊的通常是服務器來解決。

scrf的危害：盜取或者修改帳號，我的身份信息泄露以及財產安全，對於用戶的帳號進行操做

CSRF工具的防護手段

（1）儘可能使用post請求，少用get請求？

（2）驗證referer(HTTP Refere是header的一部分，當瀏覽器向web服務器發送請求的時候，會帶上Refere,經過驗證Referrer,能夠判斷請求的合法性，若是Referer是其餘網站的話，就有多是CSRF,則拒絕該請求)

（3）驗證碼（驗證碼，強制用戶必需要與用戶進行交互，才能完成最終請求）

  四、使用token（這個Token的值必需要是隨機，不可預測的。因爲Token的存在，攻擊者沒法再構造一個帶有合法Token的請求）

2五、瀏覽器從輸入URL到頁面渲染的整個流程（涉及到計算機網絡數據傳輸過程、瀏覽器解析渲染過程）

在瀏覽器輸入一個地址回車以後，該請求會被轉發到DNS服務器，DNS服務器解析域名

DNS域名解析

根DNS服務器 >頂級域名服務器>  權威DNS服務器>二級域名服務器

在瀏覽器中輸入url按下回車的整個過程

一、把輸入的url域名dns解析稱爲ip地址

二、瀏覽器向IP法案送請求信息（包括請求頭Request Headers和請i去Request Body）

三、服務器向瀏覽器迴應一個響應頭（）

1.先向本地dns緩存查看有沒有該域名對應的ip地址，有直接跳出，沒有接着往下

　　2.向根dns服務器詢問域名對應的ip地址(根dns服務器會讓他去查詢頂級dns服務器)

　　3.向頂級dns服務器詢問域名對應的ip地址(頂級dns服務器會讓他去查詢權威dns服務器)

　　4.向權威dns服務器詢問域名對應的ip地址(權威dns服務器會讓他去查詢二級dns服務器)

　　5.向二級dns服務器詢問域名對應的ip地址(二級dns服務器會返回對應的ip地址)

　　6.接收到ip地址後，會先把ip和域名對應關係保存到本地dns緩存，以便下次方便訪問

在服務的短由web Server來接受請求，=並進行相應的處理，而後響應結果給客戶端瀏覽器

瀏覽器接收到響應的結果，並進行相應的語法檢查，若是由錯誤，可能會提示錯誤，若是沒有錯誤，就進行渲染

渲染的時候生成DOM樹，而後更具css和js生成渲染樹（渲染樹中的結構每每比DOM樹要少，由於有些dom樹中元素若是隱藏的話，不會出如今渲染樹中）最後再渲染出來

2六、script屬性中的defer,async

都能實現異步加載，延遲加載js

defer下載完成以後等着，dom結構渲染完成（也就是頁面解析完成），才執行，理論上能夠保證文件執行順序

async 下載完成以後當即執行，不能保證文件加載順序

2七、DocType

<!DOCTYPE>對於大小並不銘感，它須要聲明在HTML文檔的第一行，位於html標籤以前，

<!DOCTYPE>聲明的並非HTML標籤，它是指示web瀏覽器關於頁面使用那個HTML版本進行編寫.

在HTML 4.01中，<DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於 SGML，因此不須要引用 DTD。 DOCTYPE都是標準的文檔類型，不管使用哪一種模式完整定義DOCTYPE，都會 觸發標準模式，而若是DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異 模式（quirks 模式）

2八、css常見的兼容性問題

一、雙倍浮動bug

描述：塊狀元素在設置float屬性以後，有設置橫向的margin值，在IE6下顯示的margin值比設置的值大；

解決方案：給float的元素添加一個display：inline；將其轉換爲內聯元素

二、表單元素行高不一致

解決方案：

  一、給表單元素添加vertical-align:middle

  二、給表單元素添加float：left；

三、IE6默認16px爲最小不識別較小高度的標籤 （通常爲10px）

解決方案

  一、給標籤添加overflow：hidden;

二、給標籤添加font-size：0

四、圖片添加超連接時，在IE瀏覽器中會有藍色的邊框

解決方案：border：0或者border：none

五、最小高度不兼容IE6

解決方案：

 一、min-height:100px;_height:100px;

二、min-height:100px,height:auto !importang;height:100px

六、圖片有間隙：

解決方案：

  一、給img添加float屬性；

 二、img添加display：block；
### 2八、H5的新特性總結
1.新增長的選擇器document.queryselect和document.queryselectall這二者的區別在於，第一個獲得一個dom元素，另外一個獲得一個類數組。

2.本地存儲localstorage和sessionStorage

3.語義化標籤例如header、footer、section等標籤

4.全雙工通訊webscket

5.跨域資源共享CORS Access-Control-Allow-Origin

6.跨窗口通訊postmessage

7.回話canvas

8.加強表單控件calendar、date、time、email、url

2九、dispaly、position、float之間的關係與相互做用

（1）display屬性規定元素生成框的類型。較爲常見的有none-缺省值（用於隱藏元素，元素會消失於視界和文檔流中），block-塊級元素，inline-block-行內塊級元素，list-item列表樣式塊級元素……….

（2）position屬性規定元素的定位類型，經常使用於佈局。static-默認值，元素出如今正常文檔流中（此時不受top、left、right、bottom、z-index等屬性影響）；absolute-絕對定位，脫離文檔流，相對於它第一個非static父元素進行定；fixed-固定定位，相對於瀏覽器窗口進行定位；relative生成相對定位的元素，相對於其正常文檔流中的位置進行定位。

（3）float屬性，定義一個元素浮動方向，最初用於圖像使文本環繞，如今是一種佈局方式。不論浮動元素自己是何種框類型，浮動後會生成一個塊級框。

1.display值爲none

當元素display值爲none時，元素不產生框，float和position都不起做用。

2.position是absolute或fixed

當元素display值不爲none，而position是absolute或者fixed時，此時float不起做用，計算值也爲none（原文中有計算方法，這裏略去），display值會按上表設置。元素框的位置由top、left、right、bottom值和其父元素決定。

3.float值不爲none

當元素有了浮動屬性（float不爲none，是left或right）後，該框浮動且display值會按上表轉換。例如，span是行內元素，設置浮動後會變爲塊級元素。

4.元素爲根元素

若是元素是根元素，設置的display也會按上表進行轉換。不然，元素的display值爲指定值或默認值。

30、Css3的新特性

一：css3選擇器

1 .基本選擇器

2.屬性選擇器

3.僞類選擇器

二：css3邊框和圓角

1.css3圓角border-radius

2.盒陰影box-shadow

三：css3背景和漸變

background-image

四：css變化

定義：讓一個元素在一個座標中變形，這個屬性包含着一系列的函數變化，能夠移動，旋轉，縮放元素。

五：css3過分

定義：容許你css的屬性值在必定時間區內平滑的過分，在鼠標滑過或者元素任何改變中觸發。

六：css3動畫

定義：使元素從一種樣式逐漸變化成另外一種樣式。

less語法總結

變量：能夠將屬性的值賦值給一個變量，變量爲徹底的常量，因此只能定義一次
混合：將一些通用的屬性放在一個class中，而後在例外一個class中去調用這些屬性。任何的class和id或是元素均可以用這樣的方式進行引入。 嵌套規則:
運算:（1）任何數字、顏色均可以參與運算（2）less運算可以分辨顏色和單位
函數:（1）less自己提供了一系列的顏色運算函數。顏色會被轉化成爲HSL色彩空間，而後在通道級別操做。

less與sass的區別

一、less

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展，它能夠運行在 Node 或瀏覽器端。

二、sass

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 、嵌套 、混合  、導入  等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass  的樣式庫（如Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目。

2、less和sass的相同之處

Less和Sass在語法上有些共性，好比下面這些：

一、混入(Mixins)——class中的class；

二、參數混入——能夠傳遞參數的class，就像函數同樣；

三、嵌套規則——Class中嵌套class，從而減小重複的代碼；

四、運算——CSS中用上數學；

五、顏色功能——能夠編輯顏色；

六、名字空間(namespace)——分組樣式，從而能夠被調用；

七、做用域——局部修改樣式；

八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

3、less和sass的區別

Less是基於JavaScript，是在客戶端處理的。

Sass是基於Ruby的，是在服務器端處理的。

關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$。

輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

Sass支持條件語句，能夠使用if{}else{},for{}循環等等，而Less不支持。

3一、Display：none和visibility：hidden

1.display：none 讓元素渲染樹種中消失，可是不佔具任何空間。visibility：hidden不會讓元素從渲染樹種消失，消失仍然佔據空間，只是內容不可見

2.display:none;是非繼承屬性，子孫節點消失是由於元素在渲染樹中消失了，經過修改子孫元素的屬性沒法將他們顯示出來；visibility:hidden;是繼承屬性，子孫元素消失是由於繼承了hidden屬性，將他們設置爲visible時，這些子孫元素能夠顯示出來。

3.讀屏器不會讀取display:none;的元素內容，會讀取visibility:hidden;內容。

4.display:none;會引發迴流和重繪，visibility:hidden;會引發重繪。

3二、CSS的繼承和層疊

css具備繼承的特性，例如父元素設置了字體顏色，子元素的字體顏色和父元素是同樣的；

css具備層疊性：

1. 按權重和來源排序

2. 按特殊性排序

3. 按順序排序

3三、CSS Moudle

、CSS 的規則是全局的，任何一個組件的樣式規則，都對整個頁面有效。相信寫css的人都會遇到樣式衝突（污染）的問題。

二、爲了解決全局污染的問題，那就把class命名寫長一點吧、加一層父級選擇器、下降衝突的概率，那麼CSS命名混亂了

三、組件依賴管理不完全，組件應該相互獨立，引入一個組件時，應該只引入它所須要的 CSS 樣式。

四、代碼難以複用，出現了sass less 之類的工具

3四、Let 和const的區別

et 定義變量，const（定義常量）塊級做用域之對於let，const有用 ，arrow箭頭函數，class，promise，map，set，結構賦值，

（1）let,const ，若是區塊中存在let,const命令，則這個區塊對這些命令的變量聲明的變量，從一開始造成封閉做用域。只要在聲明以前使用這些就會報錯，就造成了暫時性死區。

（2）const 實際上保證的並非變量值的值不得改動，而是保證變量指向的那個的內存地址不得改動。對基本數據類型來講，值就保存在內存地址空間中，因同等於常量。但對於複合類型的數據主要是對象和數組，變量指向的內存空間保存的是一個地址，const只能保證地址空間不變，而至於他所指的數據結構是沒法控制的

3五、Git面試題

1）git 中有工做區、緩存區、本地倉庫，遠程倉庫

（2）git add 提交到緩存區，能夠使用使用git status來查看工做區狀態

（3）git commit -m '精神' 提交到本地倉庫

git push -u orign master

拉去合併分支的操做：git fetch/git merge或者git pull

(4)這裏有個重點：

git fetch 和git pull 的區別

一、git fetch 至關因而從遠程獲取最新版本到本地，不會自動merge，

二、git pull 至關於從遠程獲取最新版本並merge到本地，在實際使用中，git fetch更安全一些

(5)操做失誤，撤銷操做 git reset

(6)git stash 使用狀況是

1、解決衝突問題，會先執行git stash ，而後解決衝突

2、遇到緊急開發任務但目前任務不能提交時，會先執行git stash ,r而後進行緊急任務的開發，而後經過git stash pop 取出戰區的內容繼續開發

3、 切換分支時，當前工做空間內容不能提交時，會先執行git stash 再進行分支切換

（7）git log 查看分支提交的歷史記錄

（8）能不能說一下git fetch和git pull命令之間的區別

簡單的來講就是git fetch branch 是把名爲branch的遠程分支拉取到本地；而git pull branch是在fetch的基礎上，把branch分支與當前的分支進行merge ;所以 pull=fetch+merge

(9)使用過git merge和git rebase 嗎？ 他們之間有什麼區別嗎

git merge和git rebase都是合併分支的命令

git merge branch會把branch分支的差別內容pull到本地，而後與本地分支的內容一併造成一個committer對象提交到主分支上，合併後的分支與主分支一致；

git rebase branch會把branch分支優先合併到主分支，而後把本地分支的commit放在主分支後面，合併後就好像從合併後主分支又拉一個分支同樣，本地分支自己不會保留提交歷史。

3六、promise

一個promise可能有三種狀態：等待（pending）、已完成（resolved），已拒絕（reject）;

一個promise的狀態只能從''等待'狀態轉到「完成」或者"拒絕",不能逆向轉換，同時「完成」態和拒絕態不能相互轉換

Promise.then(接受兩個回調函數)，解決函數嵌套的問題

有promises對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套.

Promise 的all方法提供了並行執行異步操做的能力，而且在全部異步操做執行完成才執行回調。傳入的是一個數組

Promise.race,誰執行的快，以誰爲準。

3七、post、get區別

他是http請求方式的兩種

get是請求，post是提交

get的數據較小主要是收到地址欄的限制，post的數據量很大

get是在請求頭，放在地址欄不安全，post是在包體裏，相對安全

http請求方式有8種請求方式

options 容許客戶端查看服務器性能

1、爲何會出現options請求呢？

 跨域請求中，options請求是瀏覽器自發起的preflight request(預檢請求)，以檢測實際請求是否能夠被瀏覽器接受。

preflight request請求報文中有兩個須要關注的首部字段：

（1）Access-Control-Request-Method：告知服務器實際請求所使用的HTTP方法；

（2）Access-Control-Request-Headers：告知服務器實際請求所攜帶的自定義首部字段。

同時服務器也會添加origin header,告知服務器實際請求的客戶端的地址。服務器基於從預檢請求得到的信息來判斷，是否接受接下來的實際請求。

服務器所返回的Access-Control-Allow-Methods首部字段將全部容許的請求方法告知客戶端，返回將全部Access-Control-Request-Headers首部字段將全部容許的自定義首部字段告知客戶端。此外，服務器端可返回Access-Control-Max-Age首部字段，容許瀏覽器在指定時間內，無需再發送預檢請求，直接用本次結果便可。

在咱們開發過程當中出現的瀏覽器自發起的options請求就是上面的第二種狀況。實際上，跨域請求中的」複雜請求」發出前會進行一次方法是options的preflight request。

2、當跨域請求是簡單請求時不會進行preflight request,只有複雜請求才會進行preflight request。

跨域請求分兩種：簡單請求、複雜請求；

符合如下任一狀況的就是複雜請求：

1.使用方法put或者delete;

2.發送json格式的數據（content-type: application/json）

3.請求中帶有自定義頭部；

除了知足以上條件的複雜請求其餘的就是簡單請求嘍！

3、爲何跨域的複雜請求須要preflight request？

複雜請求可能對服務器數據產生反作用。例如delete或者put,都會對服務器數據進行修改,因此在請求以前都要先詢問服務器，當前網頁所在域名是否在服務器的許可名單中，服務器容許後，瀏覽器纔會發出正式的請求，不然不發送正式請求。

Access-Control-Allow-Credentials", "true"跨域攜帶容許

get  請求指定頁面，並返回實體主體

head 相似get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭

post 向指定資源提交數據進行處理（例如提交表單或者上傳文件）數據被包含在請求中，post請求請求可能會致使資源的創建和已有資源的修改

put 從客戶端向服務器傳送的數據取代指定的文檔內容

delete 請求服務器刪除指定頁面

connect http1.1協議中預留給可以未來凝結改造爲管道方式的代理服務器

trace 回顯服務器收到的請求，主要用於測試或診斷

3八、跨域問題

跨域問題的存在主要是由於存在js同源協議，同源的條件：

一、協議相同

二、端口相同

三、域名相同

同源政策的目的爲了保證用戶信息的安全，防止惡意的網站竊取數據。

第一種解決辦法：jsonp

img 的src屬性，link 的src屬性，還有script 的src屬性不遵照同源策略。

原理就是利用script能夠加載能夠跨域加載別的域文件，建立一個回調函數而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參 數傳遞，完成回調。

第二種方法：document.domain+iframe跨域

實現原理：兩個頁面都是經過js強制設置document.domain爲基礎主語，就實現了同域

第三種實現方法 location.hash+iframe跨域

實現原理 a欲與b跨域相互通訊，經過中間頁來實現。三個頁面，不一樣域之間利用iframe 的location.hash傳值，相同域之間直接用js訪問通訊

具體實現：A域：a.html ->B域：b.html->A域：c.html,a與b不一樣域之間只能經過hash值單向通訊，b與c也不一樣域也只能單項通訊，但c與a同域，因此可經過parent.parent訪問a頁面全部對象

第四種實現方法

window.name+iframe;

window.name屬性的獨特之處：name值在不一樣的頁面（設置在不一樣域名）加載以後，依舊存在，而且能夠支持很是常name的值

五 h5的新特性 postMessage

postMessage 是HTML 5XMLRequest Level 的API,且是位數很少能夠跨域操做的window屬性之一，它能夠用於解決一下問題

一、頁面和其打開的新窗口的數據傳遞

二、多窗口之間消息傳遞

三、頁面與嵌套的iframe消息傳遞

用法：postMessage(data,origin)方法接受兩個參數

data： html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。

origin： 協議+主機+端口號，也能夠設置爲"*"，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"

第六種方法 COMET(這是一種高級AJAX技術 常常也有人稱爲「服務器推送」技術)

第七種方法：CORS

它容許瀏覽器向跨域服務器，發出XMLHtttpRequest請求，從而克服了ajax只能夠在同源中使用的限制

實現CORS通訊的關鍵在於服務器，只要服務器實現CORS接口，就能夠跨域通訊，對於簡單請求，瀏覽器直接發出CORS請求。具體來講就是在頭信息中增長一個Origin字段

非簡單請求是那種對服務器有特殊要求的請求，好比說請求的方式是PUT或者DELETE,或者Content-Type字段的類型是application/json.

非簡單請求的cors請求，會在正式通訊以前，增長一次http查詢請求，稱爲預檢，瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器可許的名單之中，以及能夠使用哪些HTTP信息字段。只有獲得確定以後，瀏覽器纔會發出正式XMLhttpRequest請求，

jsonp只支持GET請求，CORS支持全部類型的HTTP請求，

第八種方法 WebSocket協議跨域

websocket 是HTML5一種新協議，它實現了服務器和瀏覽器全雙工通訊，同時容許跨域通信。

重點：

cookie和session的區別

一、存儲位置不一樣

cookie 的數據信息存放在客戶端瀏覽器上

session的數據信息存放在服務器上

二、存儲容量不一樣

單個cookie保存的數據<=4kb，一個站點最多保存20個cookie

session 大約有5M

三、cookie能夠跟隨着前臺請求發送到後端，session不行

四、session的運行依賴session_id ，而session_id存放在cookie，若是瀏覽器禁止了cookie的話，咱們session將沒法運行

五、安全問題

cookie對於客戶端來講是可見的，別有用心的人，能夠分析本地cookie,進行cookie欺騙，因此它是不安全的

session存儲在服務器上，對於客戶端來講是透明，不存在敏感信息泄露的風險

六、cookie支持跨域訪問，session不支持跨域訪問

cookie 和sessionstorage localstorage的區別

一、有效期不一樣：sessionStorage 當瀏覽器關閉以前有效，localstorage 始終有效果，不管瀏覽器是否關閉，

cookie 只要設置的事件不過時就一致存在，不管是否關閉瀏覽器

二、做用域不一樣 sessionStorage 不在不一樣瀏覽器共享，即便在同一個頁面，local storage和cookie都是在全部同源窗口均可以訪問。

三、大小cookie的大小爲4k,sessionStorage和lcoalstorage大小爲5M,cookie能夠在瀏覽器和服務器之間來回切換，sessionStorage和cookieStorage不會把數據發送給服務器，僅在本地保存，cookie數據具備路徑的概念path。

3九、Canvas和SVG

canvas

一、依賴分辨率（標量）

二、不支持事件處理器，不能被抓取

三、弱化文本能力

四、能夠最終保存爲圖片png或者jpg

五、最適合許多對象頻繁重畫的圖形遊戲

svg

一、獨立於分辨率（矢量）

二、支持事件處理器

三、最適合具備大面積渲染的應用

四、複雜圖像，重畫變慢

五、不適合遊戲開發

40、websocket

基於TCP/ip協議 雙向的，全雙工通訊

雙向的 客戶端、服務端

全雙工：數據的接受與發送，二者同步

<首先Websocket是ws協議,可是是基於HTTP協議的，借用了HTTP的協議來完成一部 分握手。這段相似HTTP協議的握手請求中，多了幾個東西。 這個就是Websocket的核心了，告訴 Apache 、 Nginx 等服務器：注意啦，我發 起的是Websocket協議，快點幫我找到對應的助理處理~不是那個老土的HTTP。 至此，HTTP已經完成它全部工做了，接下來就是徹底按照Websocket協議進行了。 可是Websocket只須要一次HTTP握手，因此說整個通信過程是創建在一次鏈接/狀 態中，也就避免了HTTP的非狀態性，服務端會一直知道你的信息，直到你關閉請 求，這樣就解決了接線員要反覆解析HTTP協議，還要查看identity info的信息。 服務端就能夠主動推送信息給客戶端啦!> 在傳統的方式上，要不斷的創建，關閉HTTP協議，因爲HTTP是非狀態性的，每次 都要從新傳輸 identity info （鑑別信息），來告訴服務端你是誰。

long poll： 客戶端發起鏈接後，若是沒消息，就一直不返回Response給客戶端。直到有消息 才返回，返回完以後，客戶端再次創建鏈接，周而復始。 其實原理跟 ajax輪詢 差很少，都是採用輪詢的方式，不過採起的是阻塞模型 （一直打電話，沒收到就不掛電話）

ajax輪詢 須要服務器有很快的處理速度和資源。(速度）long poll 須要有很高 的併發 哦對了，忘記說了HTTP仍是一個狀態協議。 通俗的說就是，服務器由於天天要接待太多客戶了，是個健忘鬼，你一掛電話， 他就把你的東西全忘光了，把你的東西全丟掉了。你第二次還得再告訴服務器一 遍。

4一、http和https的區別

一、https協議須要ca證書，通常免費證書較少，須要必定費用

二、http是超文本傳輸協議，https是具備安全性的ssl加密傳輸協議

三、http和https是徹底不一樣的鏈接方式，用的端口也不同，http是80端，https默認是443

2三、http緩存機制

前端緩存分爲兩類，一類是瀏覽器緩存，另外一類是http緩存

http緩存只能緩存get請求響應的資源，第二次請求時，瀏覽器判斷這些請求參數，命中強緩存就直接200，不然就把請求參數加到request header頭中傳給服務器，看是否命中協商緩存，命中則返回304，不然服務器會返回新的資源。

http緩存分爲強緩存和協商緩存；強緩存包括：progma和cache-control expires  http狀態嗎200

協商緩存包括   Etag\If-not-match last-modifid/if-modified-Since 返回狀態是304.

    強制緩存在緩存數據未失效的狀況下（即Cache-Control的max-age沒有過時或者Expires的緩存時間沒有過時），那麼就會直接使用瀏覽器的緩存數據，不會再向服務器發送任何請求。強制緩存生效時，http狀態碼爲200。

    當第一次請求時服務器返回的響應頭中沒有Cache-Control和Expires或者Cache-Control和Expires過時還或者它的屬性設置爲no-cache時(即不走強緩存)，那麼瀏覽器第二次請求時就會與服務器進行協商，與服務器端對比判斷資源是否進行了修改更新。若是服務器端的資源沒有修改，那麼就會返回304狀態碼，告訴瀏覽器能夠使用緩存中的數據，這樣就減小了服務器的數據傳輸壓力。若是數據有更新就會返回200狀態碼，服務器就會返回更新後的資源而且將緩存信息一塊兒返回。跟協商緩存相關的header頭屬性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）請求頭和響應頭須要成對出現。

    當瀏覽器第一次向服務器發送請求時，會在響應頭中返回協商緩存的頭屬性：ETag和Last-Modified,其中ETag返回的是一個hash值，Last-Modified返回的是GMT格式的最後修改時間。而後瀏覽器在第二次發送請求的時候，會在請求頭中帶上與ETag對應的If-Not-Match，其值就是響應頭中返回的ETag的值，Last-Modified對應的If-Modified-Since。服務器在接收到這兩個參數後會作比較，若是返回的是304狀態碼，則說明請求的資源沒有修改，瀏覽器能夠直接在緩存中取數據，不然，服務器會直接返回數據。

響應狀態碼，200(from disk cache)，200（from memory cache），304的區別？

200 from memory cache

不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程後，也就是瀏覽器關閉之後，數據將不存在。

可是這種方式只能緩存派生資源。

200 from disk cache

不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據仍是存在。

這種方式也只能緩存派生資源

304 Not Modified

訪問服務器，發現數據沒有
更新，服務器返回此狀態碼。而後從緩存中讀取數據。

4二、MVVM、MVC、MVP區別

MVVM,將數據模型數據雙向綁定的思想做爲核心，由於在view和model之間沒有關聯，經過viewModel進行交互，並且Model和viewModel之間交互是雙向的，所以視圖的數據的變化同時修改數據源，而數據源的變化會當即反映在View上。

MVC是比較直觀的架構，用戶操做->View（負責接受用戶的輸入操做）->(數據持久化)->View（將結構反饋給view）

MVP:MVP是把MVC中的Controller換成了Presenter（呈現），目的就是爲了徹底切 斷View跟Model之間的聯繫，由Presenter充當橋樑，作到View-Model之間通訊的 徹底隔離。

4三、移動端頁面的寫法|移動適配你瞭解多少

第一種方法：經過媒體查詢的方式來完成適配

第二種方式：flex佈局的方式  {高度固定死，寬度自適應，單位都採用px爲單位}

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

第三種方式：rem+viewport

第四種方式：rem

如何來撰寫rem;

假設咱們以320*758爲手稿的話，假設咱們這是html font-size大小爲16px ，那麼設計稿/font-szie=20    在這裏1rem=16px;

咱們能夠隨時的獲取到屏幕寬度，而後除以這個倍數，就能夠達到適配

媒體查詢：經過查詢設備的寬度來執行不一樣的css代碼，最終到達界面的配置。

移動端延遲300ms的緣由以及解決方法

一、緣由是由於雙擊縮放的問題，因爲用戶能夠進行雙擊縮放或者是單擊跳轉頁面，當用戶一次點擊屏幕以後，瀏覽器不能當即判斷用戶是肯定打開這個鏈接仍是想進行雙擊操做，因此等待300ms來判斷
解決方法：
1、#### faskclickhttps://github.com/ftlabs/fastclick
原理: 在檢測到touchend事件的時候，會經過DOM自定義事件當即出發模擬一個click事件，並把瀏覽器在300ms以後真正的click事件阻止掉
2、 禁用遊覽器縮放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

代表這個頁面是不可縮放的，那雙擊縮放的功能就沒有意義了，此時瀏覽器能夠禁用默認的雙擊縮放行爲而且去掉300ms的點擊延遲。
這個方案有一個缺點，就是必須經過徹底禁用縮放來達到去掉點擊延遲的目的，然而徹底禁用縮放並非咱們的初衷，咱們只是想禁掉默認的雙擊縮放行爲，這樣就不用等待300ms來判斷當前操做是不是雙擊。可是一般狀況下，咱們仍是但願頁面能經過雙指縮放來進行縮放操做，好比放大一張圖片，放大一段很小的文字。
3、更改默認的視口寬度

<meta name="viewport" content="width=device-width">

一開始，由於雙擊縮放主要是用來改善桌面站點在移動端瀏覽體驗的。 隨着發展示在都是專門爲移動開發專門的站點，這個時候就不須要雙擊縮放了，因此移動端瀏覽器就能夠自動禁掉默認的雙擊縮放行爲而且去掉300ms的點擊延遲。若是設置了上述meta標籤，那瀏覽器就能夠認爲該網站已經對移動端作過了適配和優化，就無需雙擊縮放操做了。
這個方案相比方案一的好處在於，它沒有徹底禁用縮放，而只是禁用了瀏覽器默認的雙擊縮放行爲，但用戶仍然能夠經過雙指縮放操做來縮放頁面。

什麼是點擊穿透？

假如頁面上有兩個元素A和B。B元素在A元素之上。咱們在B元素的touchstart事件上註冊了一個回調函數，該回調函數的做用是隱藏B元素。咱們發現，當咱們點擊B元素，B元素被隱藏了，隨後，A元素觸發了click事件。

這是由於在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏以後，隔了300ms，瀏覽器觸發了click事件，可是此時B元素不見了，因此該事件被派發到了A元素身上。若是A元素是一個連接，那此時頁面就會意外地跳轉。

4四、babel的原理（es6轉換爲es5）

ES6代碼輸入 ==》 babylon進行解析 ==》 獲得AST

==》 plugin用babel-traverse對AST樹進行遍歷轉譯 ==》 獲得新的AST樹

==》 用babel-generator經過AST樹生成ES5代碼

session和token的區別

當用戶第一次經過瀏覽器使用用戶名和密碼來訪問服務器，服務器驗證用戶數據，驗證成功以後再服務端寫入session數據，向客戶端瀏覽器返回sessionid，瀏覽器將sessionid保存在cookie中，當用戶再次訪問服務器時，會攜帶sessionid,服務器會拿着sessionid從數據庫中獲取數據，而後對於用戶查詢信息，查詢到，就會將查詢到的用戶信息返回，從而實現狀態保持。

缺點：

一、服務器壓力增大

一般session是存儲在內存中，每個用戶經過認證以後都會將數據保存在服務器內存中，而當用戶量增大時，服務器壓力增大。

二、csrf跨站點請求僞造

session是基於cookie進行用戶識別的，cookie若是被截取，用戶就會很容易受到跨站帶你請求僞造的攻擊

三、擴展性不強

若是未來搭建了多個服務器，雖然每一個服務器都執行的是一樣的業務邏輯，可是session數據是保存在內存中的（不是共享的），用戶第一次訪問的是服務器1，當用戶再次請求時可能訪問的是另一臺服務器2，服務器2獲取不到session信息，就斷定用戶沒有登錄過。

token認證機制

token與session不一樣主要在於認證成功以後，會對當前用戶數據進行加密，生成一個加密字符串token返回給客戶端，

瀏覽器會將接收到的token值存儲在localstorage中，再次訪問服務器的時候將加密後的token帶上，服務器進行解密。解密以後對於用戶數據查詢，他不要服務器去保留用戶的認證信息或者會話信息，這意味着token不須要考慮登陸那一臺服務器。具備良好的擴展性。

https的原理

HTTPS協議是由SSL+HTTP協議構建的可進行 加密傳輸、身份認證的網絡協議，比http協議安全。
一個HTTPS請求實際上包含了兩次HTTP傳輸，能夠細分爲8步。

1.客戶端向服務器發起HTTPS請求，鏈接到服務器的443端口

2.服務器端有一個密鑰對，即公鑰和私鑰，是用來進行非對稱加密使用的，服務器端保存着私鑰，不能將其泄露，公鑰能夠發送給任何人。

3.服務器將本身的公鑰發送給客戶端。

4.客戶端收到服務器端的公鑰以後，會對公鑰進行檢查，驗證其合法性，若是發現發現公鑰有問題，那麼HTTPS傳輸就沒法繼續。嚴格的說，這裏應該是驗證服務器發送的數字證書的合法性，關於客戶端如何驗證數字證書的合法性，下文會進行說明。若是公鑰合格，那麼客戶端會生成一個隨機值，這個隨機值就是用於進行對稱加密的密鑰，咱們將該密鑰稱之爲client key，即客戶端密鑰，這樣在概念上和服務器端的密鑰容易進行區分。而後用服務器的公鑰對客戶端密鑰進行非對稱加密，這樣客戶端密鑰就變成密文了，至此，HTTPS中的第一次HTTP請求結束。

5.客戶端會發起HTTPS中的第二個HTTP請求，將加密以後的客戶端密鑰發送給服務器。

6.服務器接收到客戶端發來的密文以後，會用本身的私鑰對其進行非對稱解密，解密以後的明文就是客戶端密鑰，而後用客戶端密鑰對數據進行對稱加密，這樣數據就變成了密文。

7.而後服務器將加密後的密文發送給客戶端。

8.客戶端收到服務器發送來的密文，用客戶端密鑰對其進行對稱解密，獲得服務器發送的數據。這樣HTTPS中的第二個HTTP請求結束，整個HTTPS傳輸完成。

xss攻擊 跨站點腳本攻擊

跨站腳本攻擊分爲三類

基於反射的xss

基於存儲的xss

基於dom的xss

XSS就是經過在用戶端注入惡意的可運行腳本，若服務端對用戶的輸入不進行處理，直接將用戶的輸入輸出到瀏覽器，而後瀏覽器將會執行用戶注入的腳本。 因此XSS攻擊的核心就是瀏覽器渲染DOM的時候將文本信息解析成JS腳本從而引起JS腳本注入，那麼XSS攻擊的防護手段就是基於瀏覽器渲染這一步去作防護。只要咱們使用HTML編碼將瀏覽器須要渲染的信息編碼後，瀏覽器在渲染DOM元素的時候，會自動解碼須要渲染的信息，將上述信息解析成字符串而不是JS腳本，這就是咱們防護XSS攻擊的核心想法。

預防：

一、獲取用戶的輸入，不用innerHtml,用innerText.

二、對用戶的輸入進行過濾，如對& < > " ' /等進行轉義

八、正則表達式

一、+ 表示 前面的字符至少出現一次

二、* 表示 前面的字符能夠不出現，也能夠出現一次或者屢次

三、？表示前面的字符最多隻能夠出現一次

$ 匹配輸入字符串的結尾位置

（） 表示一個子表達式的開始和結束位置

HTTP1.0/1.1/2.0的區別

一、TTP1.1默認使用長鏈接，可有效減小TCP的三次握手開銷。
二、HTTP 1.1支持只發送header信息(不帶任何body信息)，若是服務器認爲客戶端有權限請求服務器，則返回100，不然返回401。客戶端若是接受到100，纔開始把請求body發送到服務器。這樣當服務器返回401的時候，客戶端就能夠不用發送請求body了，節約了帶寬。另外HTTP還支持傳送內容的一部分。這樣當客戶端已經有一部分的資源後，只須要跟服務器請求另外的部分資源便可。這是支持文件斷點續傳的基礎。
三、HTTP1.0是沒有host域的，HTTP1.1才支持這個參數。
四、HTTP2.0使用多路複用技術(Multiplexing),多路複用容許同時經過單一的 HTTP/2 鏈接發起多重的請求-響應消息。
五、"HTTP1.1在同一時間對於同一個域名的請求數量有限制，超過限制就會阻塞請求"。多路複用底層採用"增長二進制分幀層"的方法，使得不改變原來的語義、首部字段的狀況下提升傳輸性能，下降延遲。
二進制分幀將全部傳輸信息分割爲更小的幀，用二進制進行編碼，多個請求都在同一個TCP鏈接上完成，能夠承載任意數量的雙向數據流。HTTP/2更有效的使用TCP鏈接，獲得性能上的提高。

性能優化

前端爲何要性能優化：這是由於咱們每一次向服務器發出請求的話，都會加大服務器的壓力；
優化的方法：
（1）減小http請求{例如CSS sprite圖片懶加載}
1、css sprite如何實現連接：其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個
2、懶加載的實現
就是咱們把圖片的地址放在，img自定義的屬性中，當該圖片出如今咱們視野中的時候，要把自定義屬性的值傳遞給，src,就這樣完成了懶加載
（2）使用CDN
若是應用程序web服務器離用戶更近，那麼一個HTTP請求的響應時間將縮短。另外一方面，若是組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。

 CDN（內容發佈網絡）是一組分佈在多個不一樣地理位置的Web服務器，用於更加有效地向用戶發佈內容。在優化性能時，向特定用戶發佈內容的服務器的選擇基於對網絡慕課擁堵的測量。例如，CDN可能選擇網絡階躍數最小的服務器，或者具備最短響應時間的服務器。

CDN還能夠進行數據備份、擴展存儲能力，進行緩存，同時有助於緩和Web流量峯值壓力。

CDN的缺點：

一、響應時間可能會受到其餘網站流量的影響。CDN服務提供商在其全部客戶之間共享Web服務器組。

二、若是CDN服務質量降低了，那麼你的工做質量也將降低

三、沒法直接控制組件服務器
CDN的基本原理是普遍採用各類緩存服務器，將這些緩存服務器分佈到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工做正常的緩存服務器上，由緩存服務器直接響應用戶請求。
（3）添加Expires頭
頁面的初次訪問者會進行不少HTTP請求，可是經過使用一個長久的Expires頭，能夠使這些組件被緩存，下次訪問的時候，就能夠減小沒必要要的HTPP請求，從而提升加載速度。

Web服務器經過Expires頭告訴客戶端能夠使用一個組件的當前副本，直到指定的時間爲止。例如：

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺點： 它要求服務器和客戶端時鐘嚴格同步；過時日期須要常常檢查

HTTP1.1中引入Cache-Control來克服Expires頭的限制，使用max-age指定組件被緩存多久。

Cache-Control： max-age=12345600

若同時制定Cache-Control和Expires，則max-age將覆蓋Expires頭
（4）將樣式表放在頭部
首先說明一下，將樣式表放在頭部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現，改善用戶體驗，防止「白屏」。

咱們老是但願頁面可以儘快顯示內容，爲用戶提供可視化的回饋，這對網速慢的用戶來講是很重要的。

將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現。爲了不當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，形成「白屏」。這源自瀏覽器的行爲：若是樣式表仍在加載，構建呈現樹就是一種浪費，由於全部樣式表加載解析完畢以前務虛會之任何東西
（5）將腳本放在底部
更樣式表相同，腳本放在底部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現。

js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），因此script標籤放在首屏範圍內的HTML代碼段裏會截斷首屏的內容。

下載腳本時並行下載是被禁用的——即便使用了不一樣的主機名，也不會啓用其餘的下載。由於腳本可能修改頁面內容，所以瀏覽器會等待；另外，也是爲了保證腳本可以按照正確的順序執行，由於後面的腳本可能與前面的腳本存在依賴關係，不按照順序執行可能會產生錯誤。
（6）避免CSS表達式
（7）壓縮css,js代碼

4五、webpack能幹什麼

把模塊開發所建立的文件打包成一整份文件，以便瀏覽器環境中執行，

能夠分析模塊開發時所配置的文件依賴，使打包好的文件能夠有序的執行

提供各類loader，能夠處理各類非js類型的資源文件，一併構建打包。

在狗仔過程當中，能夠經過插件處理一些額外的功能。

提供一個開發服務器，方便開發過程當中在服務器環境中預覽頁面，實現免刷新，熱替換等功能

4六、webpack構建流程（原理）

從啓動構建到輸出結果一系列過程：

（1）初始化參數：解析webpack配置參數，合併shell傳入和webpack.config.js文件配置的參數，造成最後的配置結果。

（2）開始編譯：上一步獲得的參數初始化compiler對象，註冊全部配置的插件，插件監聽webpack構建生命週期的事件節點，作出相應的反應，執行對象的 run 方法開始執行編譯。

（3）肯定入口：從配置的entry入口，開始解析文件構建AST語法樹，找出依賴，遞歸下去。

（4）編譯模塊：遞歸中根據文件類型和loader配置，調用全部配置的loader對文件進行轉換，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理。

（5）完成模塊編譯並輸出：遞歸完過後，獲得每一個文件結果，包含每一個模塊以及他們之間的依賴關係，根據entry配置生成代碼塊chunk。

（6）輸出完成：輸出全部的chunk到文件系統。

注意：在構建生命週期中有一系列插件在作合適的時機作合適事情，好比UglifyPlugin會在loader轉換遞歸完對結果使用UglifyJs壓縮覆蓋以前的結果。

4七、happypack 原理 【多進程打包 又講了下進程和線程的區別】

本質上， happypack 是用經過 js 的多進程來實現打包加速，須要注意的是，建立子進程和子進程和主進程之間通訊也是有開銷的，當你的 loader 很慢的時候，能夠加上 happypack，不然，可能會編譯的更慢！

happypack工做原理

happypack 經過new HappyPack(),去實例化一個HappyPack對象，其實就是告訴Happypack核心調度器如何經過一系列loader去轉換一類文件，而且能夠指定如何爲這類轉換器做分配子進程。

核心調度器的邏輯代碼在主進程裏，也就是運行webpack的進程中，核心調度器會將一個個任務分配給當前空閒的子進程，子進程處理完後會將結果發送給核心調度器，它們之間的數據交換是經過進進程間的通信API實現的。

核心調度器收到來自子進程處理完畢的結果後，會通知webpack該文件已經處理完畢

此處必然會問：進程和線程的關係：進程是操做系統資源分配的基本單位；線程是操做系統執行和調度的基本單位

(1)每個進程都有獨立代碼和數據空間，程序切換開銷比較大。（2）線程能夠看做爲輕量級的進程。同一類線程共享代碼和數據空間，每個線程擁有獨立的程序計數器和運行棧，切換開銷較小。

(1)一個操做系統能夠擁有多個進程  （2）一個進程能夠擁有多個線程

(1)進程能夠分配資源       (2)線程不分配資源，共享進程中的資源

Vue和React的區別

、二者監聽數據變化的實現原理不一樣

vue 經過getter/setter以及一些數據劫持，可以精確制導數據變化

React默認經過比較的方式（diff）進行，若是不優化可能會致使大量沒必要要的VDOM的從新渲染。Vue使用的是可變的數據，React強調的是數據的不能夠變

二、數據流的不一樣

React使用的單項數據流

Vue的雙向數據綁定

三、組件通訊

vue中有三種通訊方式，父組件經過props傳遞給子組件，子組件經過$emit傳遞消息給父組件，跨組件通訊能夠使用provide/inject來。

React也有三種通訊方式，父組件經過props傳遞消息給子組件，子組件經過父組件傳遞的函數進行通訊。context跨組件通訊

四、模板渲染方式不一樣

React模板渲染更接近原生js的寫法

Vue更加依賴於指令來實現的

五、渲染過程不一樣

Vue能夠更加快速計算虛擬DOM的擦會議，這是因爲他在渲染的過程當中，會跟蹤每個租金按的依賴關係，不須要從新渲染整個樹

7.框架本質不一樣

Vue本質是MVVM框架，由MVC發展而來；

React是前端組件化框架，由後端組件化發展而來

Redux使用的是不可變數據，而Vuex的數據是可變的，所以，Redux每次都是用新state替換舊state，而Vuex是直接修改。Redux在檢測數據變化的時候，是經過diff的方式比較差別的，而Vuex其實和Vue的原理同樣，是經過getter/setter來比較的，這兩點的區別，也是由於React和Vue的設計理念不一樣。React更偏向於構建穩定大型的應用，很是的科班化。相比之下，Vue更偏向於簡單迅速的解決問題，更靈活，不那麼嚴格遵循條條框框。所以也會給人一種大型項目用React，小型項目用Vue的感受。

4八、MVVM的原理

mvvm:響應式，雙向數據綁定，即MVVM。是指數據層-視圖層-view 數據視圖viewmodel的響應式框架，它包括

一、修改VIew層，Model對應數據變化

二、Model數據變化，不須要查找Dom，直接更新View

MVVM的實現方式

（1）發佈者-訂閱者 通常經過sub，puh的方式實現數據和視圖的綁定監聽，更新數據方法一般作法是vm.set('property',value)

(2)髒值檢測 angular.js是經過髒值檢測的方式比對數據是否有變動，來決定是否更新視圖，在指定的事件觸發時進入髒值檢測。

（3）數據劫持：vue.js是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性。

咱們已經知道實現數據的雙向綁定，首先要對數據進行劫持監聽，因此咱們須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發上變化了，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者是有不少個，因此咱們須要有一個消息訂閱器Dep來專門收集這些訂閱者，而後在監聽器Observer和訂閱者Watcher之間進行統一管理的。接着，咱們還須要有一個指令解析器Compile，對每一個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，並替換模板數據或者綁定相應的函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。所以接下去咱們執行如下3個步驟，實現數據的雙向綁定：

1.實現一個監聽器Observer，用來劫持並監聽全部屬性，若是有變更的，就通知訂閱者。

2.實現一個訂閱者Watcher，能夠收到屬性的變化通知並執行相應的函數，從而更新視圖。

3.實現一個解析器Compile，能夠掃描和解析每一個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器。

(49)Object.defineProtype有什麼缺點嗎

1、object.defineprotype沒法檢測到下標的變化，致使數組經過下標添加元素，沒法及時響應
2、 Object.defineProperty只能劫持對象的屬性，從而須要對每一個對象，每一個屬性進行遍歷，若是，屬性值是對象，還須要深度遍歷。Proxy能夠劫持整個對象，並返回一個新的對象。
3、 Proxy不只能夠代理對象，還能夠代理數組。還能夠代理動態增長的屬性。

4九、Vue的生命週期

一、BeforeCreate  建立前 在數據觀測和初始化事件尚未開始

二、created 建立後 完成數據監測，屬性和方法，初始化事件，$el屬性沒有顯示出來

三、boforeMount 載入前在掛在開始以前被調用，相關的render函數首次被調用。實例已經完成一下配置：編譯模板，把data裏面的數據和模板生成html。注意這時候尚未掛在到html中

四、Mounted 載入後 在el被建立的新的VM.$el5替換，而且掛在到實例以後調用。實例已經完成一下配置：用上面編譯好的html去替換el屬性所指的DOM對象，完成html模板渲染到頁面上。此過程能夠發生ajax。

五、beforeupdate 在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前，可在該鉤子函數中更新狀態，不會觸發附加的從新渲染的過程。

六、updated 更新後 因爲數據更新致使虛擬DOM從新渲染和打補丁以後，。DOM組件已經更新完畢，因此能夠執行依賴DOM的操做。而後大多數狀況下應該避免在此期間更新狀態，由於可能會致使更新無線循環。此階段不能在服務器渲染調用

七、boforedestory 在實例銷燬以前調用，實例仍然徹底可用

八、destoryed 在實例銷燬以後調用後。全部時間的監聽器會被一處，全部子實力也會被銷燬。該鉤子在服務端渲染期間不能夠調用

4九、Vue 生命週期的做用

他的生命週期中有多個鉤子函數沒讓咱們在控制整個Vue的實例的過程時更容易造成好的邏輯。

50、什麼是Vue的生命週期

Vue的實例從建立到銷燬的過程。就是生命週期。從一開始的建立，數據初始化，模板編譯、掛在DOM->渲染，更新數據->渲染，銷燬等一系列等過程稱爲vue的生命週期

第一次加載頁面會觸發那些鉤子函數

beforecreate, created,beforemount,mounted

Dom渲染在那個階段

Dom渲染完成在mounted中已經完成

5一、Vue組件間的參數傳遞

父子組件之間傳遞參數：

父組件傳遞給子組件：子組件經過props來接受數據

子組件傳遞給父組件： $emit傳遞參數

二、非父子組件之間傳遞參數，兄弟組件傳值

eventBus，就是建立一個事件中心，至關於一箇中轉站，還能夠使用發佈與訂閱來。

5二、Vue的路由實現：hash模式和history模u式

Vue的路由實現：hash模式和history模u式

hash模式：在瀏覽器中符號："#",#以及#後面的字符稱之爲hash，用window.location.hash讀取

特色：hash雖然在URL中，可是不被包括在Http請求中；u哦你過來指導瀏覽器動做，對於服務端安全無用，hash不會從新加載頁面

hash模式下，僅hash符號以前的內容會被包含在請求中

history模式：history採用HTML5的新特性，且提供了兩個新的方法；pushState(),replaceState()能夠瀏覽器歷史記錄棧進行修改，以及popState事件監聽到狀態更新，

history模式下 前端URL必需要和後端發送請求的URL一致

5三、vue keep-alive

做用：

  vue內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM

  keep-alive是用在一個直屬子組件被開關的情形，同時只有一個子組件在渲染，如有v-for則不會工做

  注：keep-alive是一個抽象組件，自身不會渲染一個DOM元素，也不會出如今父組件鏈中

Vue3.0增長的新特性

第一點：使用typescript對架構進行了重寫
第二點：重寫了虛擬Dom，相似於react的Fiber
第三點：用Proxy代替了Object.defineProtype,

React diff 原理

把樹形結構按照層級分解，只比較同級元素。

給列表結構的每一個單元添加惟一的 key 屬性，方便比較。

React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）

合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.

選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能。

調用 setState 以後發生了什麼？

在代碼中調用 setState 函數以後，React 會將傳入的參數對象與組件當前的狀態合併，而後觸發所謂的調和過程（Reconciliation）。通過調和過程，React 會以相對高效的方式根據新的狀態構建 React 元素樹而且着手從新渲染整個 UI 界面。在 React 獲得元素樹以後，React 會自動計算出新的樹與老樹的節點差別，而後根據差別對界面進行最小化重渲染。在差別計算算法中，React 可以相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是所有從新渲染。

setState是異步仍是同步的

setState 只在合成事件和鉤子函數中是「異步」的，在原生事件和 setTimeout 中都是同步的。

合成事件：就是react 在組件中的onClick等都是屬於它自定義的合成事件

原生事件：好比經過addeventListener添加的，dom中的原生事件

setState的「異步」並非說內部由異步代碼實現，其實自己執行的過程和代碼都是同步的，只是合成事件和鉤子函數的調用順序在更新以前，致使在合成事件和鉤子函數中無法立馬拿到更新後的值，形式了所謂的「異步」，固然能夠經過第二個參數 setState(partialState, callback) 中的callback拿到更新後的結果。

setState 的批量更新優化也是創建在「異步」（合成事件、鉤子函數）之上的，在原生事件和setTimeout 中不會批量更新，在「異步」中若是對同一個值進行屢次 setState ， setState 的批量更新策略會對其進行覆蓋，取最後一次的執行，若是是同時 setState 多個不一樣的值，在更新時會對其進行合併批量更新。

refs是什麼，refs在什麼業務情境中使用過refs

efs用來獲取dom，什麼情境下使用refs在獲取一張圖片的寬高

ref是一個函數，這樣容易提升性能ref={()=>{this.name=ref}}

高級組件

高階組件其實就是一個函數，輸入的是一個組件，輸出的也是一個組件，可是輸入組件具備輸入組件不具備的功能。高階組件的意義在於重用代碼

（1）重用代碼。有時候不少React組件都須要公用一樣一個邏輯，好比說React-Redux中容器組件的部分，沒有必要讓每一個組件都實現一遍shouldComponentUpdate這些生命週期函數，把這部分邏輯提取出來，利用高階組件的方式應用出去，就能夠減小不少組件的重複代碼。

（2）修改現有React組件的行爲。有些現成的React組件並非開發者本身開發的，來自於第三方，或者即使是咱們本身開發的，可是咱們不想去觸碰這些組件的內部邏輯，這時候能夠用高階組件。經過一個獨立於原有組件的函數，能夠產生新的組件，對原有組件沒有任何侵害。

根據返回的新組件和傳入組件參數的關係，高階組件的實現方式能夠分爲兩大類：

• 代理方式的高階組件
• 繼承方式的高階組件

受控組件和非受控組件

受控組件：

在 HTML 中，相似 <input>, <textarea> 和 <select> 這樣的表單元素會維護自身的狀態，並基於用戶的輸入來更新。當用戶提交表單時，前面提到的元素的值將隨表單一塊兒被髮送。但在 React 中會有些不一樣，包含表單元素的組件將會在 state 中追蹤輸入的值，而且每次調用回調函數時，如 onChange 會更新 state，從新渲染組件。一個輸入表單元素，它的值經過 React 的這種方式來控制，這樣的元素就被稱爲"受控元素"。

非受控組件由DOM自己處理，即不受setState控制，用ref獲取該輸入框的內容

react-router4核心思想是將路由看成一個組件來處理

reselect是至關於vue中computed，作了一個緩存提高代碼性能

react-router的基本原理，hashHistory和browserHistory

hashHistory不要後臺配後，browserHistory須要和服務器的一些配置。

react中如何提升組件的性能

react中如何提升組件的性能，避免出現這樣的狀況：父組件更新的時候，子組件也跟着更新這樣會的話，會極大的浪費性能。

我以爲react性能優化有兩方面：一是減小render的渲染次數，另外一方面是減小計算。對應的react提供兩個API。purecompement和shuldcompementUpdate這兩個方法。

usehooks總結

經常使用use有useState(),useeffect(),useContext(),useRef,useReduce,useMeo,useCallback,自定以usehooks

useState 聲明狀態序列，採用結構賦值，能夠得到數據，和修改數據的方法

useEffect生命週期，反作用，也就是主程序以外作的事情，代替了原生命週期中CompontDidmount,ComponentDidUpdate,自己是一個函數，內部存放一個函數，return 一個解綁函數

第二個參數能夠監控哪些值的變化

useContext 能夠實現跨組件通訊，須要和createContext組合在一塊兒

useRef 能夠獲取dom元素還能夠存儲值

useReduce 也是一個函數，內部須要放置一個redux中reducer函數，第二個參數給state賦予初始值，在這裏能夠管理整個項目總體狀態

useContext+useReduce 能夠代替redux

useMemo和useCallback 用來提升性能，由於hooks中沒有shouldComponentUpdate函數能夠提升性能優化，避免沒必要要渲染

useMemo存儲的是變量，useCallback存儲的是函數

自定義use組件須要以use開頭。

use hooks是如何維護維護狀態的方式

、React 會在第一次渲染時將全部的hook 放入 Hooks 數組中。下次渲染時，一樣的3個hooks以相同的順序被調用，因此React能夠查看它的數組，並發現已經在位置0有一個useState hook ，因此React不會建立一個新狀態，而是返回現有狀態。
初次渲染的時候，按照 useState，useEffect 的順序，把 state，deps 等按順序塞到 memoizedState 數組中。

更新的時候，按照順序，從 memoizedState 中把上次記錄的值拿出來。

爲何react定義的組件名稱須要首字母大寫

這是由於babel在轉換jsx語法的時候，會調用createElement()這個方法，這個方法須要接收三個參數：type, config, children。第一個參數聲明瞭這個元素的類型。

對比上面兩張圖，圖一中，我在建立自定義組件時沒有首字母大寫。 而 babel 在轉義時把它當成了一個字符串 傳遞進去了；圖二中，我把首字母大寫了，babel 在轉義時傳遞了一個變量進去。

問題就在這裏，若是傳遞的是一個字符串，那麼在建立虛擬DOM對象時，React會認爲這是一個簡單的HTML標籤，可是這顯然不是一個簡單的HTML標籤，所以去建立一個不存在的標籤確定是會報錯的。

若是首字母大寫，那麼就會當成一個變量傳遞進去，這個時候React會知道這是一個自定義組件，所以他就不會報錯了。

react hooks 是爲了解決什麼

1.難以重用和共享組件中的與狀態相關的邏輯

2. 邏輯複雜的組件難以開發與維護，當咱們的組件須要處理多個互不相關的 local state 時，每一個生命週期函數中可能會包含着各類互不相關的邏輯在裏面。

3.類組件中的this增長學習成本，類組件在基於現有工具的優化上存在些許問題。

Redux原理

建立redux的Store對象，須要調用combineReducer和createStore函數，

combineReducer:將多個reducer函數看成參數傳入，combineReducer函數運行，返回一個新的Combination函數。combination函數主要做用返回一個掛在所有state的對象。當combination函數被調用時，實際就是循環調用傳入reducer函數，返回state對象。將combination函數做爲參數傳入到CreateStore函數中。

重點：

1.redux建立Store：經過combineReducers函數合併reducer函數，返回一個新的函數combination（這個函數負責循環遍歷運行reducer函數，返回所有state）。將這個新函數做爲參數傳入createStore函數，函數內部經過dispatch，初始化運行傳入的combination，state生成，返回store對象。

2.redux中間件：applyMiddleware函數中間件的主要目的就是修改dispatch函數，返回通過中間件處理的新的dispatch函數

3.redux使用：實際就是再次調用循環遍歷調用reducer函數，更新state.

node

node的特色：單線程，非阻塞I/o,事件驅動。

模塊機制

分爲核心模塊和文件模塊

1.2請介紹一下require的模塊加載機制：在node中，路徑分析，文件定位，編譯執行。若是模塊在緩存中，取出緩存（核心模塊的緩存要先於文件緩存）

加載模塊，輸出模塊的exports

1.3咱們知道exports.xxx=xxx和Module.export={}有什麼區別嗎

exports就是module.exports.若是要輸出一個簡直對象{}，能夠利用exports這個已經存在空對象{}，並繼續在上面若是要輸出一個函數或者數組，必須直接對module.exports對象賦值。

Node的異步I/O

2.1 Node事件循環的過程

在進程啓動時，Node便會建立一個相似於while（true）的循環，每一次執行循環體的過程咱們都稱之爲Tick。每個Tick的過程就是檢查是否有事件待處理，若是有就會取出事件以及相關的回調函數。而後執行下一個循環，若是沒有事件處理，就會退出進程

2.2 在每個tick的過程當中，如何判斷事件是否須要處理呢？

每個事件循環中有一個或者多個觀察者，而判斷是否有時間須要處理的過程就是向這些觀察者詢問是否要處理的事件。在Node中，事件主要來源於網路請求、文件的I/O等，這些對應的事件就有對應的觀察者，網絡觀察者，網絡I/O的觀察者。事件循環就一個典型的生產者/消費者模型。異步I/O,網絡等則是事件生產者，源源不斷爲Node提供不一樣類型的事件，這些事件被傳遞到對應的觀察者那裏，事件循環則從觀察者那裏取出事件並處理。在windows下，這個循環基於IOCP建立，在*nix下則基於多線程建立

Node中間件

在Node.js中，中間件主要是指封裝了全部http請求細節處理的方法。Http請求一般包括不少工做，如記錄日誌、ip過濾、查詢字符串、請求體解析、cookie處理、權限驗證、參數驗證，異常處理等，服務於主要業務邏輯。

V8的垃圾回收機制

3.1 如何查看V8的內存使用狀況

使用process.memoryUsage(),返回以下

1

2

3

4

5

6

{

rss:`4935680`,

heapTotal:`1826816`,

heapUsed:`650472`,

external:`49879`

}

heapTotal和heapUsed表明V8的內存使用狀況。external表明V8管理的，綁定到Javascript的C++對象的內存使用狀況。rss, 駐留集大小, 是給這個進程分配了多少物理內存(佔總分配內存的一部分) 這些物理內存中包含堆，棧，和代碼段。

3.2 V8的內存限制是多少，爲何V8這樣設計

64位系統下是1.4GB， 32位系統下是0.7GB。由於1.5GB的垃圾回收堆內存，V8須要花費50毫秒以上，作一次非增量式的垃圾回收甚至要1秒以上。這是垃圾回收中引發Javascript線程暫停執行的事件，在這樣的花銷下，應用的性能和影響力都會直線降低。

3.3 V8的內存分代和回收算法請簡單講一講

在V8中，主要將內存分爲新生代和老生代兩代。新生代中的對象存活時間較短的對象，老生代中的對象存活時間較長，或常駐內存的對象。

3.3.1 新生代

新生代中的對象主要經過Scavenge算法進行垃圾回收。這是一種採用複製的方式實現的垃圾回收算法。它將堆內存一份爲二，每一部分空間成爲semispace。在這兩個semispace空間中，只有一個處於使用中，另外一個處於閒置狀態。處於使用狀態的semispace空間稱爲From空間，處於閒置狀態的空間稱爲To空間。

• 當開始垃圾回收的時候，會檢查From空間中的存活對象，這些存活對象將被複制到To空間中，而非存活對象佔用的空間將會被釋放。完成複製後，From空間和To空間發生角色對換。
• 應爲新生代中對象的生命週期比較短，就比較適合這個算法。
• 當一個對象通過屢次複製依然存活，它將會被認爲是生命週期較長的對象。這種新生代中生命週期較長的對象隨後會被移到老生代中。

3.3.2 老生代

老生代主要採起的是標記清除的垃圾回收算法。與Scavenge複製活着的對象不一樣，標記清除算法在標記階段遍歷堆中的全部對象，並標記活着的對象，只清理死亡對象。活對象在新生代中只佔叫小部分，死對象在老生代中只佔較小部分，這是爲何採用標記清除算法的緣由。

3.3.3 標記清楚算法的問題

主要問題是每一次進行標記清除回收後，內存空間會出現不連續的狀態

• 這種內存碎片會對後續內存分配形成問題，極可能出現須要分配一個大對象的狀況，這時全部的碎片空間都沒法完成這次分配，就會提早觸發垃圾回收，而此次回收是沒必要要的。
• 爲了解決碎片問題，標記整理被提出來。就是在對象被標記死亡後，在整理的過程當中，將活着的對象往一端移動，移動完成後，直接清理掉邊界外的內存。

3.3.4 哪些狀況會形成V8沒法當即回收內存

閉包和全局變量

3.3.5 請談一下內存泄漏是什麼，以及常見內存泄漏的緣由，和排查的方法

什麼是內存泄漏

• 內存泄漏(Memory Leak)指因爲疏忽或錯誤形成程序未能釋放已經再也不使用的內存的狀況。
• 若是內存泄漏的位置比較關鍵，那麼隨着處理的進行可能持有愈來愈多的無用內存，這些無用的內存變多會引發服務器響應速度變慢。
• 嚴重的狀況下致使內存達到某個極限(多是進程的上限，如 v8 的上限;也多是系統可提供的內存上限)會使得應用程序崩潰。常見內存泄漏的緣由內存泄漏的幾種狀況:

進程和線程的區別

一、進程是操做系統資源分配的基本單位  二、線程是任務調度和執行的基本單位

區別:

(1)每個進程都有獨立代碼和數據空間，程序切換開銷比較大。（2）線程能夠看做爲輕量級的進程。同一類線程共享代碼和數據空間，每個線程擁有獨立的程序計數器和運行棧，切換開銷較小。

(1)一個操做系統能夠擁有多個進程  （2）一個進程能夠擁有多個線程

(1)進程能夠分配資源       (2)線程不分配資源，共享進程中的資源

進程間通訊

1、管道：速度慢，容量有限，只能父子通訊

2、FIFO:任何進程均可以通訊，可是速度慢

3、消息隊列：容量受系統限制，且須要考慮上次未讀完內容

4、信號量：不能傳遞複雜消息，只能用於同步

5、共享內存：容易控制容量，速度快，可是要保持同步

線程通訊

1、同步 多線程經過synchronized通信 

2、While輪詢  線程 A不斷改變條件，線程B不斷查看條件是否知足需求，從而實現通信

3、管道通訊，將一個線程消息發個另外一個線程