前端常見面試題

三欄佈局

• float

  <div>
    <section class="a1">a1</section>
    <section class="a2">a2</section>
    <section class="a3">a3</section>
    <section class="a4">a4</section>
    <section class="a5">a5</section>
  </div>
  div {
    width: 180px;
    height: 50px;
  }
  section {
    float: left;
  }
  .a1 {
    width: 50px;
    height: 50px;
    background-color: tan;
  }
  .a2 {
    float: right;
    width: 50px;
    height: 50px;
    background-color: tan;
  }
  
  .a3 {
    width: 80px;
    height: 25px;
    background-color: red;
  }
  .a4 {
    width: 40px;
    height: 25px;
    background-color: #ddd;
  }
  .a5 {
    width: 40px;
    height: 25px;
    background-color: #666;
  }
  複製代碼

• position

  div {
    width: 180px;
    height: 50px;
    position: relative;
  }
  .a1 {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
  }
  .a2 {
    position: absolute;
    left: 50px;
    width: 80px;
    height: 25px;
    background-color: blue;
  }
  .a3 {
    position: absolute;
    left: 50px;
    top: 25px;
    width: 40px;
    height: 25px;
    background-color: green;
  }
  .a4 {
    position: absolute;
    left: 90px;
    top: 25px;
    width: 40px;
    height: 25px;
    background-color: tan;
  }
  .a5 {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 130px;
    background-color: red;
  }
  複製代碼

3. flex

div {
  width: 180px;
  height: 50px;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
}
.a1 {
  width: 50px;
  height: 50px;
  background-color: red;
}
.a2 {
  width: 80px;
  height: 25px;
  background-color: tan;
}
.a3 {
  flex-grow: 1;
  background-color: aqua;
}
.a4 {
  width: 25px;
  height: 50px;
  background-color: #fff;
}
.a5 {
  flex-grow: 1;
  background-color: red;
}
複製代碼

4. 三欄等寬佈局

div {
  width: 180px;
  height: 50px;
  display: flex;
  background-color: tan;
}

section {
  flex: auto;
}

.a1 {
  background-color: #fff;
}
.a2 {
  background-color: #444;
}
.a3 {
  background-color: red;
}
複製代碼

垂直居中

1. position

position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
複製代碼

2. table

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
span {
  background-color: red;
}
複製代碼

3. 行內塊

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
}
section {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 25px;
  background-color: red;
}
複製代碼

4. float

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
}
section {
  width: 50px;
  height: 50px;
  margin: 25px;
  float: left;
  background-color: red;
}
複製代碼

5. line-height

div {
  width: 100px;
  height: 100px;
  background-color: tan;
  text-align: center;
  line-height: 100px;
}
span{
  background-color: #fff;
  vertical-align: middle;
}
複製代碼

盒模型

margin-box, border-box, padding-box, content-box
首先是最內層content-box，用來顯示元素信息
向外是padding-box，主要用於設置元素四個方向的內邊距，
再向外是border-box，用於設置元素四個方向的邊框樣式，
最外層是margin-box，爲了讓元素與其餘元素隔開，對於垂直方向上的BFC元素的margin會發生合併，去較大的值
padding-box和margin-box是透明的，padding-box會受元素的背景的影響，能夠經過box-sizing設置
padding-box和border-box不能去負值，margin-box能夠取負值
還有元素的溢出屬性，處理空白空間及文本溢出

  * css中每一個元素都看做多個盒子的組合，咱們能夠經過設置這些盒子的屬性來改變元素的樣式
  * 若是設置 box-sizing 爲 content-box，那麼寬度就是內容區的寬度
  * 若是設置爲 border-box，那麼寬度就死活內容區寬度+padding+border
複製代碼

單行文本溢出省略：

text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

BFC

浮動，絕對定位，overflow不爲visible，非塊級盒子塊級容器
觸發：
  1. float 除了none之外的值 
 2. overflow 除了visible 之外的值（hidden，auto，scroll ） 
 3. display (table-cell，table-caption，inline-block, flex, inline-flex) 
 4. position值爲（absolute，fixed）

