摘要：組件化編碼的一切都是基于組件的。屬性返回目標節點的前一個兄弟節點。如果目標節點前面沒有同屬于一個父節點的節點，將返回屬性是一個只讀屬性。而當變量離開環境時，則將其標記為離開環境。

第一次寫面試經歷，雖然之前有過一些電話面試經歷，但相對而言感覺此次的經歷對自己收獲還是比較大，這里留下面經當作日記吧！（面試時間：2018-6-12 下午2:10；時長：50min；公司：*）

（一）、React特點

高效、虛擬DOM，最大限度地減少與DOM的交互：

瀏覽器在渲染網頁時，會先將HTML文檔解析并構建DOM樹，然后與CSSOM樹生成RenderObject樹，最后渲染成頁面。瀏覽器中渲染引擎和JavaScript引擎是分離的，渲染引擎會提供一些接口給JavaScript調用，它們二者通信是通過橋接的，性能其實是很差的。

以往，為了優化性能通常采用的辦法是減少DOM操作次數。而React提出了一個新的思路就是虛擬DOM：組件的HTML結構不再是直接生成DOM，而是映射生成虛擬的JavaScript DOM結構，React通過diff算法將最小變更寫入DOM中，從而減少DOM的實際次數，提升性能。

服務器端渲染

React提供開箱即用的服務器端渲染，服務器端渲染解除了服務器端對瀏覽器的依賴，它會將“可視”部分先渲染，然后再交給客戶端做渲染。

組件化編碼

React 的一切都是基于組件的?？梢酝ㄟ^定義一個組件，然后在其他的組件中，可以像HTML標簽一樣引用它。說得通俗點，組件其實就是自定義的標簽；通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。

聲明式設計

React采用聲明范式，函數式編程，可以輕松描述應用。

靈活

React可以與已知的庫或框架很好地配合。

JSX

JSX 是 JavaScript 語法的擴展。React開發不一定使用 JSX ，但我們建議使用它。

單向響應的數據流

React 實現了單向響應的數據流，數據是自頂向下單向流動的，即從父組件到子組件，這種原則讓組件之間的關系變得簡單可預測；props作為外部接口、state作為內部狀態。

（二）、為什么選擇React

相比其他如Vue、angular的雙向數據綁定的框架，個人比較喜歡這種比較流程化的單向數據流形式，因為可以更好的預測數據的變化；

當然最主要的原因是學校圖書館，對于React的書籍資料更豐富（。。。。道出了真相、尷尬）

因為當時沒有怎么看這個算法，所以只是憑借之前的知識點簡單的說了下；

這里在具體的回顧下：

React的Diff算法巧妙的使用了試探法將復雜度為O（n^3）的數差異比較算法轉換成O(n)復雜度的問題；

該算法基于兩個假定：

相同類的兩個組件將會生成相似的樹形結構，而不同類的兩個組件將會生成不同的樹形結構；

可以為元素提供唯一的標識，確保該元素在不同的渲染過程中保持不變。

具體實現細節：

（樹形結構的比較）即首先檢查兩個節點的差異

節點類型不同時

React會把它們當做兩個不同的字樹，導致直接移除之前的那顆子樹，然后創建并插入之前的那顆子樹

優點：巧妙的避開了對樹形結構的大量差異檢測，然后關注與相同的部分，實現了快速而又精確的差異檢測邏輯；

缺陷：如果兩個子樹具有相似的結構，即頂節點不同，子節點結構相同，這時本來只需要對不同的頂節點進行刪除插入操作，但是React會將整個子樹都刪除然后從新構建插入

（1）、裝載過程

當組件第一次被渲染時，依次調用的函數：

construction

getInitalState

getDefaultProps

componentWillMount

render

componentDidMount

（2）、更新過程

更新過程會依次調用以下生命周期函數，其中render函數和“裝載”過程一樣：
?- componentWillReceiveProps
?- shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

并不是所有的更新過程都會執行全部函數。

（3）、React組件的卸載過程只涉及一個函數componentWillUnmount

具體詳情介紹可以看React生命周期詳解

在生命周期中render函數決定了該渲染什么，而shouldComponentUpdate決定了一個組件什么時候不需要渲染；

shouldComponentUpdate(nextProps,nextState)接收兩個參數，即此次渲染的props和state對象，返回一個布爾，默認返回true，表示進行更新；返回false表示此次更新不需要到此終止；

通過比較此次props、state和上次是否相同決定是否需要進行更新可以很好的避免不必要的更新操作，提升性能；

因為props和state的是對象，平時使用的一般都淺層比較，如果需要對兩個對象進行深度全面比較，我考慮的是使用JSON.stringify()

要獲取DOM節點的話，需要在componentDidMount或者componentDidUpdata中獲取，因為只有在這個階段真實DOM節點才構建完成了

獲取DOM節點可以使用ref屬性

可能只是作為一個過渡，比較簡單、直接回答了使用DOM節點的parentNode屬性獲取；不過這里還是補充一點。

nextSibling 屬性 ：

返回目標節點的下一個兄弟節點。

如果目標節點后面沒有同屬于一個父節點的節點，nextSibling 將返回null ；

