理解事件原理

事件捕獲/冒泡
DOM事件流
DOM2級事件規定事件包括三個階段：
① 事件捕獲階段
② 處於目標階段
③ 事件冒泡階段
stopPropagation

ES6

let const ()=> 模板字串 解析結構 函式預設引數 展開運算子 物件字面量 與 class、 Promise

Redux

state ， action，reducer
state的改變只能通過觸發特定的action完成（action 是一個用於描述已發生事件的普通物件）Reducer 只是一些純函式，它接收先前的 state 和 action，並返回新的 state。

Virtual DOM

https://www.cnblogs.com/wubaiqing/p/6726429.html
DOM 很慢，為啥說它慢，先看一下 Webkit 引擎，所有瀏覽器都遵循類似的工作流，只
是在細節處理有些不同。一旦瀏覽器接收到一個 HTML 檔案，渲染引擎 Render Engine
就開始解析它，根據 HTML 元素 Elements 對應地生成 DOM 節點 Nodes，最終組成一
棵 DOM 樹。
構造了渲染樹以後，瀏覽器引擎開始著手佈局 Layout。佈局時，渲染樹上的每個節點根據
其在螢幕上應該出現的精確位置，分配一組螢幕座標值。接著，瀏覽器將會通過遍歷渲染樹，
呼叫每個節點的 Paint 方法來繪製這些 Render 物件。Paint 方法根據瀏覽器平臺，使用不
同的 UI後端 API（Agnostic UI Backend API）通過繪製，最終將在螢幕上展示內容。只要
在這過程中進行一次 DOM 更新，整個渲染流程都會重做一遍。
DOM 樹上的結構、屬性資訊我們都可以很容易地用 javascript 物件表示出來。