特性：
  在BFC中，盒子從頂端開始垂直地一個接一個地排列。
  盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子垂直方向的margin會發生重疊。
  在BFC中，每個盒子的左外邊距（margin-left）會觸碰到容器的左外邊緣（border-left）。
  BFC不會與浮動盒子產生交集，而是緊貼浮動元素邊緣。
  計算BFC高度BFC時，天然也會檢測浮動的子盒子高度。

應用：
  自適應兩欄佈局
  解決margin疊加問題：下面元素添加父元素：overflow: hidden;
  清除浮動，計算BFC高度 
複製代碼

閉合浮動的辦法：

• 包含塊overflow:hidden/BFC
• 包含塊display:flow-root/BFC
• 包含塊變表格/BFC
• 包含塊變行內塊元素/BFC
• br標籤的清除浮動

談談你對MVVM開發模式的理解

• MVVM主要分爲model/view/viewmodel三部分
• model：表明數據模型，數據和業務邏輯都在model層中定義
• view：表明UI視圖，負責數據的展現
• viewmodel：負責監聽model中數據的改變而且控制視圖的更新，處理用戶交互操做
• Model和View並沒有直接關聯，是經過viewmodel來進行聯繫的，model和viewmodel之間有着雙向數據綁定的聯繫。所以當model中的數據改變時會觸發view層的刷新，一樣view中由用戶交互操做而改變的數據也會在model中同步。
• 這種模式實現了model和view的數據自動同步，所以開發者只須要專一於對數據的維護操做便可，而不須要本身操做DOM

如何優化SPA應用的首屏加載速度慢的問題

1. 將公用的JS庫經過script標籤外部引入，讓瀏覽器並行下載資源文件，提升下載速度；
2. 在配置路由時，頁面和組件使用懶加載的方式引入，在調用某個組件時再加載對應的js文件；
3. 加一個首屏 loading 圖，提高用戶體驗；

跨域（Cross-Origin）

只要協議、主機、端口不一致，就會有跨域的問題

• javascript跨域通訊
  • jsonp
  • CORS設置跨域頭
  • 在框架中配置跨域代理
• jsonp的實現原理
  • script標籤引入外部網站的代碼，通常都是使用查詢字符串告訴對方咱們頁面中的callback函數，而後對方把須要返回的數據包在這個函數裏面
  • 其實JSONP並不算真正意義上的AJAX請求，只是請求了一個js文件而且執行了，並且這種跨域方法只能進行GET請求

function jsonp(url, value, cb) {
    let cbName = 'JSONP_CALLBACK_' + Date.now() + '_' + Math.random().toString().slice(2)
    window[cbName] = cb
    url = url + '?q=' + value + '&callback=' + cbName
    let script = document.createElement('script')
    script.src = url
    script.onload = () => {
      document.body.removeChild(script)
      delete window[cbName]
    }
    document.body.appendChild(script)
  }

  function ajax(url = '', data = {}, type = 'GET') {
    if (type === "GET") {
      let urlStr = ""
      Object.keys(data).forEach(key => {
        urlStr += key + '=' + data[key] + '&'
      })
      if (urlStr) {
        urlStr = urlStr.substring(0, urlStr.length - 1)
        url += '?' + urlStr
      }
      return axios.get(url)
    } else if (type === "POST") {
      return axios.post(url, data)
    }
  }
複製代碼

• CORS
  • 它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制
  • 簡單請求
    • 請求方法爲HEAD、GET或者POST中的一種
    • HTTP的頭信息有如下幾種字段Accept、Accept-Language、Content-Language、Last-Event-ID
    • Content-Type的值只限於application/x-www-form-urlencoded、multipart/form-data、text/plain三個
    • 瀏覽器發出請求時，瀏覽器會自動在請求頭中添加一個字段Origin，值爲發出請求網頁的源地址
    • 服務端根據這個值，決定是否贊成此次請求，若是Origin的值不在指定的許可範圍，瀏覽器接收到的HTTP迴應將不包含Access-Control-Allow-Origin，拋出錯誤被XMLHttpRequest的onerror回調函數捕獲。若是Access-Control-Allow-Origin字段正好跟帶過去的Origin的值同樣，則返回對應的數據，完成一次請求。
  • 非簡單請求以及option請求
    • 非簡單請求是那種對服務器有特殊要求的請求，好比請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。
    • 在進行非簡單請求以前，瀏覽器會在正式請求以前發送一次預檢請求，這就是有時候咱們會在控制檯中看到的option請求，就是說，正式請求以前，瀏覽器會去問服務端我這個地址能不能訪問你，若是能夠，瀏覽器纔會發送正式的請求，不然報錯。
  • 總結
    • CORS實現跨域的方法就是根據請求頭的Origin值和響應頭的Access-Control-Request-Headers和Access-Control-Request-Method的值進行比對，經過了就能夠請求成功，沒經過就請求失敗。