nextSibling 屬性是一個只讀屬性。

previousSibling屬性 ：

返回目標節點的前一個兄弟節點。

如果目標節點前面沒有同屬于一個父節點的節點，previousSibling 將返回null ；

previousSibling 屬性是一個只讀屬性。

parentNode 屬性 ：

注：parentNode屬性返回的節點永遠是一個元素節點，因為只有元素節點才有可能有子節點。

當然有個例外：

document節點，他沒有父節點。所以document節點的parentNode屬性將返回null；

parentNode 屬性是一個只讀屬性。

當時直接說的是：可以使用document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()；

然后又引出了區別問題~

回答：

getElementsByClassName()、和querySelectorAll()返回的是一個DOM列表，雖然可以用循環遍歷，但是它們只是偽數組，不能使用數組的方法；

getElementsByClassName()只能通過類名獲取，而和querySelectorAll、querySelector是使用CSS選擇器獲取的，

當時只說了querySelector是返回一個DOM節點，有點錯誤吧；querySelector是返回文檔中匹配指定的CSS選擇器的第一元素

回答：

obj instanceof Array如果返回true或者false；

Object.prototype.toString.call(obj) === "[object Array]"；

還有一個當時沒有說道：

obj.constructor == Array為true或false

當時還補充了Array.isArray(obj),用于確定傳遞的值是否是一個 Array,如果對象是 Array，則為true; 否則為false。

回答：

ES6主要增加了一些新的特效，如:

const定義常量，但是const定義的常量只是值不可變，即基本數據類型不可變，對于引用類型，因為它建立的是引用，所以即使使用const定義的對象，其屬性還是可變的；

let定義變量，相對于var，它修復了一些問題，比如變量提升、重復定義等問題，并且const和let的定義具有塊級作用域；

對于字符串擴展有：字符串模板、還有一些方法（忘了，趕緊跳過）；

還有就是：剩余參數、函數默認參數、模塊化、Promise、裝飾器、Symbol、set和map等；

剛學習不久，大概就說了這些；最近也在更新ES6的筆記深入理解ES6

對ES6并沒有深入的問，直接從let和const的塊級作用域引到了閉包

回答:

閉包使用的作用的話主要是為了獲取函數內部的變量和將變量保存下來，使其不被垃圾回收器回收，供給之后使用；

使用的話一般是為了封裝作用域，即代替全局變量，避免全局變量污染；

因為使用閉包，會將變量保存不被回收器回收，所以應該盡量避免使用，防止造成內存泄漏

答的不是太全面，這里補充：

閉包的應用場景

使用閉包代替全局變量

函數外或在其他函數中訪問某一函數內部的參數

在函數執行之前為要執行的函數提供具體參數

在函數執行之前為函數提供只有在函數執行或引用時才能知道的具體參數

為節點循環綁定click事件，在事件函數中使用當次循環的值或節點，而不是最后一次循環的值或節點

暫停執行

包裝相關功能

感覺有點給自己挖坑了，（回收機制、內存泄漏不是太懂啊~~）

回答：

一個變量的可回收性，一般需要根據瀏覽器js引擎的回收器機制判斷，大概有兩種方式（當時只說到了一種）；

即引用計數:引用計數的含義是跟蹤記錄每個變量被引用的次數，當期的引用次數為0時表回收

一般手動清除是將它賦值為null

科普：

引用計數：

當聲明一個變量并將一個引用類型值賦給該變量時，則這個值的引用次數便是1，如果同一個值又被賦給另一個變量，則該值的引用次數加1，相反，如果包含對這個值引用的變量又取得了另一個值，則這個值的引用次數減1。當這個值的引用次數為0時，說明沒有辦法訪問到它了，因而可以將其占用的內存空間回收

標記清除：

當變量進入環境時，例如，在函數中聲明一個變量，就將這個變量標記為“進入環境”。從邏輯上講，永遠不能釋放進入環境的變量所占用的內存，因為只要執行流進入相應的環境，就可能會用到它們。而當變量離開環境時，則將其標記為“離開環境”。

HTML5 主要增加了一些語義化標簽和一些API、刪除了一些元素

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

sessionStorage 的數據在瀏覽器關閉后自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u

對可用性產生負面影響的元素：frame，frameset，noframes

沒有到這么詳細，以上回顧

相同點：都可以作為瀏覽器存儲，且都不能進行跨域訪問；

不同點：

cookie始終會在同源 http 請求頭中攜帶（即使不需要），在瀏覽器和服務器間來回傳遞

sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存；

sessionStorage 和 localStorage 存儲大小比cookie大得多，可以達到5M或更大；

localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除；

cookie 設置的cookie過期時間之前一直有效，與瀏覽器是否關閉無關。

應用層、表示層、會話層、傳輸層、網絡層、數據鏈路層、物理層

都處于應用層（現在回顧好像錯了一個~~~~）

科普：

應用層：允許訪問OSI環境的手段（應用協議數據單元APDU）（HTTP、FTP、SMTP、DNS）

表示層：對數據進行翻譯、加密和壓縮（表示協議數據單元PPDU）