var olE = {
  tagName: 'ol', // 標籤名
  props: { // 屬性用物件儲存鍵值對
    id: 'ol-list'
  },
  children: [ // 子節點
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}
 

這就是所謂的 Virtual DOM 演算法：

用 javascript 物件結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文
檔當中當狀態變更時，重新構造一棵新的物件樹。然後用新的樹和舊的樹進行比較兩個數的差異。
然後把差異更新到久的樹上，整個檢視就更新了。Virtual DOM 本質就是在 JS 和 DOM 之間做
了一個快取。既然已經知道 DOM 慢，就在 JS 和 DOM 之間加個快取。JS 先操作 Virtual DOM
對比排序/變更，最後再把整個變更寫入真實 DOM。

瀏覽器渲染原理

流程：
　解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹
概念：
DOM Tree：瀏覽器將HTML解析成樹形的資料結構。

CSS Rule Tree：瀏覽器將CSS解析成樹形的資料結構。

Render Tree: DOM和CSSOM合併後生成Render Tree。

layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係，從而去計算出每個節點在螢幕中的位置。

painting: 按照算出來的規則，通過顯示卡，把內容畫到螢幕上。

reflow（迴流）：當瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染，內行稱這個回退的過程叫 reflow。reflow 會從 這個 root frame 開始遞迴往下，依次計算所有的結點幾何尺寸和位置。reflow 幾乎是無法避免的。現在介面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的程式碼，它們都彼此相互影響著。

repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，螢幕的一部分要重畫，但是元素的幾何尺寸沒有變。
注意：(1)display:none 的節點不會被加入Render Tree，而visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為display:none是更優的。

　　 (2)display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。

　　　(3)有些情況下，比如修改了元素的樣式，瀏覽器並不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然後做一次 reflow，這又叫非同步 reflow 或增量非同步 reflow。但是在有些情況下，比如resize 視窗，改變了頁面預設的字型等。對於這些操作，瀏覽器會馬上進行 reflow。
過程：

1. 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好後才會去構建當前節點的下一個兄弟節點。

2. 將CSS解析成 CSS Rule Tree 。

3. 根據DOM樹和CSSOM來構造 Rendering Tree。注意：Rendering Tree 渲染樹並不等同於 DOM 樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。

4. 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操作稱之為layout，顧名思義就是計算出每個節點在螢幕中的位置。

5. 再下一步就是繪製，即遍歷render樹，並使用UI後端層繪製每個節點。

    

   廣告

   前端程式設計師面試筆試寶典

   作者：平文

   京東

JS中EventLoop事件迴圈機制

什麼是單執行緒

主程式只有一個執行緒，即同一時間片斷內其只能執行單個任務。

為什麼選擇單執行緒？

javascript的主要用途是與使用者互動，以及操作DOM。這決定了它只能是單執行緒，否則會帶來很複雜的同步問題。

單執行緒意味著什麼？

單執行緒就意味著，所有任務都需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就需要一直等著。這就會導致IO操作（耗時但cpu閒置）時造成效能浪費的問題。

如何解決單執行緒帶來的效能問題？

答案是非同步！主執行緒完全可以不管IO操作，暫時掛起處於等待中的任務，先執行排在後面的任務。等到IO操作返回了結果，再回過頭，把掛起的任務繼續執行下去。於是，所有任務可以分成兩種，一種是同步任務（synchronous），另一種是非同步任務（asynchronous）

注： 當主執行緒阻塞時，任務佇列仍然是能夠被推入任務的
Event Loop 是什麼：
javascript的事件分兩種，巨集任務(macro-task)和微任務(micro-task)
巨集任務：包括整體程式碼script，setTimeout，setInterval
微任務：Promise.then(非new Promise)，process.nextTick(node中)
https://segmentfault.com/a/1190000012806637?utm_source=tag-newest

箭頭函式和普通函式有什麼區別

1.普通function的宣告在變數提升中是最高的，箭頭函式沒有函式提升
2.箭頭函式沒有this，它會捕獲其所在上下文的 this 值，作為自己的 this 值
3.箭頭函式不繫結arguments,取而代之用rest引數…解決
4.箭頭函式不能作為建構函式，不能被new，沒有property,
5.call和apply方法只有引數，沒有作用域

vue和react的比較，不同點

Vue提供了更多的語法糖來讓開發更便利，比如props的動態實時更新、雙向的資料繫結、指令系統，例項的事件介面等。而React的中心思想即狀態驅動檢視的更改，所有UI層的變更都儘量通過setState來觸發， 通訊方式通過UIAction的行為來實現清晰的單向資料流。
吧啦吧啦網上一堆資料，就不詳細展開了

js處理非同步的幾種方式

javascript語言的執行環境是"單執行緒"（single thread，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行後面一個任務，以此類推）。

這種模式的好處是實現起來比較簡單，執行環境相對單純；壞處是隻要有一個任務耗時很長，後面的任務都必須排隊等著，會拖延整個程式的執行。常見的瀏覽器無響應（假死），往往就是因為某一段javascript程式碼長時間執行（比如死迴圈），導致整個頁面卡在這個地方，其他任務無法執行。

為了解決這個問題，javascript語言將任務的執行模式分成兩種：同步（Synchronous）和非同步（Asynchronous）。

“同步模式" 就是上一段的模式，後一個任務等待前一個任務結束，然後再執行，程式的執行順序與任務的排列順序是一致的、同步的；"非同步模式"則完全不同，每一個任務有一個或多個回撥函式（callback），前一個任務結束後，不是執行後一個任務，而是執行回撥函式，後一個任務則是不等前一個任務結束就執行，所以程式的執行順序與任務的排列順序是不一致的、非同步的。

“非同步模式" 非常重要。在瀏覽器端，耗時很長的操作都應該非同步執行，避免瀏覽器失去響應，最好的例子就是Ajax操作。在伺服器端，"非同步模式"甚至是唯一的模式，因為執行環境是單執行緒的，如果允許同步執行所有http請求，伺服器效能會急劇下降，很快就會失去響應。

Cookie、session和localStorage的區別

共同點：都是儲存在瀏覽器端，且同源的。
區別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。Web Storage 的 api 介面使用更方便。

如何獲悉一個物件的具體型別

javascript中檢測物件的型別的運算子有：typeof、constructor、instanceof。
https://www.cnblogs.com/ww-ervin-72/p/5103540.html

prototype

prototype 屬性使您有能力向物件新增屬性和方法。

問call和apply的作用是什麼？區別是什麼？

每個函式都包含兩個非繼承而來的方法：apply()和call()。
call與apply都屬於Function.prototype的一個方法，所以每個function例項都有call、apply屬性；
作用：call（）方法和apply（）方法的作用相同：改變this指向。
區別：他們的區別在於接收引數的方式不同：
call（）：第一個引數是this值沒有變化，變化的是其餘引數都直接傳遞給函式。在使用call（）方法時，傳遞給函式的引數必須逐個列舉出來。

apply（）：傳遞給函式的是引數陣列
javascript 有幾種型別的值？能否畫一下它們的記憶體圖？
如下程式碼做出解釋：

 function add(c, d){ 
    return this.a + this.b + c + d; 
} 
var o = {a:1, b:3}; 
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 

js的事件流

一、事件流
事件冒泡
事件捕獲
DOM事件流

一面電話直接問了很多比較基礎的問題，比如區分行內元素與塊級元素，還有檢視，比如他給出一個例子，讓你寫出捕獲，冒泡各幾次等。。。。對於初學者的確平時沒有太注意相關問題。

談談http協議

HTTP（HyperText TransportProtocol）是超文字傳輸協議的縮寫，它用於傳送WWW方式的資料，關於HTTP協議的詳細內容請參考RFC2616。HTTP協議採用了請求/響應模型。客戶端向伺服器傳送一個請求，請求頭包含請求的方法、URL、協議版本、以及包含請求修飾符、客戶資訊和內容的類似於MIME的訊息結構。伺服器以一個狀態行作為響應，響應的內容包括訊息協議的版本，成功或者錯誤編碼加上包含伺服器資訊、實體元資訊以及可能的實體內容。

通常HTTP訊息包括客戶機向伺服器的請求訊息和伺服器向客戶機的響應訊息。這兩種型別的訊息由一個起始行，一個或者多個頭域，一個指示頭域結束的空行和可選的訊息體組成。HTTP的頭域包括通用頭，請求頭，響應頭和實體頭四個部分。每個頭域由一個域名，冒號（:）和域值三部分組成。域名是大小寫無關的，域值前可以新增任何數量的空格符，頭域可以被擴充套件為多行，在每行開始處，使用至少一個空格或製表符。

主要還得記得http中Status-Code的第一個數字定義響應的類別，後兩個數字沒有分類的作用。第一個數字可能取5個不同的值：

1xx:資訊響應類，表示接收到請求並且繼續處理
2xx:處理成功響應類，表示動作被成功接收、理解和接受
3xx:重定向響應類，為了完成指定的動作，必須接受進一步處理
4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行
5xx:服務端錯誤，伺服器不能正確執行一個正確的請求

1. 看專案中使用了dva，為什麼要用dva？直接用saga也能達到同樣的效果，dva相比好在哪裡？

dva 是基於現有應用架構 (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何新概念，全部程式碼不到 100 行。( Inspired by elm and choo. )
dva 是 framework，不是 library，類似 emberjs，會很明確地告訴你每個部件應該怎麼寫，這對於團隊而言，會更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封裝了所有其他依賴。
dva 實現上儘量不建立新語法，而是用依賴庫本身的語法，比如 router 的定義還是用 react-router 的 JSX 語法的方式(dynamic config 是效能的考慮層面，之後會支援)。
他最核心的是提供了 app.model 方法，用於把 reducer, initialState, action, saga 封裝到一起

2. 說說react的單向資料流。

React是單向資料流，資料主要從父節點傳遞到子節點（通過props）。
http://www.cnblogs.com/hanguidong/p/9514078.html
如果頂層（父級）的某個props改變了，React會重渲染所有的子節點。

1. react中state與介面通訊的函式（connect）。

2. react的效能，如果只更新最底層的資料，怎麼重新渲染介面？

3. 如果有一個比較複雜的邏輯 需要更改state 應該放在reducer中還是effect中？

4. 在哪裡呼叫ajax，同步非同步的區別 ajax是否有副作用？

5. vue和react相比優點和缺點。

6. vue中與reducer effect相對應的部分是什麼？

7. vue的計算屬性 watch react中有相對應的部分嗎？如果要新增 應該加在哪個回撥函式裡？

http和https的區別，演算法加密，前端網路安全問題，手撕程式碼：字串中的數字替換成特殊字元，將數字分為千分位的形式。正則表示式，閉包。
純函式是啥？

(一)問題：
1.基礎問題：
說說js的繼承實現
js的閉包
2.專案問題：
在專案中遇到的問題
假如讓你重新做這個專案，你會怎麼做？

二.第二次電面
(一)問題：
1.基礎知識：
效能：頁面載入過程
怎麼理解模組化
commentJs
jq的ajax使用
正則表示式的使用
2.專案問題：
資料如何傳輸處理的？
url請求的過程

三.第三次電面
(一)問題：
5.說說瀏覽器相容和效能優化
6.瀏覽器的快取機制

7.http請求的狀態碼

100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200 OK 正常返回資訊
201 Created 請求成功並且伺服器建立了新的資源
202 Accepted 伺服器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

前端開發人員必須要知道的一類安全知識。

7：介紹下瀏覽器快取

剛好和狀態碼 304 結合起來。

8：介紹 js 中事件 （冒泡 委託）

事件冒泡和事件捕獲，執行的先後順序，還可以說一說關於事件委託。

請解釋事件委託（event delegation）。
事件委託是將事件監聽器新增到父元素，而不是每個子元素單獨設定事件監聽器。當觸發子元素時，事件會冒泡到父元素，監聽器就會觸發。這種技術的好處是：

記憶體佔用減少，因為只需要一個父元素的事件處理程式，而不必為每個後代都新增事件處理程式。
無需從已刪除的元素中解綁處理程式，也無需將處理程式繫結到新元素上。

哪些流行的前端技術，對前端的前景和職責

移動端會越來越重要
比較火的有 MVVM 框架 react、vue，ES6 肯定會在近幾年統治前端，Nodejs 也是前端必備技能。關於前端的前景，我覺得 H5 配合 react、vue 是熱門，前端視覺化（ant-design），webVR 可能會在未來的幾年大火一次。職責還是負責與使用者的互動，考慮效能、資源方面的優化，全棧是每個前端程式設計師的夢想。

14：js 基本資料型別

光知道基本資料，如果能擴充套件，就更好了，比如引用資料型別和非引用資料型別，就是常說的堆和棧。

16：call apaly 區別

可以定義上下文，引數不一樣，apply 的引數是陣列，如果能和 bind 擴充套件就更好了。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：
localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

javascript原型，原型鏈 ? 有什麼特點？

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時，
如果這個物件內部不存在這個屬性，那麼他就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，
於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
關係：instance.constructor.prototype = instance.proto

特點：
javascript物件是通過引用來傳遞的，我們建立的每個新物件實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的物件也會繼承這一改變。

當我們需要一個屬性的時，javascript引擎會先看當前物件中是否有這個屬性， 如果沒有的話，
就會查詢他的Prototype物件是否有這個屬性，如此遞推下去，一直檢索到 Object 內建物件。

function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
    return this.name;
}
var person = new Func();//現在可以參考var person = Object.create(oldObject);
console.log(person.getInfo());//它擁有了Func的屬性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}

javascript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

棧：原始資料型別（Undefined，Null，Boolean，Number、String）
堆：引用資料型別（物件、陣列和函式）

兩種型別的區別是：儲存位置不同；
原始資料型別直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料，所以放入棧中儲存；
引用資料型別儲存在堆(heap)中的物件,佔據空間大、大小不固定。如果儲存在棧中，將會影響程式執行的效能；引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。當直譯器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體
https://camo.githubusercontent.com/d1947e624a0444d1032a85800013df487adc5550/687474703a2f2f7777772e77337363686f6f6c2e636f6d2e636e2f692f63745f6a735f76616c75652e676966

1、構造繼承
2、原型繼承
3、例項繼承
4、拷貝繼承

原型prototype機制或apply和call方法去實現較簡單，建議使用建構函式與原型混合方式。

     function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//繼承了Parent，通過原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//得到被繼承的屬性

javascript作用鏈域?

全域性函式無法檢視區域性函式的內部細節，但區域性函式可以檢視其上層的函式細節，直至全域性細節。
當需要從區域性函式查詢某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查詢，
直至全域性函式，這種組織形式就是作用域鏈。

用原生javascript的實現過什麼功能嗎？

Ajax 是什麼? 如何建立一個Ajax？

ajax的全稱：Asynchronous javascript And XML。
非同步傳輸+js+xml。
所謂非同步，在這裡簡單地解釋就是：向伺服器傳送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁重新整理的，提高了使用者體驗。

(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊
(3)設定響應HTTP請求狀態變化的函式
(4)傳送HTTP請求
(5)獲取非同步呼叫返回的資料
(6)使用javascript和DOM實現區域性重新整理

DOM操作——怎樣新增、移除、移動、複製、建立和查詢節點?

（1）建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
（2）新增、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
getElementById() //通過元素Id，唯一性

.call() 和 .apply() 的區別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以執行結果為：alert(4);

注意：js 中的函式其實是物件，函式名是對 Function 物件的引用。

 function add(a,b)
 {
     alert(a+b);
 }

 function sub(a,b)
 {
     alert(a-b);
 }

 add.call(sub,3,1);

JS 怎麼實現一個類。怎麼例項化這個類

function Person(name,age){
    this.name=name;
    this.age=age;
    this.study=function(){
        alert('我會學習');
    }
    this.eat=function(){
        alert('我會吃飯');
    }
}

javascript中的作用域與變數宣告提升？

如何編寫高效能的javascript？
那些操作會造成記憶體洩漏？
記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。

setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。
閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）
angular vue react的優缺點

我們給一個dom同時繫結兩個點選事件，一個用捕獲，一個用冒泡。會執行幾次事件，會先執行冒泡還是捕獲？

請介紹一下JS之事件節流？

什麼是JS的函式防抖？

函式防抖(debounce)

概念： 在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時。

生活中的例項： 如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

函式節流(throttle)

概念： 規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回撥函式執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。

生活中的例項： 我們知道目前的一種說法是當 1 秒內連續播放 24 張以上的圖片時，在人眼的視覺中就會形成一個連貫的動畫，所以在電影的播放（以前是，現在不知道）中基本是以每秒 24 張的速度播放的，為什麼不 100 張或更多是因為 24 張就可以滿足人類視覺需求的時候，100 張就會顯得很浪費資源。

應用場景

對於函式防抖，有以下幾種應用場景：

給按鈕加函式防抖防止表單多次提交。
對於輸入框連續輸入進行AJAX驗證時，用函式防抖能有效減少請求次數。
判斷 scroll 是否滑到底部， 滾動事件 + 函式防抖
總的來說，適合多次事件 一次響應 的情況

對於函式節流，有如下幾個場景：

遊戲中的重新整理率
DOM元素拖拽
Canvas畫筆功能

描述一下React 生命週期

初始化

• constructor

• getInitialState

• getDefaultProps

• componentWillMount

• render

• componentDidMount
  更新過程

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

  解除安裝過程

• componentWillUnmount

React-router 路由的實現原理？

說說React Native,Weex框架的實現原理？

React為什麼自己定義一套事件體系呢，與瀏覽器原生事件體系有什麼關係？
用過 React 技術棧中哪些資料流管理庫？
Redux\Dva

Redux是如何做到可預測呢？

Redux將React元件劃分為哪兩種？

Redux是如何將state注入到React元件上的？

請描述一次完整的 Redux 資料流

一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

注：這題勝在區分度高，知識點覆蓋廣，再不懂的人，也能答出幾句，
而高手可以根據自己擅長的領域自由發揮，從URL規範、HTTP協議、DNS、CDN、資料庫查詢、
到瀏覽器流式解析、CSS規則構建、layout、paint、onload/domready、JS執行、JS API繫結等等；

詳細版：
1、瀏覽器會開啟一個執行緒來處理這個請求，對 URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
2、呼叫瀏覽器核心中的對應方法，比如 WebView 中的 loadUrl 方法;
3、通過DNS解析獲取網址的IP地址，設定 UA 等資訊發出第二個GET請求;
4、進行HTTP協議會話，客戶端傳送報頭(請求報頭);
5、進入到web伺服器上的 Web Server，如 Apache、Tomcat、Node.JS 等伺服器;
6、進入部署好的後端應用，如 PHP、Java、javascript、Python 等，找到對應的請求處理;
7、處理結束回饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與伺服器最後修改時間對比，一致則返回304;
8、瀏覽器開始下載html文件(響應報頭，狀態碼200)，同時使用快取;
9、文件樹建立，根據標記請求所需指定MIME型別的檔案（比如css、js）,同時設定了cookie;
10、頁面開始渲染DOM，JS根據DOM API操作DOM,執行事件繫結等，頁面顯示完成。

簡潔版：
瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；
伺服器交給後臺處理完成後返回資料，瀏覽器接收檔案（HTML、JS、CSS、圖象等）；
瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部資料結構（如HTML的DOM）；
載入解析到的資原始檔，渲染頁面，完成。

快速排序

1. JS基本的資料型別和引用型別

基本資料型別：number、string、null、undefined、boolean、symbol -- 棧
引用資料型別：object、array、function -- 堆
兩種資料型別儲存位置不同
原始資料型別是直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料；
引用資料型別儲存在堆(heap)中的物件，佔據空間大、大小不固定，如果儲存在棧中，將會影響程式執行的效能；
引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。
當直譯器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體。

2.介紹JS的內建物件

資料封裝類物件：Object、String、Number、Boolean、Array
其他物件：Function、Data、Math、Arguments、RegExp、Error
ES6新增物件：Promise、Proxy、Map、Set、Symbol、Reflect

4.eval是做什麼的

他的功能是把對應的字串解析成JS程式碼並執行；
他不安全，而且非常耗能（執行兩次，一次解析成JS程式碼，一次執行）

5.對閉包的理解

閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見的方式就是在一個函式裡建立另一個函式，通過另一個函式訪問這個函式的區域性變數，利用閉包可以突破作用域鏈，將函式內部的變數和方法傳遞到外部

閉包的特性：函式內巢狀函式；內部函式可以引用外部的引數和變數；引數和變數不會被垃圾回收機制回收

6.http狀態碼有哪些

簡單版

100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200 OK 正常返回資訊
201 Created 請求成功並且伺服器建立了新的資源
202 Accepted 伺服器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。
完整版

1**(資訊類)：表示接收到請求並且繼續處理
100——客戶必須繼續發出請求
101——客戶要求伺服器根據請求轉換HTTP協議版本

2**(響應成功)：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源傳送回客戶端
201——提示知道新檔案的URL
202——接受和處理、但處理未完成
203——返回資訊不確定或不完整
204——請求收到，但返回資訊為空
205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案
206——伺服器已經完成了部分使用者的GET請求

3**(重定向類)：為了完成指定的動作，必須接受進一步處理
300——請求的資源可在多處得到
301——本網頁被永久性轉移到另一個URL
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續通過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
303——建議客戶訪問其他URL或訪問方式
304——自從上次請求後，請求的網頁未修改過，伺服器返回此響應時，不會返回網頁內容，代表上次的文件已經被快取了，還可以繼續使用
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的程式碼，現行版本中不再使用
307——申明請求的資源臨時性刪除

4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被伺服器所理解
401——請求未經授權，這個狀態程式碼必須和WWW-Authenticate報頭域一起使用
402——保留有效ChargeTo頭響應
403——禁止訪問，伺服器收到請求，但是拒絕提供服務
404——一個404錯誤表明可連線伺服器，但伺服器無法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
405——使用者在Request-Line欄位定義的方法不允許
406——根據使用者傳送的Accept拖，請求資源不可訪問
407——類似401，使用者必須首先在代理伺服器上得到授權
408——客戶端沒有在使用者指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——伺服器上不再有此資源且無進一步的參考地址
411——伺服器拒絕使用者定義的Content-Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大於伺服器允許的大小
414——請求的資源URL長於伺服器允許的長度
415——請求資源不支援請求專案格式
416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭欄位
417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求長。

5**(服務端錯誤類)：伺服器不能正確執行一個正確的請求
500 - 伺服器遇到錯誤，無法完成請求
502 - 閘道器錯誤
503：由於超載或停機維護，伺服器目前無法使用，一段時間後可能恢復正常

7.描述瀏覽器渲染的過程，DOM書和渲染樹的區別

瀏覽器渲染過程：

解析HTML構建DOM，並行請求css、image、js
css檔案下載完成，開始構建CSSOM（CSS樹）
CSSOM構建結束後，和DOM一起生成Render Tree（渲染樹）
佈局（layout）：計算出每個節點在螢幕中的位置
顯示：通過顯示卡把頁面畫到螢幕上
DOM樹和渲染樹的區別

DOM樹與HTML標籤一一對應，包括head和隱藏元素
渲染樹不包括head和隱藏元素，大段文字的每一個行都是獨立節點，每一個獨立節點都有對應的css屬性

8.如何最小化重繪（repaint）和迴流（reflow）

需要建立多個DOM節點時，使用DocumentFragment建立完成後一次性的加入document
快取layout屬性值，減少迴流次數，如const offsetLeft=element.offsetLeft
儘量避免使用table佈局（table元素一旦觸發迴流就會導致table裡所有的其他元素迴流）
避免使用css表示式，因為每次呼叫都會重新計算值（也會重新載入頁面）
儘量使用css屬性簡寫
將多次修改元素樣式合併成一次操作

9.介紹javascript的原型、原型鏈？有啥特點

原型：

javascript的所有物件中都包含了一個 (proto__ ) 內部屬性，這個屬性所對應的就是該物件的原型 javascript的函式物件，除了原型 (_proto_) 之外，還預置了 prototype 屬性 當函式物件作為建構函式建立例項時，該 prototype 屬性值將被作為例項物件的原型( __proto)。
原型鏈：

當一個物件呼叫的屬性/方法自身不存在時，就會去自己(proto__ )關聯的前輩 prototype 物件上去找 如果沒找到，就會去該 prototype 原型 ( __proto) 關聯的前輩 prototype 去找。依次類推，直到找到屬性/方法或 undefined 為止。從而形成了所謂的“原型鏈”
原型特點：

javascript物件是通過引用來傳遞的，當修改原型時，與之相關的物件也會繼承這一改變

10.javascript如何實現繼承

建構函式繫結：使用 call 或 apply 方法，將父物件的建構函式繫結在子物件上

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6使用extends繼承

class Apple extends Fruit{
    constructor() {
        super()
    }
}

例項繼承：將子物件的prototype指向父物件的一個例項

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型繼承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

拷貝繼承：如果把父物件的所有屬性和方法，拷貝進子物件

function extend(Child, Parent) {
  　　var p = Parent.prototype;
  　　var c = Child.prototype;
  　　for (var i in p) {
  　　　   c[i] = p[i];
  　　}
}

11.什麼是window物件，什麼是Document物件

Window 物件表示當前瀏覽器的視窗，是javascript的頂級物件。
我們建立的所有物件、函式、變數都是 Window 物件的成員。
Window 物件的方法和屬性是在全域性範圍內有效的。
Document 物件是 HTML 文件的根節點與所有其他節點（元素節點，文字節點，屬性節點, 註釋節點）
Document 物件使我們可以通過指令碼對 HTML 頁面中的所有元素進行訪問
Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問

12. 在一個DOM上同時繫結兩個點選事件：一個用捕獲，一個用冒泡。事件會執行幾次，先執行冒泡還是捕獲？

該DOM上的事件如果被觸發，會執行兩次（執行次數等於繫結次數）
如果該DOM是目標元素，則按事件繫結順序執行，不區分冒泡/捕獲
如果該DOM是處於事件流中的非目標元素，則先執行捕獲，後執行冒泡

13. 事件的代理/委託

事件委託是指將事件繫結目標元素的到父元素上，利用冒泡機制觸發該事件
優點：

可以減少事件註冊，節省大量記憶體佔用
可以將事件應用於動態新增的子元素上
缺點：

使用不當會造成事件在不應該觸發時觸發

14. 編寫一個方法 求一個字串的位元組長度

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

15. 列舉一下javascript陣列和物件有哪些原生方法？

陣列：

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

物件：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);

棧記憶體、堆記憶體和預處理

閉包，prototype鏈，記憶體分配的概念和應用

https://juejin.im/post/5bb470295188255c5e66f88f?utm_source=gold_browser_extension#heading-7

實現雙向繫結的哪幾種手法(觀察者、渲染劫持、髒檢測)

 

原文https://mp.weixin.qq.com/s/7ZahpAT95MnWw-BC0FHyAQ