2019前端面試準備

時間 2019-11-09

原文原文鏈接

1.html
　　1）什麼是html
　　　　超文本標記語言，一個網頁文件
　　2）DOCTYPE有什麼做用
　　　　告訴瀏覽器使用哪一個版本的HTML規範來渲染文檔
　　3）介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些
　　　　主要分紅兩個部分：渲染引擎和JS引擎。
　　　　渲染引擎：負責取得網頁的內容(html,xml和圖像等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，而後輸出到顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不一樣。
　　　　JS引擎：解析和執行JavaScript來實現網頁的動態效果。
　　　　常見的瀏覽器內核：
　　　　Trident：IE，360，搜過瀏覽器；
　　　　Gecko：Firefox
　　　　Blink：Opera；
　　　　Webkit：Safari，Chrome
　　4）html5的新特性
　　　　01 添加語義標籤 header footer
　　　　02 加強型表單 placeholder required
　　　　03 視頻和音頻
　　　　04 canvas繪圖
　　　　05 svg繪圖
　　　　06 地理定位
　　　　07 web storage
　　　　08 websocket
　　　　09 拖放api
　　　　10 web workerjavascript

　　5）簡述一下src與href的區別css

　　　　01 href 是指向網絡資源所在位置，創建和當前文檔之間的連接，用於超連接。html

　　　　02 src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。vue

　　2.css
　　　　1）垂直居中幾種方式
　　　　　　01.display: flex
　　　　　　　　.outer {
　　　　　　　　　　display: flex;
　　　　　　　　　　align-items: center;
　　　　　　　　　　justify-content: center;
　　　　　　　　}
　　　　　　02.absolute + transform
　　　　　　　　.outer {
　　　　　　　　　　position: relative;
　　　　　　　　}
　　　　　　　　.inner {
　　　　　　　　　　position: absolute;
　　　　　　　　　　top: 50%;
　　　　　　　　　　left: 50%;
　　　　　　　　　　transform: translate(-50%, -50%);
　　　　　　　　}
　　　　　　03.absolute + margin: auto
　　　　　　　　.outer {
　　　　　　　　　　position: relative
　　　　　　　　}
　　　　　　　　.inner {
　　　　　　　　　　position: absolute;
　　　　　　　　　　top: 0;
　　　　　　　　　　left: 0;
　　　　　　　　　　bottom: 0;
　　　　　　　　　　right: 0;
　　　　　　　　　　margin: auto;
　　　　　　　　}
　　　　2）常見佈局
　　　　　　body {
　　　　　　　　display: flex;
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.left {
　　　　　　　　background: blue;
　　　　　　　　flex: 200px 0 0;
　　　　　　}
　　　　　　.middle {
　　　　　　　　background: red;
　　　　　　　　flex: 1;
　　　　　　}
　　　　　　.right {
　　　　　　　　background: green;
　　　　　　　　flex: 0 0 200px;
　　　　　　}
　　　　3）css3的新特性
　　　　　　01 動畫 animation
　　　　　　02 過渡 transition
　　　　　　03 多媒體查詢
　　　　　　04 多背景圖
　　　　　　05 陰影
　　　　　　06 圓角
　　　　　　07 漸變
　　　　　　08 字體 @font-face
　　　　　　09 轉換（旋轉縮放）
　　　　　　10 flex
　　　　4）動畫
　　　　　　01 用keyframes建立動畫
　　　　　　02 用animation綁定到某個選擇器，設置名稱和時長
　　　　　　　　div
　　　　　　　　　　{
　　　　　　　　　　　　width:100px;
　　　　　　　　　　　　height:100px;
　　　　　　　　　　　　background:red;
　　　　　　　　　　　　animation:myfirst 5s;
　　　　　　　　　　}html5

　　　　　　　　@keyframes myfirst
　　　　　　　　{
　　　　　　　　　　0% {background:red;}
　　　　　　　　　　100% {background:yellow;}
　　　　　　　　}
　　　　5）清除浮動
　　　　　　01 設置父元素overflow屬性爲hidden
　　　　　　02 使用clear：both
　　　　　　03 在浮動元素後面添加一個空標籤
　　　　　　04 使用僞元素：after
　　　　6）px，em，rem 的區別
　　　　　　px像素相對長度單位。像素px是相對於顯示器屏幕分辨率而言的 em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
　　　　　　rem也是相對長度單位，但相對的是HTML根元素。只修改根元素就成比例地調整全部字體大小java

　　　　7）盒子模型react

　　　　　　盒子模型包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分
　　　　　　webpack

3.js
　　1）基本類型和引用類型
　　　　基本類型：
　　　　　　01 類型：number string undefined null boolean
　　　　　　02 基本類型的值是不可變得
　　　　　　03 基本類型的比較是值的比較
　　　　　　04 基本類型的變量是存放在棧內存的
　　　　引用類型：
　　　　　　01 引用類型的值是可變的
　　　　　　02 引用類型值可添加屬性和方法
　　　　　　03 引用類型存儲的是地址（指針）。當你建立了一個引用類型的時候，計算機會在堆內存中幫咱們開闢一個空間來存放值，棧區內存保存變量標識符和指向堆內存中該對象的指針，也能夠說是該對象在堆內存的地址。複製對象時，會在棧內存中添加一個指針，跟被複制的指針指向堆內存中相同的一個值，因此修改其中一個對象，另外一個都會受到影響
　　　　　　04 引用類型的比較是引用地址的比較
　　2）typeof和instanceof的區別
　　　　typeo
　　　　　　01 檢測變量是字符串、數值、布爾值仍是undefined的最佳工具。
　　　　　　02 typeof 來獲取一個變量是否存在，若是要去使用 if 判斷（未聲明）則會出錯。
　　　　instanceof
　　　　　　01 instanceof運算符用來判斷用於判斷左側參數是否屬於右側的實例
　　　　　　　　obj instanceof Object 檢測Object.prototype是否存在於參數obj的原型鏈上。
　　　　　　02 typeof 對於對象來講，除了函數都會顯示 object，因此說 typeof 並不能準確判斷變量究竟是什麼類型。若是咱們想判斷一個對象的正確類型，這時候能夠考慮使用 instanceof
　　　　　　　　([1,2.3]) instanceof Array // true
　　　　　　　　({}) instanceof Object // true
　　　　　　　　(new Date) instanceof Date // true
　　　　　　　　(function(){}) instanceof Function // true
　　3）typeof null 爲何等於object
　　　　原理是這樣的，不一樣的對象在底層都表示爲二進制，在 JavaScript 中二進制前三位都爲 0 的話會被判斷爲 object 類型， null 的二進制表示是全 0，天然前三位也是 0，因此執行 typeof 時會返回「 object 」。100：字符串，數據是字符串。110：布爾類型，數據是布爾值。
　　4）怎麼檢測對象類型
　　　　Object.prototype.toString.call(obj).slice(8, -1)
　　5）this
　　　　this是對應執行環境。this是在調用時被綁定的，取決於函數的調用方法。
　　　　默認綁定、隱式綁定、顯示綁定、new 綁定。優先級從低到高。
　　　　01.默認綁定：
　　　　　　最經常使用也是函數調用類型，當只有一個獨立函數時，this指向的是window對象
　　　　02.隱式綁定
　　　　　　函數調用的位置有上下文環境（對象調用模式，函數是一個對象的方法）
　　　　03.顯示綁定
　　　　　　顯示綁定就是經過apply，call，bind，直接將函數中的this綁定到想要的對象上
　　　　04.構造函數模式
　　　　　　建立一個構造函數的實例，構造函數中的this會綁定到這個實例對象上
　　　　6）做用域鏈和閉包
　　　　　　做用域鏈
　　　　　　　　做用域分爲全局做用域和局部做用域，全局做用域在代碼中的任何地方均可以被訪問，局部做用域只在固定的代碼片斷中能夠訪問到。
　　　　　　　　每次進入一個新的執行環境，都會建立一個用於搜索變量和函數的做用域鏈。做用域鏈是函數被建立的做用域中對象的集合。做用域鏈能夠保證對執行環境有權訪問的全部變量和函數的有序訪問。標識符解析是沿着做用域一級一級的向上搜索標識符的過程，直到找到標識符（找不到報錯）。
　　　　　　　　做用域優先級：變量 > 普通函數 > 參數 > 提高
　　　　　　閉包
　　　　　　　　函數 A 內部有一個函數 B，函數 B 能夠訪問到函數 A 中的變量，那麼函數 B 就是閉包。
　　　　　　　　優勢：當全局變量使用，避免全局污染
　　　　　　　　缺點：容易形成內存泄漏
　　7）原型與原型鏈css3

　　　　原型是一個普通的對象，原型對象是構造函數的一個實例，主要用於繼承。
　　　　在建立對象的時候，都有一個叫作__proto__ 的內置屬性，用於指向建立它的構造函數的原型對象，__proto__ 將對象和原型鏈接起來組成了原型鏈
　　　　對象擁有這樣一個原型鏈之後，當訪問對象的屬性時，先查找自身是否有該屬性，當找不到該屬性時，該對象就沿着原型鏈依次去查找，找不到返回undefined
　　　　Object.prototype.__proto__ 是 null，表示 obj 對象原型鏈的終結
　　　　在原型對象上定義方法和屬性，是爲了被子類繼承和使用
　　　　Object 是全部對象的爸爸，全部對象均可以經過 __proto__ 找到它
　　　　Function 是全部函數的爸爸，全部函數均可以經過 __proto__ 找到它nginx

　　8）繼承
　　　　01 原型鏈繼承
　　　　function Parent() {
　　　　　　this.name = 'mike';
　　　　}
　　　　function Child() {
　　　　　　this.age = 12;
　　　　}
　　　　Child.prototype = new Parent();
　　　　var child = new Child();
　　　　alert(child.name) // 'mike'
　　　　02 原型式繼承
　　　　　　function obj(o) {
　　　　　　　　function F() { }
　　　　　　　　F.prototype = o;
　　　　　　　　return new F();
　　　　　　}
　　　　　　var box = {
　　　　　　name: 'trigkit4',
　　　　　　arr: ['brother', 'sister', 'baba']
　　　　　　};
　　　　　　var b1 = obj(box);
　　　　　　alert(b1.name);//trigkit4;
　　9）JS執行底層略
　　10）淺拷貝和深拷貝
　　淺拷貝
　　　　let a = {
　　　　　　age: 1
　　　　}
　　　　let b = Object.assign({}, a) // 或者 let b = { ...a }
　　　　淺拷貝只解決了第一層的問題，若是接下去的值中還有對象的話，二者享有相同的地址，會相互影響
　　深拷貝
　　　　01 JSON.parse(JSON.stringify(object))
　　　　缺陷：
　　　　　　會忽略 undefined
　　　　　　會忽略 symbol
　　　　　　不能序列化函數
　　　　　　不能解決循環引用的對象
　　　　02 遞歸

    function deepCopy(params) {
      var obj;
      if (typeof params === 'object') {
        if (Array.isArray(params)) {
          obj = [];
          for (var i = 0; i < params.length; i++) {
            obj.push(arguments.callee(params[i]))
          }
        } else {
          obj = {};
          for (var c in params) {
            obj[c] = arguments.callee(params[c]);
          }
        }
      } else { return params; }
      return obj;
    }

　　11）es6的經常使用方法
　　　　01.let和const var
　　　　　　var：有變量提高，可重複生命，var 在全局做用域下聲明變量會致使變量掛載在 window 上
　　　　　　let和const：沒有變量提高，不能重複聲明
　　　　02.箭頭函數的 this
　　　　　　001 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
　　　　　　002 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
　　　　　　003 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替
　　　　03.promise
　　　　　　Promise是一個對象，有then()方法的對象,Promise 是異步編程的一種解決方案。有三種狀態
　　　　　　等待中（pending）
　　　　　　完成了（resolved）
　　　　　　拒絕了（rejected）
　　　　　　這個承諾一旦從等待狀態變成爲其餘狀態就永遠不能更改狀態了，也就是說一旦狀態變爲 resolved 後，就不能再次改變
　　　　　　優勢：Promise 的寫法是回調函數的改進，使用then方法之後，異步任務的兩段執行看得更清楚了。then將原來異步函數的嵌套關係轉變爲鏈式步驟,很好地解決了回調地獄的問題
　　　　　　缺點：Promise 的最大問題是代碼冗餘，原來的任務被Promise 包裝了一下，無論什麼操做，一眼看去都是一堆 then，原來的語義變得很不清楚。
　　　　04.async await
　　　　　　一個函數若是加上 async ，那麼該函數就會返回一個 Promise對象
　　　　　　await等待右側表達式的結果，這個結果是promise對象或者其餘值。
　　　　　　若是它等到的不是一個 promise 對象，那 await 表達式的運算結果就是它等到的東西。
　　　　　　若是它等到的是一個 promise 對象，await 就忙起來了，它會阻塞後面的代碼，等着 promise 對象 resolve，而後獲得 resolve 的值，做爲 await 表達式的運算結果。
　　　　　　優勢：代碼簡潔、幾乎和同步代碼同樣，可讀性好
　　　　　　缺點：濫用 await 可能會致使性能問題，由於 await 會阻塞代碼
　　　　05.字符串模板
　　　　　　let time = `now time is ${new Date}`
　　　　06.new Set 數組去重
　　　　　　[...new Set([1,2,3,4,2,3,3])]//[1,2,3,4]
　　12）ts
　　　　支持es6；支持類型檢測，減小你在開發階段犯錯誤的概率
　　13）call apply bind
　　　　改變this的指向
　　　　call 第二個參數接受的是若干個參數列表
　　　　apply 第二參數接收的是一個包含多個參數的數組
　　　　bind 返回一個函數，須要手動去調用
　　14）類型轉換略
　　15）new的原理
　　　　在調用 new 的過程當中會發生以上四件事情：
　　　　　　新生成了一個對象
　　　　　　連接到原型
　　　　　　綁定 this
　　　　　　返回新對象
　　　　　　代碼實現以下
　　　　　　function create(Con, ...args) {
　　　　　　　　let obj = {}
　　　　　　　　Object.setPrototypeOf(obj, Con.prototype)
　　　　　　　　let result = Con.apply(obj, args)
　　　　　　　　return result instanceof Object ? result : obj
　　　　　　}
　　16）js垃圾回收機制
　　　　js中的內存管理是自動執行的，並且是不可見的。咱們建立基本類型、對象、函數……全部這些都須要內存。
　　　　按期執行如下「垃圾回收」
　　　　　　01.垃圾回收器獲取根並「標記」(記住)它們。
　　　　　　02.而後它訪問並「標記」全部來自它們的引用。
　　　　　　03.而後它訪問標記的對象並標記它們的引用。全部被訪問的對象都被記住，以便之後再也不訪問同一個對象兩次。
　　　　　　04.以此類推，直到有未訪問的引用(能夠從根訪問)爲止。
　　　　　　05.除標記的對象外，全部對象都被刪除。
　　17）事件機制
　　　　001.window 往事件觸發處傳播，遇到註冊的捕獲事件會觸發
　　　　002.傳播到事件觸發處時觸發註冊的事件
　　　　003.從事件觸發處往 window 傳播，遇到註冊的冒泡事件會觸發
　　　　事件代理：
　　　　　　由於冒泡機制，好比既然點擊子元素，也會觸發父元素的點擊事件，那咱們徹底能夠將子元素的事件要作的事寫到父元素的事件裏，也就是將子元素的事件處理程序寫到父元素的事件處理程序中，這就是事件委託。
　　　　　　每當將事件處理程序制定給元素時，運行中的瀏覽器代碼與支持頁面交互的JS代碼之間就會創建一個鏈接，而這種鏈接越多，頁面執行起來就越慢。考慮內存和性能問題，爲了解決事件處理程序過多的問題，採用事件委託變得頗有必要。
　　18）數組經常使用方法
　　　　01. concat() //鏈接多個數組，並返回結果
　　　　02. join() //把數組分割成字符串如[1,2].join(',') => "1,2"
　　　　03. pop() // 刪除並返回數組的最後一個元素
　　　　04. pusp() //向數組的末尾添加一個或更多元素，並返回新的長度
　　　　05. unshift() //向數組的開頭添加一個或更多元素，並返回新的長度
　　　　06. shift() // 刪除並返回數組的第一個元素
　　　　07. sort() // 對數組進行排序
　　　　08. reverse() // 顛倒數組
　　　　09. toString() // 把數組轉爲字符串
　　　　010. slice(start, [end]) // 返回數組指定元素
　　　　011. splice(index, count, [add]) // 從數組中刪除指定元素，並返回被刪除內容(數組格式) index: 位置；count：刪除數量；add：添加元素可選
　　　　012. map filter forEach reduce find some every includes
　　19）字符串經常使用方法
　　　　01 slice(start, [end]) // 截取字符串
　　　　02 substring(start, [stop]) // 截取字符串，與slice類似，但不容許負的參數；若是參數 start 與 stop 相等，那麼該方法返回的就是一個空串（即長度爲 0 的字符串）。若是 start 比 stop 大，那麼該方法在提取子串以前會先交換這兩個參數。
　　　　03 substr(start, length) // 截取字符串
　　　　04 charAt() // 返回在指定位置的字符
　　　　05 concat() //拼接字符串
　　　　06 indexOf() // 檢索字符串
　　　　07 lastIndexOf() // 從後向前檢索
　　　　08 match() // 找到與正則的匹配 ('match1match2').match(/\d+/g) => [1,2];
　　　　09 replace() // 替換與正則相匹配的值 ('match1match2').replace(/\d/g, '||') => ('match||match||')
　　　　010 search() // 檢索與正則匹配的值 ('match1match2').search(/\d/g) => 5
　　　　011 toUpperCase() // 把字符串轉爲大寫
　　　　012 toLowerCase() // 把字符串轉爲小寫
　　　　013 split('&') 字符串按‘&’進行分割
　　20）對象經常使用方法
　　　　01 Object.keys 獲取對象的全部keys值爲數組形式
　　　　02 Object.values 獲取對象的全部values 爲數組形式
　　　　03 {}.hasOwnproperty('key') 判斷對象是否有key屬性
　　　　04 for(let x in obj) 循環對象
　　　　05 Object.assign() 複製並克隆對象,並返回合併後的對象，若是是多個對象參數，那麼相同的屬性，後邊的屬性值會覆蓋前邊的屬性值；例如 Object.assign({} , obj)
　　　　06 Object.entries() 遍歷對象，並返回一個數組，數組的每個元素是由對象的屬性以及屬性值組成的數組；
　　　　07 Object.create() 建立對象
　　　　08 obj.hasOwnProperty('name') 判斷對象自身屬性中是否具備指定的屬性。

　　21）es5和es6去重

　　　　es5　

[1,1,2,1,2].filter((item, i, arr) => {
    return arr.indexOf(item) === i
})

　　　　es6: [...new Set([1,2,3,3,2])]　

　　22）判斷一個字符串中出現次數最多的字符，統計這個次數

var str = 'asdfssaaasdddddddaa';
var json = {};
for (var i = 0; i < str.length; i++) {
    if(!json[str.charAt(i)]){
       json[str.charAt(i)] = 1;
    }else{
       json[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
    if(json[i]>iMax){
         iMax = json[i];
         iIndex = i;
    }
}

　　23）求數組的最值
　　　　Math.max.apply(null, [1,2,3,4]); Math.max.apply(null,[1,2,3,4]);

　　24）數組的翻轉（非reverse()）

var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
    var num = arr.pop();
    arr2.push(num);
}
console.log(arr2);

4.http
　　1）狀態碼
　　　　1XX 用於指定客戶端相應的某些動做
　　　　2XX 用於表示成功
　　　　3XX 用於已經移動的文件而且被包含在定位頭信息中指定心的地址信息(重定向，爲了完成請求，必須進一步執行的動做)
　　　　4XX 用於指出客戶端錯誤
　　　　5XX 用於支持服務器錯誤

　　　　100 繼續；101 分組交換協議
　　　　200 ok；201 被建立；202 被採納；203 非受權信息；204 無內容；205 重置內容；206 部份內容；
　　　　300 多選項；301 永久地傳遞；302 找到；303 參見其餘；304 未改動；305 使用代理；307 暫時重定向；
　　　　400 錯誤請求(多是get請求寫成post請求)；401 未受權；402 要求付費；403 禁止；405 不容許的方法；406 不被採納；407 要求代碼受權；408 請求超時；409 衝突；410 過時的；411 要求的長度；412 前提不成立；413 請求實例太大；414 請求url太大；415 不支持的媒體類型；416 沒法知足的請求範圍；417 失敗的預期；
　　　　500 內部服務器錯誤；501 未被使用；502 網關錯誤；503 不可用的服務；504 網關超時；505 HTTP版本未被支持；
　　2）解決跨域方法
　　　　當協議、子域名、主域名、端口號中任意一個不相同時，都算做不一樣域。不一樣域之間相互請求資源，就算做「跨域」。
　　　　同源策略限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
　　　　01 jsonp
　　　　　　利用<script>元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 數據。JSONP請求必定須要對方的服務器作支持才能夠。
　　　　　　JSONP優勢是兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具備侷限性。
　　　　02 CORS
　　　　　　CORS要求瀏覽器和服務器的同時支持，是跨域的根本解決方法，由瀏覽器自動完成。
　　　　　　優勢在於功能更增強大支持各類HTTP Method，缺點是兼容性不如JSONP。
　　　　03 websocket
　　　　　　WebSocket和HTTP都是應用層協議，都基於 TCP 協議。可是 WebSocket 是一種雙向通訊協議，在創建鏈接以後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在創建鏈接時須要藉助 HTTP 協議，鏈接創建好了以後 client 與 server 之間的雙向通訊就與 HTTP 無關了。
　　　　04 postMessage
　　　　　　若是兩個網頁不一樣源，就沒法拿到對方的DOM。HTML5爲了解決這個問題，引入了一個全新的API：跨文檔通訊 API（Cross-document messaging）。這個API爲window對象新增了一個window.postMessage方法，容許跨窗口通訊，不論這兩個窗口是否同源。postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 端口"。也能夠設爲*，表示不限制域名，向全部窗口發送。
出處：https://blog.csdn.net/liangjielaoshi/article/details/83786388
　　3）三次握手四次揮手
　　　　三次握手：
　　　　　　首先 Client 端發送鏈接請求報文，Server 段接受鏈接後回覆 ACK 報文，併爲此次鏈接分配資源。Client 端接收到 ACK 報文後也向 Server 段發生 ACK 報文，並分配資源，這樣 TCP 鏈接就創建了。
　　　　四次揮手：
　　　　　　因爲TCP鏈接是全雙工的，所以每一個方向都必須單獨進行關閉。這個原則是當一方完成它的數據發送任務後就能發送一個FIN來終止這個方向的鏈接。收到一個 FIN只意味着這一方向上沒有數據流動，一個TCP鏈接在收到一個FIN後仍能發送數據。首先進行關閉的一方將執行主動關閉，而另外一方執行被動關閉。
　　4）請求方式有哪些 Post 和 Get 的區別
　　　　請求方式
　　　　01. GET 方法：發送一個請求來取得服務器上的某一資源
　　　　02. POST 方法：向 URL 指定的資源提交數據或附加新的數據
　　　　03. PUT 方法：跟 POST 方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT 指定了資源在服務器上的位置，而 POST 沒有
　　　　04. HEAD 方法：只請求頁面的首部
　　　　05. DELETE 方法：刪除服務器上的某資源
　　　　06. OPTIONS 方法：它用於獲取當前 URL 所支持的方法。若是請求成功，會有一個 Allow 的頭包含相似「GET,POST」這樣的信息
　　　　07. TRACE 方法：TRACE 方法被用於激發一個遠程的，應用層的請求消息迴路
　　　　08.CONNECT 方法：把請求鏈接轉換到透明的 TCP/IP 通道
　　5）http和https的區別
　　　　01. Http 協議運行在 TCP 之上，明文傳輸，客戶端與服務器端都沒法驗證對方的身份；Https 是身披 SSL(Secure Socket Layer)外殼的 Http，運行於 SSL 上，SSL 運行於 TCP 之上，是添加了加密和認證機制的 HTTP。兩者之間存在以下不一樣：
　　　　02. 端口不一樣：Http 與 Http 使用不一樣的鏈接方式，用的端口也不同，前者是 80，後者是 443；
　　　　03. 資源消耗：和 HTTP 通訊相比，Https 通訊會因爲加減密處理消耗更多的 CPU 和內存資源；
　　　　04. 開銷：Https 通訊須要證書，而證書通常須要向認證機構購買；
　　　　05. Https 的加密機制是一種共享密鑰加密和公開密鑰加密並用的混合加密機制。
　　6）請求過程
　　　　折中後的五層協議
　　　　　　01 應用層(dns,http) DNS解析成IP併發送http請求
　　　　　　02 傳輸層(tcp,udp) 創建tcp鏈接（三次握手）
　　　　　　03 網絡層(IP,ARP) IP尋址
　　　　　　04 數據鏈路層(PPP) 封裝成幀
　　　　　　05 物理層(利用物理介質傳輸比特流) 物理傳輸（而後傳輸的時候經過雙絞線，電磁波等各類介質）
　　　　簡括：
　　　　　　從應用層的發送http請求，到傳輸層經過三次握手創建tcp/ip鏈接，再到網絡層的ip尋址，再到數據鏈路層的封裝成幀，最後到物理層的利用物理介質傳輸。

5.webpack
　　1）什麼是webpack，爲何使用webpack // 工做原理；與gulp、grunt有什麼區別
　　　　webpack是一個打包模塊化javascript的工具，在webpack裏一切文件皆模塊，經過loader轉換文件，經過plugin注入鉤子，最後輸出由多個模塊組合成的文件，webpack專一構建模塊化項目。
　　　　WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
　　2）優缺點
　　　　優勢
　　　　　　01 專一於處理模塊化的項目，能作到開箱即用，一步到位
　　　　　　02 可經過plugin擴展，完整好用又不失靈活
　　　　　　03 使用場景不侷限於web開發
　　　　　　04 社區龐大活躍，常常引入緊跟時代發展的新特性，能爲大多數場景找到已有的開源擴展
　　　　　　05 良好的開發體驗
　　　　缺點
　　　　　　只能用於採用模塊化開發的項目
　　3）分別介紹什麼是loader?什麼是plugin
　　　　loader：模塊轉換器，用於將模塊的原內容按照須要轉成你想要的內容
　　　　plugin：在webpack構建流程中的特定時機注入擴展邏輯，來改變構建結果，是用來自定義webpack打包過程的方式
　　4）經常使用的loader
　　　　file-loader：把文件輸出到一個文件夾中，在代碼中經過相對 URL 去引用輸出的文件
　　　　url-loader：和 file-loader 相似，可是能在文件很小的狀況下以 base64 的方式把文件內容注入到代碼中去
　　　　source-map-loader：加載額外的 Source Map 文件，以方便斷點調試
　　　　image-loader：加載而且壓縮圖片文件
　　　　babel-loader：把 ES6 轉換成 ES5
　　　　css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性
　　　　style-loader：把 CSS 代碼注入到 JavaScript 中，經過 DOM 操做去加載 CSS。
　　　　eslint-loader：經過 ESLint 檢查 JavaScript 代碼
　　5）經常使用的plugin
　　　　define-plugin：定義環境變量
　　　　terser-webpack-plugin：經過TerserPlugin壓縮ES6代碼
　　　　html-webpack-plugin 爲html文件中引入的外部資源，能夠生成建立html入口文件
　　　　mini-css-extract-plugin：分離css文件
　　　　clean-webpack-plugin：刪除打包文件
　　　　happypack：實現多線程加速編譯
　　6）分別介紹bundle，chunk，module是什麼
　　　　bundle：是由webpack打包出來的文件，
　　　　chunk：代碼塊，一個chunk由多個模塊組合而成，用於代碼的合併和分割。
　　　　module：是開發中的單個模塊，在webpack的世界，一切皆模塊，一個模塊對應一個文件，webpack會從配置的entry中遞歸開始找出全部依賴的模塊。
　　7）什麼是模塊熱更新
　　　　模塊熱更新是webpack的一個功能，他可使得代碼修改事後不用刷新瀏覽器就能夠更新
　　8）經過webpack處理長緩存
　　　　在webpack中能夠在output縱輸出的文件指定chunkhash,而且分離常常更新的代碼和框架代碼。經過NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。
　　9）webpack-dev-server和http服務器如nginx有什麼區別
　　　　webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且可使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。
　　10）如何提升webpack的構建速度
　　　　01 經過externals配置來提取經常使用庫
　　　　02 利用DllPlugin和DllReferencePlugin預編譯資源模塊經過DllPlugin來對那些咱們引用可是絕對不會修改的npm包來進行預編譯，再經過DllReferencePlugin將預編譯的模塊加載進來。
　　　　03 使用Happypack 實現多線程加速編譯
要注意的第一點是，它對file-loader和url-loader支持很差，因此這兩個loader就不須要換成happypack了，其餘loader能夠相似地換一下
　　　　04 使用Tree-shaking和Scope Hoisting來剔除多餘代碼
　　　　05 使用fast-sass-loader代替sass-loader
　　　　06 babel-loader開啓緩存
　　　　　　babel-loader在執行的時候，可能會產生一些運行期間重複的公共文件，形成代碼體積大冗餘，同時也會減慢編譯效率
　　　　　　能夠加上cacheDirectory參數或使用 transform-runtime 插件試試
　　　　07 不須要打包編譯的插件庫換成全局"script"標籤引入的方式
　　　　　　好比jQuery插件，react, react-dom等，代碼量是不少的，打包起來可能會很耗時
　　　　　　能夠直接用標籤引入，而後在webpack配置裏使用 expose-loader 或 externals 或 ProvidePlugin 提供給模塊內部使用相應的變量
　　　　08 優化構建時的搜索路徑
　　　　　　在webpack打包時，會有各類各樣的路徑要去查詢搜索，咱們能夠加上一些配置，讓它搜索地更快
　　　　　　好比說，方便改爲絕對路徑的模塊路徑就改一下，以純模塊名來引入的能夠加上一些目錄路徑
　　　　　　還能夠善於用下resolve alias別名這個字段來配置
　　　　　　還有exclude等的配置，避免多餘查找的文件，好比使用babel別忘了剔除不須要遍歷的
　　出處：https://www.jianshu.com/p/bb1e76edc71e

6.正則
　　正則：也叫作規則，讓計算機可以讀懂人類的規則
　　1）經常使用方法
　　　　String對的方法
　　　　　　str.search(/表達式/) 返回匹配到的第一個位置
　　　　　　str.split(/表達式/)
　　　　　　str.match(/表達式/)
　　　　　　str.replace(/表達式/,'')
　　　　RegExp對象方法
　　　　　　/表達式/.test(str) 返回布爾值
　　　　　　/表達式/.exec(str) 返回一個數組，存放匹配的結果，若是未找到匹配，則返回值爲null
　　2）匹配手機號、郵箱、漢字、千分位
　　　　驗證手機號：/^1[345789]\d{9}/.test('15662173333')
　　　　驗證郵箱：/^\w+@[a-z0-9]+\.[a-z]+$/i
　　　　驗證漢字：^[\u4e00-\u9fa5],{0,}$
　　　　實現千分位：/\B(?=(\d{3})+(?!\d))/g

7.性能優化
　　1）經常使用的性能優化方法
　　　　01.減小HTTP請求數量
　　　　　　001 將多張圖片合併成一張圖片
　　　　　　002 合併css和js文件
　　　　02.壓縮js和css
　　　　03.css放頂部，js放底部
　　　　　　瀏覽器在加載 HTML 內容時，是將 HTML 內容從上至下依次解析，解析到 link 或者 script 標籤就會加載 href 或者 src 對應連接內容，爲了第一時間展現頁面給用戶，就須要將 CSS 提早加載，不要受 JS 加載影響。
　　　　04.去除重複腳本
　　　　05.減小DOM操做
　　　　06.懶加載
　　　　07.減小重排（Reflow）
　　　　　　重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會從新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的全部其它結點的 visibility 屬性，這也是 Reflow 低效的緣由。若是 Reflow 的過於頻繁，CPU 使用率就會急劇上升。
　　　　08.圖標使用iconFont替換
　　2）輸入url的加載過程
　　　　01.解析html文件，建立DOM樹
　　　　　　自上而下解析，遇到任何樣式（link、style）和腳本（script）都會阻塞
　　　　　　001 css加載不會阻塞html文件的解析，但會阻塞dom的渲染
　　　　　　002 css加載會阻塞後面js語句的執行
　　　　　　003 js會阻塞html的解析和渲染
　　　　　　004 沒有defer和async標籤的script會當即加載並執行
　　　　　　005 有async標籤的js，js的加載執行和html的解析和渲染並行
　　　　　　006 有defer標籤的js，js的加載和html的解析和渲染並行，但會在html解析完成後執行,在觸發DOMContentLoaded事件前執行
　　　　　　007 DOMContentLoaded和onload的區別：DOMContentLoaded在html解析完畢後執行，loload在頁面徹底加載完成後執行（包括樣式和圖片）
　　　　02.解析css，生成CSSOM，css對象模型
　　　　03.dom和css合併，構建渲染樹（Render Tree）
　　　　04.佈局（Layout）和繪製（Paint），重繪（repaint）和重排（reflow/迴流）
　　　　　　001 重繪：根據元素的新屬性從新繪製，使元素呈現新的外觀
　　　　　　002 重排：當渲染樹中的一部分由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建
　　　　　　003 重排一定會引起重繪，但重繪不必定會引起重排
　　3）優雅降級和漸進加強
　　　　漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
　　　　優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

8.vue　　1）生命週期　　　　01 在 beforeCreate 鉤子函數調用的時候，是獲取不到 props 或者 data 中的數據的，由於這些數據的初始化都在 initState 中。而後會執行 created 鉤子函數，在這一步的時候已經能夠訪問到以前不能訪問到的數據，可是這時候組件還沒被掛載，因此是看不到的。　　　　02 接下來會先執行 beforeMount 鉤子函數，開始建立 VDOM，最後執行 mounted 鉤子，並將 VDOM 渲染爲真實 DOM而且渲染數據。組件中若是有子組件的話，會遞歸掛載子組件，只有當全部子組件所有掛載完畢，纔會執行根組件的掛載鉤子。　　　　03 接下來是數據更新時會調用的鉤子函數 beforeUpdate 和 updated，分別在數據更新前和更新後會調用。　　　　04 另外還有 keep-alive 獨有的生命週期，分別爲 activated 和 deactivated 。用 keep-alive 包裹的組件在切換時不會進行銷燬，而是緩存到內存中並執行 deactivated鉤子函數，命中緩存渲染後會執行 actived 鉤子函數。　　　　05 最後就是銷燬組件的鉤子函數 beforeDestroy 和destroyed。前者適合移除事件、定時器等等，不然可能會引發內存泄露的問題。　　2）經常使用指令　　　　v-if v-else v-show v-for v-model v-on v-bind v-html　　3）組件通　　　　父子間：prod emit　　　　祖父組件和孫組件：$attr和$listeners　　　　其餘組件：bus或者vuex　　4）watch和computed和method的區別　　　　methods VS computed　　　　　　對於最終的結果，兩種方式確實是相同的。不一樣的是computed是基於它們的依賴進行緩存的。computed只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。相比而言，只要發生從新渲染，method 調用總會執行該函數。總之，從新計算開銷很大的話請選computed，不但願有緩存的請選methods。　　　　watch VS computed　　　　　　當你在模板內使用了複雜邏輯的表達式時，你應當使用computed。　　　　　　watch是一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。　　　　　　當你有一些數據須要隨着其它數據變更而變更時，或者當須要在數據變化時執行異步或開銷較大的操做時，你可使用 watch　　　5）vue-router 原理傳參模式　　　　原理：本質就是監聽 URL 的變化，而後匹配路由規則，顯示相應的頁面，而且無須刷新頁面。　　　　傳參：query、params、prods、直接跟在URL後面　　　　模式：Hash 和 istory 　　　　　　Hash 模式只能夠更改 # 後面的內容，History 模式能夠經過 API 設置任意的同源 URL　　　　　　History 模式能夠經過 API 添加任意類型的數據到歷史記錄中，Hash 模式只能更改哈希值，也就是字符串　　　　　　Hash 模式無需後端配置，而且兼容性好。History 模式在用戶手動輸入地址或者刷新頁面的時候會發起 URL 請求，後端須要配置 index.html 頁面用於匹配不到靜態資源的時候　　6）vuex　　　　state getters mutations（應用於同步，commit觸發） actions（應用於異步，dispatch觸發）　　7）mixins　　　　mixins 應該是咱們最常使用的擴展組件的方式了。若是多個組件中有相同的業務邏輯，就能夠將這些邏輯剝離出來，經過 mixins 混入代碼。mixins 混入的鉤子函數會先於組件內的鉤子函數執行，而且在遇到同名選項的時候也會有選擇性的進行合併　　8）keep-alive 組件有什麼做用　　　　若是你須要在組件切換的時候，保存一些組件的狀態防止屢次渲染，就可使用 keep-alive 組件包裹須要保存的組件。　　9）響應式原理　　　　01.vue將data初始化爲一個Observer並對對象中的每一個值，重寫了其中的get、set，data中的每一個key，都有一個獨立的依賴收集器。　　　　02.在get中，向依賴收集器添加了監聽　　　　03.在mount時，實例了一個Watcher，將收集器的目標指向了當前Watcher　　　　04.在data值發生變動時，觸發set，觸發了依賴收集器中的全部監聽的更新，來觸發Watcher.update　　10）NextTick 　　　　在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。　　11）vue react angular 的區別　　　　vue:　　　　　　優勢：　　　　　　　　a.簡單，容易上手　　　　　　　　b.輕量級的框架，且沒有依賴　　　　　　　　c.能快速的更新dom　　　　　　　　d.對模塊友好，能夠經過npm、bower安裝　　　　　　　　e.可複用的組件　　　　　　　　f.雙向數據綁定　　　　　　缺點：　　　　　　　　a.沒有angular那麼成熟　　　　　　　　b.不支持IE8如下　　　　angular：　　　　　　優勢：　　　　　　　　a.雙向數據綁定　　　　　　　　b.模版動能強大，指令豐富　　　　　　　　c.能夠複用的自定義指令　　　　　　　　d.比較完善，包含模版、模塊化、路由、過濾器、依賴注入等　　　　　　　　e.組件化　　　　　　缺點：　　　　　　a.過於臃腫　　　　　　b.什麼都要依賴注入　　　　react：　　　　　　優勢：　　　　　　　　a.速度快，經過虛擬DOM更新實際DOM　　　　　　　　b.瀏覽器兼容性好　　　　　　　　c.組件化　　　　　　　　d.對SEO友好　　　　　　　　e.單向響應數據流　　　　　　缺點：　　　　　　　　a.只是個視圖，並不完整，若是是大型項目須要配合其它框架，如react-router和readux　　12）vue虛擬dom原理　　　　Virual DOM是用JS對象記錄一個dom節點的副本，當dom發生更改時候，先用虛擬dom進行diff，算出最小差別，而後再修改真實dom。　　　　優勢：　　　　　　01 將 Virtual DOM 做爲一個兼容層，讓咱們還能對接非 Web 端的系統，實現跨端開發。　　　　　　02 一樣的，經過 Virtual DOM 咱們能夠渲染到其餘的平臺，好比實現 SSR、同構渲染等等。　　　　　　03 實現組件的高度抽象化　　　　缺點：　　　　　　01. 代碼更多，體積更大　　　　　　02. 內存佔用增大　　　　　　03. 小量的單一的dom修改使用虛擬dom成本反而更高，不如直接修改真實dom快　　13）在vue中如何操做dom　　　　使用ref　　14）對MVVM的理解　　　　Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。　　　　ViewModel是Vue的核心，它是Vue的一個實例。Vue實例是做用在某個HTML元素上的，這個HTML元素能夠是body，也能夠是某個id所指代的元素。 DOM Listeners和DataBindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；DataBindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。