會話層：建立、管理和終止會話（會話協議數據單元SPDU）；

傳輸層：提供端到端的可靠報文傳遞和錯誤恢復（段Segment）（TCP和UDP）；

網絡層：負責數據包從源到宿的傳遞和網際互連（包PackeT）IP尋址；

數據鏈路層：將比特組裝成幀和點到點的傳遞（幀Frame）

物理層：通過媒介傳輸比特,確定機械及電氣規范（比特Bit）

HTTP超文本傳輸協議，基于請求/響應模式。

HTTP是無狀態協議，FTP是有狀態

狀態碼：

100：post請求第一次發送頭信息后服務器返回100，表示請求繼續；

200： 表示請求正常，請求成功；

301：永久重定向；

302： 臨時重定向；

304： 用于協商緩存，表示瀏覽器緩存資源未改變，任然可用

400：請求語法或參數錯誤；

401：認證未通過，如跨域未通過；

403：請求未授權；

404：找不到相應資源的位置；

500：服務器內部出錯；

502： 錯誤網關

緩存類型有兩種，強緩存和協商緩存

強緩存：不會向服務器發送請求，直接從緩存中讀取資源（Expires、cache-control）；

協商緩存：向服務器發送請求，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，如果命中，則返回304狀態碼并帶上新的response header通知瀏覽器從緩存中讀取資源；

科普更多瀏覽器緩存細節：深入瀏覽器緩存

100px,因為垂直方向的margin會存在重疊現象

深入了解可閱讀CSS可格式化模型

因為是消除兩個兄弟div間的margin重疊問題：

兩個兄弟div設置為float：left（或display：inline-block）；width：100%；

科普更多（父子間的margin重疊消除）

外層元素padding代替

內層元素透明邊框 border:1px solid transparent;

內層元素絕對定位 postion:absolute:

外層元素 overflow:hidden;

內層元素 加float:left;或display:inline-block;

內層元素padding:1px;

使用flex布局：父元素設置display;flex

使用float布局(或者display：inline-block)

//html

    
float
    
overflow：hidden
        

//CSS
.item1 {
    float: left;
   //display:inline-block
}
.item2 {
    overflow: hidden;
    //display:inline-block
}

左邊定寬width：200px;設置浮動float:left;右邊overflow：hidden（或者margin-left：左邊寬度）；

父元素display：flex；左邊定寬width：200px;；右邊設置項伸展屬性flex-grow: 1;

父元素position：relative；左邊定寬width：200px;position：absolute；右邊margin-left：左邊寬度；

父元素display：table；左邊定寬width：200px;右邊width：100%；display:tabel-cell;。

父元素display：table；左邊定寬width：200px;display:tabel-cell;右邊width：100%。

父元素display：flex；align-items:stretch;左邊定寬width：200px;；右邊設置項伸展屬性flex-grow: 1;

使用flex布局：父元素display：flex；左邊定寬width：200px；右邊定寬width：200px；中間flex-grow：1；

使用浮動布局：父元素overflow：hidden；左邊定寬width：200px；float：left；右邊定寬width：200px；float：right；中間margin：0 200px；

這里有個坑，那就是HTML結構必須得變換，即中和右要調換位置（當時沒想到，一直被問你確定就這樣可以？短路短路~）

細想因為center的div在正常文檔流中，且占據全屏寬度，自然之后的浮動元素會被放置下一行

// Html結構

        
left
        
right
    
center
 
 // CSS樣式布局
         .left {
             width: 200px;
             background: bisque;
             float: left;
         }
         .center{
             background: red;
             margin: 0 200px;
         }
         .right {
             background: rgba(22,220,22,0.5);
             float: right;
             width: 200px;
             
         }

使用絕對定位布局：

絕對定位法原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文檔流，后面的center會自然流動到他們上面，然后使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應屏幕寬度。（這種方式）

   // CSS樣式布局
        .left {
            width: 200px;
            background: bisque;
            position: absolute;
        }
        .center{
            background: red;
            margin: 0 200px;
        }
        .right {
            background: rgba(22,220,22,0.5);
            position: absolute;
       right: 0;
            width: 200px;
            
        }

圣杯布局（不是太理解）

圣杯布局的原理是margin負值法。使用圣杯布局首先需要在center元素外部包含一個div，包含div需要設置float屬性使其形成一個BFC，并設置寬度，并且這個寬度要和left塊的margin負值進行配合：

// html結構

    

        
center
    
    
left
    
right

// CSS 樣式
.left {
    width: 200px;
    background: bisque;
    float: left;
    margin-left: -100%;
}
.wrap {
    float: left;
    width: 100%;
}
.center{
    background: red;
    margin: 0 200px;
}
.right {
    background: rgba(22,220,22,0.5);
    float: left;
    margin-left: -200px;
    width: 200px;
}

整個過程歷時1個小時左右，感覺還好吧，怎么說不管過沒過，起碼知道自己還有哪些方面不足，可以針對性的深入學習。

最后附上此次面試涉及的一些知識點

React知識冊；

瀏覽器緩存詳解；

ES6知識總結；

最后加上前端面試題JavaScript

持續跟進中，喜歡可以留下個贊哦~~