• 比較
  • JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

前端如何優化網站性能

• 減小 HTTP 請求數量：
  • 瀏覽器與服務器主要是經過 HTTP 進行通訊。瀏覽器與服務器須要通過三次握手，每次握手須要花費大量時間。並且不一樣瀏覽器對資源文件併發請求數量有限，一旦 HTTP 請求數量達到必定數量，資源請求就存在等待狀態，所以減小 HTTP 的請求數量能夠很大程度上對網站性能進行優化。
• CSS Sprites：
  • 國內俗稱 CSS 精靈，這是將多張圖片合併成一張圖片達到減小 HTTP 請求的一種解決方案，能夠經過 CSS background 屬性來訪問圖片內容。這種方案同時還能夠減小圖片總字節數。
• 合併 CSS 和 JS 文件：
  • 如今前端有不少工程化打包工具，如：grunt、gulp、webpack等。爲了減小 HTTP 請求數量，能夠經過這些工具再發布前將多個 CSS 或者 多個 JS 合併成一個文件。
• 採用 lazyLoad：
  • 俗稱懶加載，能夠控制網頁上的內容在一開始無需加載，不須要發請求，等到用戶操做真正須要的時候當即加載出內容。這樣就控制了網頁資源一次性請求數量。
• 利用瀏覽器緩存
  • 瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，若是資源已經存在就不須要到服務器從新請求該資源，直接在本地讀取該資源。
• 減小 DOM 操做，達到減小重排（Reflow）
  • 基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會從新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的全部其它結點的 visibility 屬性，這也是 Reflow 低效的緣由。若是 Reflow 的過於頻繁，CPU 使用率就會急劇上升。

Less / Sass

Less的變量名使用@符號開始 Sass的變量是必須$開始

• 做用域：
  • Sass無全局變量概念
  • LESS中的做用域和其餘程序語言中的做用域很是的相同
• 混合(Mixins)：
  • Sass

  聲明：@mixin a($borderWidth:2px){}
    調用：@include error();
  複製代碼

  • Less

  聲明：.error(@borderWidth:2px){}
    調用：.error();
  複製代碼

• 繼承
  • Sass

  @extend .block; /*繼承.block選擇器下全部樣式*/
  複製代碼

  • Less

  .block;/*繼承.block選擇器下全部樣式*/
  複製代碼

AntDesign / bootstrap

http協議

• HTTP是基於TCP/IP通訊協議來傳遞數據
• HTTP是一個應用層協議，由請求和響應構成，是一個標準的客戶端服務器模型。HTTP是一個無狀態的協議。
• 工做過程大概以下：
  • 用戶在瀏覽器中鍵入須要訪問網頁的URL或者點擊某個網頁中連接；
  • 瀏覽器根據URL中的域名，經過DNS解析出目標網頁的IP地址；
  • 在HTTP開始工做前，客戶端首先會經過TCP/IP協議來和服務端創建連接（TCP三次握手）
  • 創建鏈接後，客戶機發送一個請求給服務器，請求方式的格式爲：統一資源標識符（URL）、協議版本號，後邊是MIME信息包括請求修飾符、客戶機信息和可內容。
  • 服務器接到請求後，給予相應的響應信息，其格式爲一個狀態行，包括信息的協議版本號、一個成功或錯誤的代碼，後邊是MIME信息包括服務器信息、實體信息和可能的內容。
  • 通常狀況下，一旦Web服務器向瀏覽器發送了請求數據，它就要關閉TCP鏈接，而後若是瀏覽器或者服務器在其頭信息加入了這行代碼：Connection:keep-alive，TCP鏈接在發送後將仍然保持打開狀態，因而，瀏覽器能夠繼續經過相同的鏈接發送請求。保持鏈接節省了爲每一個請求創建新鏈接所需的時間，還節約了網絡帶寬。
