盒模型

• IE盒模型：content = content + padding + border
• W3C標準盒模型：content = content
• box-sizing: border-box;

垂直絕對居中

1. flex布局

   display: flex;
   justify-content: center;
   align-items: center;
   

2. 定位 + transfrom + translte

   //父元素
    position: relative;
    //子元素
    position: absolute;
    tranform:translte(-50%,-50%)
   

3. 定位 + margin-left + margin-top

    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      height: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -50px;
    }
   

瀏覽器的存儲機制

1. localStorage：存儲在瀏覽器中，一般不會消失，除非手動刪除，大小可達5MB.具有setItem(),getItem(),removeItem()，clear()API。
2. cookie:可以被發(fā)送到服務器，可以設置過期時間expires，一般大小為4kb。
3. sessionStorage:存儲在瀏覽器中，會話關(guān)閉就消失。

localStorage可以存儲對象么？

MDN:localStorage中的鍵值對，總是以字符串的形式存儲。（意味著：數(shù)值類型會自動轉(zhuǎn)換成字符串類型）
要存儲的是JSON對象的話，需要使用JSON.stringify(),將JSON對象轉(zhuǎn)換成字符串在進行存儲。
可以試著寫入對象，但數(shù)據(jù)回丟失，讀取的結(jié)果是[object object]

window.localStorage.setItem('key',{name: '111'})
window.localStorage.getItem('key') // [object Object]

觸發(fā)事件有哪幾種階段，如何在捕獲階段觸發(fā)事件。

1. 事件捕獲，從不具體到具體
2. 處于目標階段
3. 事件冒泡，從具體到不具體

addEventListener()第三個參數(shù)設置為true，則可以在捕獲階段觸發(fā)事件。

HTTP請求，如何確定請求的數(shù)據(jù)類型

Content-type:在請求中，該字段用于客戶端告訴服務器實際發(fā)送的數(shù)據(jù)類型。在響應中，Content-Type標頭告訴客戶端實際返回的內(nèi)容的內(nèi)容類型。

content取值.PNG

判斷數(shù)組類型的方法

1. instanceof()

   var arr = new Array()
   console.log(arr instanceof Array) // true
   

2. Object.prototype.toString.call()

   console.log(Object.prototype.toString.call([]) === '[object Array]') // true
   

3. Array.isArray()

   Array.isArray([]) // true
   

   Array.isArray()的實現(xiàn)原理

   Array.isArray = function(array){
     Object.prototype.toString.call(array) === '[object Array]'
   }
   

三次握手及四次揮手

1. 三次握手
   客服端發(fā)送SYN報文 SYN = 1, seq = x 進入SYN_SEND階段
   服務器端接受SYN報文，返回一個ACK響應ACK = 1,SYN = 1,ack = x+1,seq = y進入SYN_RECV階段
   客戶端接受服務器的SYN報文，返回一個ACK響應axk = y+1,seq = x+1.ACK=1進入Etablished階段
2. 四次揮手
   客戶端發(fā)送FIN=1，請求關(guān)閉連接SYN=1,seq = x進入FIN-WAIT-1階段
   服務器端返回ACK,ACK =1,seq = y,sck = x+1,進入CLOSE_WAIT階段，客服端進入FIN-WAIT-2階段
   服務器通知應用程序關(guān)系連接，之后返回給客戶端ACK=1,seq = z,ack = x+1,FIN=1進入LAST_ACK階段
   客戶端返回ACK = 1,FIN = 1,seq = x+1,ack = z+1進入TIME_WAIT，服務端進入CLOSED階段

為什么揮手比握手多了一次

握手過程，通信只需要處理連接。揮手混成，通信需要處理數(shù)據(jù)+連接。

我們寫一個函數(shù)function，他的原型是什么

function f(){}
console.log(f.__proto__ === Function.prototype) // true

vue的生命周期

1. beforeCreate 初始化事件
2. created data屬性綁定，可以發(fā)送ajax請求
3. beforeMount：
4. mounted ：可以獲取到$el
   //當data選項中的數(shù)據(jù)發(fā)生改變時,觸發(fā)deforeUpdate,updated
5. beforeUpdate
6. updated 組件更新，視圖重新渲染
7. beforeDestroy：銷毀之前 可以清除定時器，實例還可用
8. destroyed：銷毀完成，實例不可用

虛擬DOM的優(yōu)點

詳解vue中的虛擬DOM

頁面卡頓的解決辦法

chrome dev tools的 performance 可以測出頁面的卡頓來自什么部分
script，重繪和重排

const定義的對象是否可以改變

const a= { b: '123'}
a.b = '456'
console.log(a) // {b: '456'}

const 定義的對象，對象地址不可以改變，但對象的屬性值可以改變。

JS是單線程的，那為什么會執(zhí)行異步代碼，以及異步代碼如何執(zhí)行

JS單線程，瀏覽器多線程。（不覺明歷）

vue的生命周期 哪些鉤子函數(shù)涉及到VDOM

beforeUpdate,updated,beforeMount,mounted.beforeDestory（不確定）

map 和 forEach的區(qū)別（深入）

• 能用forEach()做到的，map()同樣可以。反過來也是如此。
• map()會分配內(nèi)存空間存儲新數(shù)組并返回，forEach()不會返回數(shù)據(jù)。
• forEach()允許callback更改原始數(shù)組的元素。map()返回新的數(shù)組。
• map和forEach都不會退出循環(huán)。所以在ES6中，添加了for...of

媒體查詢的優(yōu)缺點

1. 優(yōu)點：
   • 面對不同分辨率設備靈活性強
   • 能夠快速敏捷解決多設備顯示適應問題
2. 缺點：
   • 兼容各種設備工作量大，效率低下
   • 代碼累贅，會出現(xiàn)隱藏無用的元素，加載事件加長。