• 短鏈接：創建鏈接——數據傳輸——關閉鏈接...創建鏈接——數據傳輸——關閉鏈接，若是客戶請求頻繁，將在TCP的創建和關閉操做上浪費較多時間和帶寬。
• 長鏈接：創建鏈接——數據傳輸...（保持鏈接）...數據傳輸——關閉鏈接
  • with pipeling: 每次創建連接後無需等待請求回來就能夠發送下一個請求
  • without pipeling: 客戶端只在收到前一個請求的響應後，才發出新的請求。
• Http請求報文

  客戶端發送一個HTTP請求到服務器的請求消息包括如下格式：
    請求行（request line）、請求頭部（header）、請求體組成
    請求行:
      方法:
          GET 獲取資源
          POST 向服務器端發送數據，傳輸實體主體
          PUT 傳輸文件
          HEAD 獲取報文首部
          DELETE 刪除文件
          OPTIONS 詢問支持的方法
          TRACE 追蹤路徑
      URL
      協議/版本號
    請求頭:
        通用首部(General Header)
        請求首部(Request Header)
        響應首部(Response Header)
        實體首部(Entity Header Fields)
        
    請求體
  複製代碼

• Http響應報文

  HTTP響應組成：響應行、響應頭、響應體。
  響應行
      （HTTP/1.1）代表HTTP版本爲1.1版本，狀態碼爲200，狀態消息爲（ok）
  響應頭
      Date:生成響應的日期和時間；
      Content-Type:指定了MIME類型的HTML(text/html),編碼類型是ISO-8859-1
  響應體
  複製代碼

• GET和POST區別
  • GET提交的數據會放在URL以後，以?分割URL和傳輸數據，參數之間以&相連，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的數據放在HTTP包的Body中.
  • GET提交的數據大小有限制（由於瀏覽器對URL的長度有限制），而POST方法提交的數據沒有限制.
  • GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值。
  • GET方式提交數據，會帶來安全問題，好比一個登陸頁面，經過GET方式提交數據時，用戶名和密碼將出如今URL上，若是頁面能夠被緩存或者其餘人能夠訪問這臺機器，就能夠從歷史記錄得到該用戶的帳號和密碼.

websocket

首先Websocket是基於HTTP協議的，或者說借用了HTTP的協議來完成一部分握手。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
複製代碼

• http long poll 和 ajax 輪詢均可以實現實時信息傳遞

  • ajax輪詢： 讓瀏覽器隔個幾秒就發送一次請求，詢問服務器是否有新信息。
  • long poll 都是採用輪詢的方式，不過採起的是阻塞模型,客戶端發起鏈接後，若是沒消息，就一直不返回Response給客戶端。直到有消息才返回，返回完以後，客戶端再次創建鏈接，周而復始

• 特色：

  • 解決了http協議只能從客戶端向服務器發送請求的缺陷，有了websocket，服務器也能主動向客戶端推送消息
  • 和http同樣，是創建在tcp協議之上，默認端口也是80和443,
  • 沒有同源限制，客戶端能夠與任意服務器通訊
  • 協議標識符是ws，服務器網址就是URL
  • 能夠發送文本，也能夠發送二進制數據

socket.io

socket.io 是一個能實現多人遠程實時通訊(聊天)的庫 它包裝的是 H5, WebSocket和輪詢, 若是是較新的瀏覽器內部使用 WebSocket,若是瀏覽器不支持, 那內部就會使用輪詢實現實時通訊

網頁從輸入網址到渲染完成經歷了哪些過程

1 輸入網址 2 發送到DNS服務器，並獲取域名對應的web服務器對應的ip地址 3 與web服務器創建TCP鏈接 4 瀏覽器向web服務器發送http請求 5 web服務器響應請求，並返回指定url的數據（或錯誤信息，或重定向的新的url地址） 6 瀏覽器下載web服務器返回的數據及解析html源文件 7 生成DOM樹，解析css和js，渲染頁面，直至顯示完成

數據結構和算法

// reduce
  function reduce(ary, f, initVal) {
    var start = 0
    if (arguments.length == 2) {
      initVal = ary[0]
      start = 1
    }
    for (var i = start; i < ary.length; i++) {
      initVal = f(initVal, ary[i], i, ary)
    }
    return initVal
  }
// flattenDeep
  function flattenDeep(ary) {
    return [].concat(...ary.map(val => {
      if (Array.isArray(val)) {
        return flattenDeep(val)
      } else {
        return val
      }
    }))
  }
複製代碼

ES6 新特性

• 函數默認值
• 模板字符串：123${a}456，\
• 解構賦值
• let & const
  • let 無變量提高，有塊級做用域，禁止重複聲明
  • const 無變量提高，有塊級做用域，禁止重複聲明，禁止重複賦值
• 新增庫函數
  • Number .EPSILON / .isInteger / .isInteger
  • String .includes / .repeat / .startsWith / .endsWith
  • Array .fill / .findIndex / .of() /
  • Object .assign
  • Math
• 箭頭函數：共享父級 this 對象，共享父級 arguments，不能當作構造函數
• 類 & 繼承
  • 本質爲對原型鏈的二次包裝；類沒有提高；不能使用字面量定義屬性；動態繼承類的構造方法中 super 優先 this
• 模塊
  • 每一個模塊都有本身徹底獨立的代碼塊，跟做用域相似，可是更加封閉。
  • 無限制導出導出
  • 內聯導出：嚴格模式下運行使用 export 關鍵字，後面緊跟聲明關鍵字（let、function 等）聲明一個導出對象，聲明並同時導出的導出方式
  • 對象導出
  • 一個模塊只能有一個默認導出

ES8 新特性

• String：新增padStart,padEnd
• Object.values 方法返回一個給定對象本身的全部可枚舉屬性值的數組
• Object.entries 方法返回一個給定對象自身可遍歷屬性 [key, value] 的數組
• Object.getOwnPropertyDescriptors 方法返回指定對象全部自身屬性的描述對象
• 函數參數和函數調用中的尾逗號
• Async 函數

BOM / DOM

• DOM文檔對象模型，BOM瀏覽器對象模型
• DOM 是針對 HTML 和 XML 提供的一個API，爲了能以編程的方法操做這個 HTML 的內容。將html中的每一個元素都看做是一個對象，每一個對象都叫作一個節點，這些節點組成一個DOM樹。document是DOM樹的根節點
• BOM 是瀏覽器提供的附加對象，用於處理文檔以外的全部內容，好比alert/confirm/prompt，BOM包含的對象有，document,screen,location,history,navigator
• DOM是全部W3C標準都必須遵照的規則，BOM是各瀏覽器廠商遵照的規則
• BOM的核心是window，它既是經過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window做爲其global對象。
• DOM經過建立樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具備控制力，用DOM API能夠輕鬆地刪除、添加和替換節點。
• DOM 的根節點是BOM 的window 對象的子對象。

圖片懶加載

• 三個API，咱們得到了三個值：
  • 可視區高度clientHeight、
  • 元素相對於其父元素容器頂部的距離offsetTop、
  • 瀏覽器窗口頂部與容器元素頂部的距離也就是滾動條滾動的高度scrollTop。
• 當offsetTop - scroolTop < clientHeight，則圖片進入了可視區內，則被請求。

var imgs = document.querySelectorAll('img');

  //offsetTop是元素與offsetParent的距離，循環獲取直到頁面頂部
  function getTop(e) {
      var T = e.offsetTop;
      while(e = e.offsetParent) {
          T += e.offsetTop;
      }
      return T;
  }

  function lazyLoad(imgs) {
      var H = document.documentElement.clientHeight;//獲取可視區域高度
      var S = document.documentElement.scrollTop || document.body.scrollTop;
      for (var i = 0; i < imgs.length; i++) {
          if (H + S > getTop(imgs[i])) {
              imgs[i].src = imgs[i].getAttribute('data-src');
          }
      }
  }

  window.onload = window.onscroll = function () { //onscroll()在滾動條滾動的時候觸發
      lazyLoad(imgs);
  }
複製代碼

原型，閉包，高級函數，異步

• 閉包就是一個函數裏面生成並返回一個函數，返回的這個函數能讀取到外部函數裏面的變量
• 原型就是 a 是實例，b 是構造函數，而後a.proto === b.prototype,使用instanceof來判斷的時候就是不停地向上尋找,還有讀取a的某個屬性若是沒有，就會默認去a的原型上找
• 高階函數：高階函數是一個接收函數做爲參數或將函數做爲輸出返回的函數 map/reduce/filter
• 異步：js是單線程的，但瀏覽器是多線程的，當js運行遇到異步代碼時，會將代碼交給webapi異步執行，js則能夠繼續執行下面的代碼；異步代碼會被塞入task queue裏排隊，task queue會一直觀察棧裏代碼有沒有執行完成，一旦發現棧空了，就會調用回調函數，而後從新回到js線程中執行
• www.zhihu.com/search?type…
• async表示該函數要作異步處理。await表示後面的代碼是一個異步操做，等待該異步操做完成後再執行後面的動做。若是異步操做有返回的數據，則在左邊用一個變量來接收它。

sessionstorage localstorage cookie區別

1. 傳遞方式不一樣 cookie數據始終在同源的http請求中攜帶(即便不須要)，即cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和loaclStorage不會自動把數據發給服務器，僅在本地保存。
2. 數據大小不一樣 cookie數據還有路徑(path)的概念，能夠限制cookie只屬於某個路徑下。 cookie數據最大4k，sessionStorage和localStorage比cookie大得多，能夠達到5M或者更大。
3. 數據有效期不一樣 sessionStorage:僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持； localStorage:始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據； cookie只在設置cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
4. 做用域不一樣 sessionStorage不一樣的瀏覽器窗口不能共享，即便是同一個頁面； localStorage全部同源窗口都是共享的； cookie全部同源窗口中都是共享的。

session / cookie

• Cookie 能夠保持登陸信息到用戶下次與服務器的會話，換句話說，下次訪問同一網站時，用戶會發現沒必要輸入用戶名和密碼就已經登陸了（固然，不排除用戶手工刪除Cookie），Cookie知足同源策略 Cookie 在生成時就會被指定一個Expire值，這就是Cookie的生存週期，在這個週期內Cookie有效，超出週期Cookie就會被清除。有些頁面將Cookie的生存週期設置爲「0」或負值，這樣在關閉瀏覽器時，就立刻清除Cookie，不會記錄用戶信息，更加安全。

• 因爲HTTP協議是無狀態的協議，因此服務端須要記錄用戶的狀態時，就須要用某種機制來識具體的用戶，這個機制就是Session.典型的場景好比購物車，當你點擊下單按鈕時，因爲HTTP協議無狀態，因此並不知道是哪一個用戶操做的，因此服務端要爲特定的用戶建立了特定的Session，用用於標識這個用戶，而且跟蹤用戶，這樣才知道購物車裏面有幾本書。這個Session是保存在服務端的，有一個惟一標識。

• Session是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據能夠保存在集羣、數據庫、文件中； Cookie是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現Session的一種方式。

event loop

第一步確認宏任務，微任務
  宏任務：script，setTimeout，setImmediate，promise中的executor
  微任務：promise.then，process.nextTick
process.nextTick優先級高於Promise.then


timers: setTimeout / setInterval
I/O callbacks: 不在其餘階段的全部回調函數
poll: 獲取新的I/O事件
check：執行setImmediate
close callback: 執行關閉事件的回調函數


在整個輪詢的開始執行process.nextTick
而後再執行setTimeOut、setInterval
再執行其餘的回調函數
最後執行setImmediate
複製代碼

發送ajax請求

axios / fetch
複製代碼

Node.js

Node核心思想：1.非阻塞；  2.單線程；  3.事件驅動。
Node 是一個服務器端 JavaScript 解釋器
當線程遇到IO操做的時候，不會以阻塞的方式等待IO操做完成或者數據的返回，而是將IO操做發送給操做系統，
而後接着執行下一個操做，當操做系統執行完IO操做以後，以事件的方式通知執行IO的線程，
線程會在特定的時候執行這個事件。這一切的前提條件就是，系統須要一個事件循環,
以不斷的去查詢有沒有未處理的事件，而後給預處理。
複製代碼

Redux

redux 是一個獨立的專門用於狀態管理的js庫
能夠管理react應用中多個組件共享的狀態

用redux對組件的狀態進行集中式管理

組件：兩個方面
展示數據   狀態顯示
與用戶交互更新數據   更新狀態


redux核心是一個store（倉庫）
組件直接從store中讀取狀態

更新狀態：
1. Action Creators ==>> dispatch(action) ：傳兩個值（type和data） type是傳的類型（刪除，增長，建立，更新）
2. store
3. Reducers ==>> 接受(previousState, action) 返回(newState)
4. React Component


createStore()
store: 管理state, reducer
方法： getState() , dispatch(action) , subscribe(listener)
action對象 
reducer返回的是新的狀態

applyMiddleware 中間件
thunk 異步
複製代碼

diff算法

• 只在同層進行比較
• 若是節點發生變化，那麼就直接替換
• 若是節點相同，遞歸比較子節點的變化
• 若是有key，那麼就會key相同的進行比較

react-redux 的核心就是一個connect函數，接收兩個參數，mapStatetoprops，mapdispatchtoprops，返回一個高階組件，這個高階組件接受一個組件，返回一個組件，可是這個返回的組件的props上面多了數據以及操做數據的方法

function connect(mapStateToProps,mapDispatchToProps){
  return function(com){
    return class extends React.Component{
      render(){
        return (
          <Consumer> {store=>{ state = mapStateToProps(store.getState()) dispatch = mapDispatchToProps(store.dispatch) return <Comp {...state}{...dispatch}></Comp> }} </Consumer>
        )        }
    }
  }
}
複製代碼

容器組件和展現組件

• 容器組件負責管理數據和邏輯
• 展現組件負責UI的呈現
• 他們經過react-redux提供的connect方法取得聯繫

爲何鏈接的時候是三次握手，關閉的時候倒是四次握手？

由於當Server端收到Client端的SYN鏈接請求報文後，能夠直接發送SYN+ACK報文。 其中ACK報文是用來應答的，SYN報文是用來同步的。 可是關閉鏈接時，當Server端收到FIN報文時，極可能並不會當即關閉SOCKET， 因此只能先回復一個ACK報文，告訴Client端，"你發的FIN報文我收到了"。 只有等到我Server端全部的報文都發送完了，我才能發送FIN報文，所以不能一塊兒發送。故須要四步握手。

• 三次揮手：
  • 客戶端發送 SYN 包到服務端，等待服務端確認
  • 服務端收到 SYN 包，同時本身也發送一個 SYN+ACK 包給客戶端
  • 客戶端接收到 SYN+ACK 包，向服務端發送確認包 ACK ，發送完畢，客戶端與服務端 TCP 鏈接成功，完成三次握手
• 四次揮手：
  • 客戶端連續發送釋放報文 FIN ，等待服務端確認
  • 服務端收到釋放報文 FIN ，發出確認報文 ACK

redux

action: 是store惟一的信息來源，把action發送給store必須經過store的dispatch方法。
          每一個action必須有一個type屬性描述action的類型。
複製代碼

XSS 與 CSRF 兩種跨站攻擊

1. xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網站 cookie，預防方法：不相信用戶的全部操做，對用戶輸入進行一個轉義，不容許 js 對 cookie 的讀寫
2. csrf 跨站請求僞造，以你的名義，發送惡意請求，經過 cookie 加參數等形式過濾
3. 咱們無法完全杜絕攻擊，只能提升攻擊門檻

負載均衡

當系統面臨大量用戶訪問，負載太高的時候，一般會使用增長服務器數量來進行橫向擴展，使用集羣和負載均衡提升整個系統的處理能力

JS實現繼承的方法

1. 原型鏈繼承
  將父類的實例做爲子類的原型
  function Cat() {}
  Cat.prototype = new Animal()
  Cat.prototype.name = 'cat'
  var cat = new Cat()
2. 構造繼承
  使用父類的構造函數來加強子類的實例，等因而複製父類的實例屬性給子類
  function Cat(name) {
    Animal.call(this)
    instance.name = name || 'Tom'
  }
  var cat = new Cat()
3. 實例繼承
  爲父類實例添加新特性，做爲子類的實例返回
  function Cat(name) {
    var instance = new Animal()
    instance.name = name || 'Tom'
    return instance
  }
  var cat = new Cat()
複製代碼